[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

[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]

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’).

[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.

[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.

[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.

[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]

The issue persists even with a default theme and with all the plugins disabled. So I guess I’ll look elsewhere for more assistance. Thanks.

[Mat]

The screenshot below is of the post editor. There aren’t any <p></p> tags that I can see. Should I be looking elsewhere?

https://snag.gy/IMw0Ha.jpg

[Mat]

http://theholyfish.com/my-must-pack-item/

Scroll to the bottom of the article and you’ll see two Facebook Like buttons that have placed themselves under the line of text which they are supposed to be adjacent to. Both these buttons are from the same plugin, but I was also getting the same result with shortcodes from other plugins.

[Mat]

Hello?

[Mat]

I’ve installed a new plugin and used it to recrop the feature image for every posts in the Header Highlight Content. It, like the other plugin, doesn’t identify a 293 x 220 image size for the theme. The list it gives is:

* thumbnail – 90×68
* post-thumbnail – 585×439
* helena-slider – 1170×658
* helena-small – 90×68

The closest proportionally is 585×439. I have recropped for that size, and helena-small, and thumbnail.

The problem is still occurring, depending on the screen size. I think at some points it is due to the images scaling down but not the font size. But this may not be the only reason.

[Mat]

In the plugin I use for cropping thumbnails, the closest specified thumbnail to those dimensions is ‘post-thumbnail’ at 585×439, which is double the correct dimensions. I’ve recropped and saved the images for the post-thumbnail dimensions, but it still is showing incorrectly.

Perhaps the plugin isn’t working correctly – is there one that you recommend?

[Mat]

In the meantime, the featured image rather than the Catch Themes sign has begun showing. This wasn’t anything that I did, rather it just began working correctly a few hours later.

[Mat]

I’ve pasted it into the child theme but it doesn’t seem to be working correctly. For example, compare http://theholyfish.com/the-one-little-thing-i-never-travel-without/ , which seems to have the featured image set correctly, with the link to this article on the homepage. On my devices it is not showing the featured image, but rather the Catch Themes sign advising that no image has been set.

[Mat]

I’ve created the child theme as per the instructions. Do I paste your code into the child theme’s functions.php?

[Mat]

I can confirm joshua’s #2 problem. I’ve had the same ever since installing the theme.

I’ve used different PCs and devices, emptied their caches again and again, and used cache-blocking brower extensions. I’ve also confirmed that I don’t have any caching plugins installed, purge Cloudflare’s cache frequently and set it to straight-through development mode. Nothing helps.

Changes to the text of posts updates correctly. But changes to images frequently don’t. Currently one of my feature images is not being showed with the correct dimensions. The WP media library shows me that it is good for every size (e.g. helena-slider), but an older version of the photo appears on the home page and as the feature image at the top of the post.

I removed it so that the post had no feature image. After publishing the update, clearing all caches etc. the image no longer appears at the top of the post, but still appears unchanged on the homepage (in the featured slider and the header highlight content).

[Mat]

Problem solved, thank you! The support on this site is fantastic!

[Mat]

Thanks for the response. Is it possible to explain how to do just #2 from my list?

[Mat]

Resolved, thanks! I didn’t want to disable comments, but rather just remove that particular link, so the CSS was all that I needed.

[Author]

Posts