- This topic has 14 replies, 3 voices, and was last updated 9 years, 7 months ago by Dee Broughton.
-
AuthorPosts
-
June 18, 2014 at 9:20 pm #1413focuspress06
Every time I add a featured image to a post, a full screen-sized image is added at the top of the content. In other themes I can choose the size when uploading but I don’t see that option. Also, I’ve tried to add code like the lines below to manage the sizes in my functions.php file, but it doesn’t change anything. I haven’t had this issue in testing with other themes, so I’m not sure what else to try here. Maybe I’m entering the code wrong. (I’m VERY new at all of this, any basic explanation helps.) Here’s a sample- http://focuspressblog.com/2014/06/18/test-5/
set_post_thumbnail_size( 280, 140, true );
add_image_size( ‘post-thumb’, 500, 300, true );
}June 19, 2014 at 11:02 am #1426TomLead DeveloperLead DeveloperHi there,
The easiest way to achieve this is by resizing the image yourself using the image editor: http://en.support.wordpress.com/images/image-editing/
You can also purchase our $3 Page Header addon which allows you to specify the height of the image super easily as well.
Hope this helps,
TomJune 19, 2014 at 11:35 am #1429focuspress06It’s not a matter of the image size. No matter how big or small the upload or attachment is, the post grabs it and makes it fill the screen. Here’s another one – http://focuspressblog.com/2014/06/19/image-size/ – as you can see, it’s a small image stretched to full width.
Also, it’s not part of the header, it’s the featured image function. Is there something I can add to the theme’s function code to limit the height and width? If so, what code would I add and where would it go? I don’t know if the problem is theme-related, I just haven’t had to deal with it on other themes.June 19, 2014 at 11:43 am #1430TomLead DeveloperLead DeveloperAh – well the featured image is wanting the image to be 100% width for cosmetic purposes.
To avoid this, you can add this CSS:
.page-header-image img {width: auto;}
Tom
June 19, 2014 at 2:25 pm #1431focuspress06It’s not an issue with the header image. As you can see here – http://focuspressblog.com/2014/06/19/test/ – the header image fits just fine. It’s the post-specific Featured Image (or Post Thumbnail) that doesn’t fit. What code do I enter to determine size for that and where do I put it?
(I tried to get help over at the WordPress support forums and their ever-so-helpful moderator shut down the topic and sent me back to you. Sorry about that.)
June 19, 2014 at 2:30 pm #1432TomLead DeveloperLead DeveloperHi there,
Are you talking about this image? http://focuspressblog.com/wp-content/uploads/2014/06/Books-e1403201558386.jpg
If so, the code above I provided will stop the auto-sizing from happening and allow the image to remain at it’s original size.
Tom
June 19, 2014 at 2:35 pm #1433focuspress06That image and every image I upload (other than the header), basically. Pardon my ignorance – where do I add that code? Thanks.
June 19, 2014 at 2:40 pm #1434TomLead DeveloperLead DeveloperYou can use a plugin like this to add custom CSS: http://wordpress.org/plugins/simple-css/
Tom
June 19, 2014 at 2:44 pm #1435focuspress06Excellent! Thanks, and sorry for the hassle.
June 19, 2014 at 2:59 pm #1442TomLead DeveloperLead DeveloperNo worries ๐
Tom
August 15, 2014 at 8:55 am #13384Dee BroughtonThis is related to the featured image size, as well. I’m having trouble with images that don’t resize to fit the first-post masonry-post, I think. When the excerpt is short and the image is longer AND the masonry puts the post first so that it’s in the wider shorter format, the image overhangs the box. IOW, it doesn’t resize the image to fit the box. I need it to resize, I think, because the post could be first at anytime, for example, in a search…
August 15, 2014 at 9:43 am #13401TomLead DeveloperLead DeveloperHi Dee,
This CSS should fix that for you:
.inside-article:before, .inside-article:after { content: ""; display: table; } .inside-article:after { clear: both; } .inside-article { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }
Let me know ๐
August 15, 2014 at 9:51 am #13402Dee BroughtonWell, ok, then! I never would have figured that out on my own. Ever. Thank you! Do you want to tell me why it does it in the first place?
August 15, 2014 at 9:55 am #13403TomLead DeveloperLead DeveloperFloating elements don’t respect their containers, so when you have a floating element that is taller than the other content in the container, it will overflow outside of the container.
To fix it, you need to apply something called a “clearfix”, which basically forces the container to notice the floating element.
August 15, 2014 at 10:45 am #13430Dee BroughtonGreat to know. Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.