[Resolved] Featured Image Size

Home Forums Support [Resolved] Featured Image Size

Home Forums Support Featured Image Size

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1413
    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 );
    }

    #1426
    Tom
    Lead Developer
    Lead Developer

    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

    #1429
    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.

    #1430
    Tom
    Lead Developer
    Lead Developer

    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

    #1431
    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.)

    #1432
    Tom
    Lead Developer
    Lead Developer

    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

    #1433
    focuspress06

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

    #1434
    Tom
    Lead Developer
    Lead Developer

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

    Tom

    #1435
    focuspress06

    Excellent! Thanks, and sorry for the hassle.

    #1442
    Tom
    Lead Developer
    Lead Developer

    No worries ๐Ÿ™‚

    Tom

    #13384
    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

    #13401
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #13402
    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?

    #13403
    Tom
    Lead Developer
    Lead Developer

    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.

    #13430
    Dee Broughton

    Great to know. Thanks!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.