Featured Image Size

[focuspress06]

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 );
}

[Tom]

Hi 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,
Tom

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[focuspress06]

It’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.

[Tom]

Ah – 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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[focuspress06]

It’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.)

[Tom]

Hi 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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[focuspress06]

That image and every image I upload (other than the header), basically. Pardon my ignorance – where do I add that code? Thanks.

[Tom]

You can use a plugin like this to add custom CSS: http://wordpress.org/plugins/simple-css/

Tom

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[focuspress06]

Excellent! Thanks, and sorry for the hassle.

[Tom]

No worries 🙂

Tom

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

This 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…

http://elt.international/?s=vidya

[Tom]

Hi 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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

Well, 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?

[Tom]

Floating 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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

Great to know. Thanks!

[Author]

Posts