[Mat]

Hi,

I’m finding that the photos for articles in the Header Highlight section of my home page do not always crop correctly. For example, see the ‘road rules’ article under the ‘Latest Articles’ section at the top of theholyfish.com. The image should show the entirety of the road sign, but instead zooms in and crops out the edge.

The original photo was much larger, but I have created thumbnails of it in all the theme’s standard sizes, including 585 x 439. When viewing the thumbnails in WP Admin, the thumbnails look as I intend. I’ve tried a couple of different plugins for making thumbnails, but the result is always the same: correct in WP Admin, but not on the site.

Some screenshots:
This is the image in the media library: https://snag.gy/HaWjJF.jpg
The image set as featured in the post (it looks incorrect here, same as when published): https://snag.gy/Uvc9V6.jpg
After clicking ‘Post Thumbnail Editor’ on the post page. The thumbnails in bottom right are those saved for the Helena theme dimensions, and they look correct: https://snag.gy/80P9T3.jpg
There is one other thumbnail with the same 585×439 dimensions. It looks different than the ones above, but at least more correct than what appears on the site: https://snag.gy/UMa28P.jpg

What do you think is happening? When I ‘Inspect Source’ in my browser, I see it is fetching this image: https://i0.wp.com/theholyfish.com/wp-content/uploads/2017/06/2013-India-Banno-860-1.jpg?resize=585%2C439 . Perhaps it’s taking the original photo and resizing it itself, rather than fetching the thumbnail matching those dimensions that I have manually created?

Hope I have explained this problem okay. Thanks,

Mat.

[Mahesh]

@banno2000: The issue is because you are not using image of correct dimension (585×439). You are using much wider one. You must use similar dimension image or at least image with same aspect ratio, or the image will the cropped. Please create an image of dimension 585×439 and upload it. It will fix the issue.
Please check the theme instruction in the link below:
https://catchthemes.com/theme-instructions/helena-pro/
Let me know if any problem.

Regards,
Mahesh

[Mat]

Okay, so are you saying that I need to crop the photo prior to uploading, rather than uploading a big photo and then using plugins in WordPress to crop the photo down to the various thumbnail sizes?

If so, does that mean I need to upload two versions of the each photo: one at 585×439 (or equivalent aspect ratio, and another at 1170×658? Which version would I set as the Feature Image of the post? Because I think the 1170×658 size is displayed at the top of the post, and when the post is included in the slider at the top of the homepage. But then the 585×439 is used in the other sections of the homepage.

[Mat]

Hi, it’d be great to get a response to my last message please.

Please note that a new article has been added to my homepage since I took the screenshots in my first message, so the order is a little different.

[Mahesh]

@banno2000: Sorry for the late reply. You don’t need to upload it twice. You can crop image to 1170×658 and upload it. Theme will automatically generate another image size by cropping the same image. Have you tried that? If not, please try and let me know if any issue.

Regards,
Mahesh

[Mat]

The original image had larger dimensions but the same aspect ratio as 1170×658.

I have now removed that image, and uploaded a pre-cropped 1170×658 image. I’m still getting the same result.

When the theme automatically generates another image size by cropping the uploaded one, does it just crop from the centre? For some of my feature images, I want the 585x image not to be based from the centre of the 1170x image, but rather to be focused towards either the left or right hand side.

For example, I like the appearance of this image in the 1170x dimension as seen here (https://snag.gy/x1DdVT.jpg), but then at the 585x dimension it is cropped in a way that cuts out part of the sign (https://snag.gy/3lzjFq.jpg) . In WordPress I can customize each thumbnail, but unfortunately they do not appear on the website itself.

[Mahesh]

@banno2000: The problem you are facing is featured image size is 16:9 and post thumbnail is 4:3. To overcome this issue you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in you child theme’s functions.php add the following code:

function helena_archive_content_image() {
    $featured_image = apply_filters( 'helena_get_option', 'content_layout' );

    if ( has_post_thumbnail() && 'full-content' != $featured_image ) { ?>
        <a class="post-thumbnail" aria-hidden="true" href="<?php echo esc_url( get_permalink() ); ?>">
            <?php
                the_post_thumbnail( 'full', array( 'alt' => get_the_title() ) );
            ?>
        </a>
    <?php
    }
}

Regards,
Mahesh

[Mat]

Thanks. I’ve added that code to my child theme, but unfortunately I’m still getting the exact same result as shown in my earlier messages & screenshots.

I also cleared the cache (both browser and Cloudflare), regenerated thumbnails, removed the feature image and uploaded a new 1170×658 one, and re-cropped all its associated thumbnails.

[Mahesh]

@banno2000: Just checked your site and the image is displaying fine, the uncropped image.

Regards,
Mahesh

[Mat]

Would you be able to attach a screenshot of what you are seeing?

Here is a screenshot of what I see, after freshly emptying the cache in Firefox: https://snag.gy/Qx3LgJ.jpg . It’s the same in Chrome, both PC and mobile. The ‘Road Rules’ photo has half the sign cropped out.

Compare that to this screenshot (https://snag.gy/nryv7b.jpg). The small photos in the bottom-right corner show the correct appearance of the 4:3 cropped photo (which includes ‘post-thumbnail’).

[Mahesh]

@banno2000: Please check the screenshot in the link below:
http://bit.ly/2lIEHr0
This is how its displaying as I check your website.

Regards,
Mahesh

[Mat]

Thank you for sending the screenshot. Although the photo is showing the full sign, I don’t think this is because it is managing the cropped thumbnails correctly. Instead, it looks like it has replaced the original 4:3 image with a 16:9 image. This isn’t a good solution, as it then puts the rest of the image grid out of alignment.

I may possibly have discovered the problem. I’ve managed to get some of the thumbnails to display correctly, such as in a widget on the sidebar. This is the code from inspecting the html for this correct thumbnail:

Now compare that to the src code from inspecting the html of the image on the homepage that is showing the wrong cropping:

I’m new to this so I could definitely be wrong. But it looks the first piece of code accesses the appropriately-sized thumbnail, which I’ve already cropped correctly. But the second piece of code just accesses the base image, and then applies an automatic crop. Presumably this automatic crop starts from the centre of the image, hence why the sign is being cut in half.

I think this would explain why wp-admin shows me that my cropped thumbnails are saved, yet they are not appearing to visitors. Automatic cropping is fine, but it should probably only be used when the designer hasn’t already manually made a thumbnail of the same dimensions.

What do you think?

[Mat]

Oh, I pasted in the code but it’s appeared as the actual images. If you Inspect their source you can see the key difference. Alternatively, the screenshots below show their full code when inspected on my website.

https://snag.gy/ulf6Mo.jpg

https://snag.gy/fliBLt.jpg

[Mahesh]

@banno2000: I checked your website. Now the image are displaying correctly. Let me know if any problem.

Regards,
Mahesh

[Author]

Posts