Support » Fixing WordPress » Using the whole image in a thumbnail

  • Hi

    I want to use the whole image in any thumbnail. That is, each thumbnail should never be cropped and all of it appears in any thumbnail, regardless of its dimensions. Is there a way of doing this? I am sure there is, but I can’t find it!

    Thanks
    Jon T.

    • This topic was modified 7 months, 2 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 15 replies - 1 through 15 (of 15 total)
  • Please check https://developer.wordpress.org/reference/functions/the_post_thumbnail/#user-contributed-notes

    You can use the_post_thumbnail( 'full' ); to output original image.

    Thread Starter Jon T.

    (@encase47)

    Hi

    Inserring that code worked well. However, I made the mistake of regenerating the thumbnails and I cannot now get them to be anything other than cropped and square.

    The code “the_post_thumbnail( ‘full’ );” is correctly inserted. The thumbnail sizes I have set to 0 and 0. However, this doesn’t make any difference. And images are set to thumbnails.

    Please help. Thanks.

    Thread Starter Jon T.

    (@encase47)

    I also note that inserting any of the thumbnail CSS codes makes no difference. The thumbnails stay the same size.

    Please paste the following CSS in Appearance -> Customize -> Additional CSS:

    .home img.attachment-zoom-img-thumbnail.size-zoom-img-thumbnail.aligncenter.wp-post-image {
        margin: 0px !important;
        padding: 0px !important;
        width: 100% !important;
    }

    I hope this will help you.

    Thread Starter Jon T.

    (@encase47)

    No. Sorry – it didn’t work.

    The additional CSS editor now has:

    .menu-logo-img {max-width: 90px !important;}
    .entry-content a:hover, .entry-content a:visited{
    color: blue;
    }
    .header-img {

    max-height: 200px;

    }
    the_post_thumbnail( ‘full’ );
    .home img.attachment-zoom-img-thumbnail.size-zoom-img-thumbnail.aligncenter.wp-post-image {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    }

    Is this correct?

    the_post_thumbnail( ‘full’ ); this is a PHP code, it should not be there in the CSS. Please remove it.

    What happens if you change the image size in Appearance -> Customize -> Posts Settings -> Post Images to medium/large/full/medium_large?

    If you are going to change the image size in Appearance -> Customize -> Posts Settings -> Post Images then please remove the following CSS code as well.

    .home img.attachment-zoom-img-thumbnail.size-zoom-img-thumbnail.aligncenter.wp-post-image {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    }
    Thread Starter Jon T.

    (@encase47)

    I’ve removed the CSS.

    When I do what you suggest, the full image appears for medium and full, the other two sizes crop the images. However, the full image is larger than the thumbnail (full) image that I achieved yesterday.

    Thread Starter Jon T.

    (@encase47)

    Is there any way of sending you images of what we are discussing?

    Thread Starter Jon T.

    (@encase47)

    Sorry – only “full” does not crop at all.

    Yes, it looks fine now. Your rest of the post images are small in size that’s why they are not covering the space. So you have two options now. Either upload a bigger image for those posts or use the following CSS code:

    .home img.attachment-zoom-img-full.size-zoom-img-full.aligncenter.wp-post-image {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    }

    But with the CSS they will look blur, so better to upload bigger images just like other posts have.

    Thread Starter Jon T.

    (@encase47)

    If anything, I want the thumbnails to be smaller but full. Is that possible?

    Thread Starter Jon T.

    (@encase47)

    That is what I had yesterday before I regenerated the thumbnails.

    Thread Starter Jon T.

    (@encase47)

    In addition, in a previous post, you said:

    Please check https://developer.wordpress.org/reference/functions/the_post_thumbnail/#user-contributed-notes

    You can use

    the_post_thumbnail( ‘full’ );

    to output original image.

    How do I use the above, given that it is PHP? I am not sure how to change PHP.

    Regards

    If anything, I want the thumbnails to be smaller but full. Is that possible?

    If you will select thumbnail then it will definitely show small images. To make them full, after setting the image size to thumbnail, you have to use the following CSS code as well.

    .home img.attachment-zoom-img-thumbnail.size-zoom-img-thumbnail.aligncenter.wp-post-image {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    }

    How do I use the above, given that it is PHP? I am not sure how to change PHP.

    I recommend getting help from someone experienced on this because it requires theme file editing. May be your site developer can help you on this.

    Thread Starter Jon T.

    (@encase47)

    OK thanks for your help

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Using the whole image in a thumbnail’ is closed to new replies.