Cropping of featured content thumbnail on front page vs header on single page

  • Author
    Posts
  • #130905

    dennishhong
    Member

    I’m having a hard time figuring out the right image size and dimensions to use for featured content. The problem is that the image gets cropped very differently on the front page thumbnails versus on the headers of the individual pages.

    On the theme demo, the cropping on the Records, Videos, and Photos pages all look okay. But when I try to do the same, it crops way too closely (i.e., I end up with a closeup) and not anything like the way its done on the demo pages.

    I didn’t see any info on the theme setup page as far as recommended sizes/dimensions, so can you tell me what they should be? I’d like to use the 16:9 or 21:9 featured content image ratio.

    Can you also tell me what CSS I can use to prevent cropping altogether, so I try a few different solutions? Or maybe even just some information on how the images get cropped exactly?

    Thanks!

    The blog I need help with is groovefactoryentertainment.wordpress.com.

    #131068

    thelukemcdonald
    Theme Author

    The featured content area on the front page uses the post-thumbnail image size set by the theme. The featured image is used for the thumbnail and is cropped from the center top position to 530×530 pixels. There is not a way to disable or change this crop via CSS unfortunately.

    That said, you may be able to use custom CSS to play with the positioning of the image. below is an example that uses object-fit to center the image in the featured content block.

    .block-grid-item-image img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    I hope that helps. It’s a common issue in themes and WordPress in general where the featured image is used in more than one place, often displaying the image with different size and aspect ratio within the different context areas.

    #131083

    dennishhong
    Member

    Great, thanks! That helps.

    #131349

    dennishhong
    Member

    Hi, me again. :-) I just launched the site, and the CSS works on my PC and iPad (both with Chrome). So thank you!

    Unfortunately, it doesn’t work on my MacBook (neither Chrome and Safari), though. And the featured image thumbnails are still a bit too zoomed in.

    Any ideas what the issue might be?

    #131367

    thelukemcdonald
    Theme Author

    It appears the images in the featured posts are on the front page are displaying with the updated CSS (using object-fit) for me in Safari, Chrome, and Firefox on Mac. I’d recommend clearing your browser cache and ensure your using the current version of each browser.

    Let me know how things go.

The topic ‘Cropping of featured content thumbnail on front page vs header on single page’ is closed to new replies.