[Support request] Custom Featured Image Crop from Existing Image

Home Forums Support Custom Featured Image Crop from Existing Image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1195853
    Adam

    I’m trying to convert my site to use wide featured images (1200×630) for better layout on the archive page and when posting on social media. Currently, most of my images used in posts are tall (headshots of people). I use those as my featured images also. When posting to social media, FB & Twitter will perform an ugly automated crop, leaving me with an image not showing the face of the person. Because of this, I want more control over the cropping also.

    Based on a post I found, I created a new image size using the code below, found in this forum: https://generatepress.com/forums/topic/custom-crop-for-blog-index-featured-images/#post-357876

    add_action(‘after_setup_theme’, ‘tu_add_image_sizes’);
    function tu_add_image_sizes() {
    add_image_size( ‘large-thumbnail’, 600, 600, true ); // (cropped)
    add_filter( ‘generate_page_header_default_size’, ‘tu_set_image_size’ ); // (tell GP to use this size for index pages)
    }

    function tu_set_image_size() {
    return ‘large-thumbnail’;
    }

    This works. I am then using the Crop Thumbnails plugin to adjust the crop to include faces, as the automatic crop just grabs the middle of the image. This is also working.

    GPP seems to be using that newly created image size (large-thumbnail) for the blog archive page, although when editing the post, it shows the full (un-cropped) version as the featured image. I’m guessing that I’m not actually setting that version of the image as the featured image, but GPP is just pulling that version for the archive page.

    I tried to set which image size is used by WordPress by adding the following to functions.php (https://developer.wordpress.org/reference/functions/add_image_size/), but this didn’t see to change anything.

    if ( has_post_thumbnail() ) {
    the_post_thumbnail( ‘your-custom-size’ );
    }

    Because of this, FB & Twitter are still pulling in the actual featured image (uncropped image size), and thus showing an ugly automated crop of the image on their sites.

    Am I going about this all wrong? Would the standard way to manage this be to upload two different versions of the image I want to use — one for use in the post and one for the featured image? I was hoping to not have to manually create a second image outside of WP to accomplish this. Thank you for any help possible.

    #1196212
    David
    Staff
    Customer Support

    Hi there,

    your site is outputting Open Graph and Twitter Card meta tags – it is this meta thats defining the full size image to be used.

    I assume you’re using an SEO plugin that is creating the meta ?

    #1197552
    Adam

    I’m not currently using an SEO plugin. I did install Yoast SEO in hopes of fixing this issue, but I did not configure it & disabled it. How do you know my site is outputting Open Graph & Twitter Card meta? I was under the assumption that FB & Twitter automatically pulls the featured image when loading a link. Does it actually just load the image in the post instead of the featured image?

    Example, I have embedded this image in a post (not live on the site) AND set that image as the featured image.

    https://gshstheatre.com/wp-content/uploads/2020/03/8A4A1428-scaled.jpg

    I used the Crop Thumbnails plugin to crop the “large-thumbnail” image size with this result: https://gshstheatre.com/wp-content/uploads/2020/03/8A4A1428-1200×630.jpg

    Is there a way to tell WP what image size to use for the feature image of a post? My hope is that WP allows me to actually set the “large-thumbnail” size as the feature image — so the “large-thumbnail” size is used on the archive pages and automatically pulled in when posting on FB & Twitter.

    Thank you for the support.

    #1197797
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like Jetpack is adding the Open Graph tags on your website. They’re listing the full image as the image, which is why social media is picking it up instead of the image displaying on the page.

    I’m not sure if Jetpack has the option to choose which image to include? Might be worth checking out.

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