WordPress Generating Cropped Images

  • On upload, WordPress is cropping one of my images so it is cutting off the words and it is using a low resolution cropped image for my thumbnail and “similar posts” section.

    You can see the issue on this page here for the “Fundamentals of Early Retirement” posts.

    [ redundant link removed ]

    I used a similar image a few weeks ago when I was on WordPress.com, and it worked fine. These are the “Beginners Guide to Investing” images.

    I just migrated everything from WordPress.com to a self-hosted www.remarpro.com site with a new theme. Everything migrated wonderfully. The images for my first two posts on www.remarpro.com were perfect. No weird cropping. No low-res images being used in the wrong places.

    But this week I’ve been having an issue with my latest two blog posts that use the same featured image.

    This screenshot shows the images that are cropped and high quality vs. this new image.
    https://drive.google.com/file/d/1OSPiuV1XK0uRPiVppzY3-rB3Vjr6fH3J/view?usp=sharing

    Here’s a screenshot of all the image sizes that are being created on upload. Those underlined in red are the ones that are cropping the image and cutting off words.
    https://drive.google.com/file/d/1FZXkZiwUk-FffKgfK0nSBcHgwSx-R7H-/view?usp=sharing

    This screenshot shows the “similar posts” section at the bottom of my blog posts where it needs a large image, but is using a low-res square-cropped image even though higher resolution images are available.
    https://drive.google.com/file/d/1chiXQzUCEtc4MOW1IPxSw6nilapo4buk/view?usp=sharing

    Here is the original image I’m uploading that is 1920x1080px.
    https://drive.google.com/file/d/1s-ez_vZb2aGDkJii38GA5v5Wt1UAB3mL/view?usp=sharing

    Here is the actual thumbnail that is being generated for the Featured Image – a more square-ish cropped 300x240px image.
    https://drive.google.com/file/d/1LQk-y0N9RMwLDc2D2G4DhPhdmyGamQtS/view?usp=sharing

    Any idea why it is generating these weirdly cropped versions of the image? And why is it using the weird images instead of any of the higher-res proportionally-sized images that are also being created?

    I’ve uploaded and deleted so many versions of the image and it does it every time. I’ve turned off caching at CloudFlare. I’m not using Jetpack’s image caching service. I’ve purged the cache and deleted all versions of the image, but when I load a new image with a new filename, it does the same thing again.

    It did generate weirdly cropped images for my previous 2 posts, but it didn’t use any of those images so I never noticed.

    Help!

    • This topic was modified 5 years, 5 months ago by Jan Dembowski.
    • This topic was modified 5 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Do you have your Settings > Media sizes set to the same as your old site?

    Edit: And the new theme: does it use a different size for featured images?

    • This reply was modified 5 years, 5 months ago by Joy.
    Thread Starter acmac35

    (@acmac35)

    Yes I do. Sorry. Should have mentioned that too.

    Thread Starter acmac35

    (@acmac35)

    @rizwanrafiq Do you mind clarifying what directories the thumbnails should be in? And what does “upload it properly again” mean? Have I been uploading my images wrong?

    It could be how the new theme is showing the image.
    The one from your old site is output with the srcset and sizes attributes, but the new one is not.

    Thread Starter acmac35

    (@acmac35)

    @rizwanrafiq That image is gone because I deleted it. Sorry. I deleted all the wrongly cropped versions of the images (after taking the screenshot above) to see if that would force it to use a different image. (It does not. ?? Re-uploading the image will create all those strange versions again, but that does not fix why it is creating those strange croppings, and why it is using them in inappropriate places (low-res versions) only for this image and none of my others.

    @joyously I suspected it might be an issue with the new theme, but then I would expect it to use weirdly-cropped and low-res images for the “Will You Be Remembered at Work” and “The Power of Emotional Bookmarks” images as well. I loaded those images and blog posts in the new Theme on my www.remarpro.com installation and it’s displaying those images fine (using proportional versions) and using the appropriate resolution versions in the right places. It’s just this one image for “Fundamentals of Early Retirement” that is behaving strangely.

    Thread Starter acmac35

    (@acmac35)

    @joyously Actually you’re right. It looks like I loaded the images for “Will You Be Remembered At Work” and “The Power of Emotional Bookmarks” BEFORE I migrated the site to www.remarpro.com. (The posts went live after, so I thought I had loaded the images after. Nope.)

    Is there a way for me to get WordPress to set the srcset and sizes attributes again when uploading the images?

    Is it possibly my new theme does not specify these values?

    WordPress generates these attributes. Your new theme might be interfering with that. Or perhaps a plugin was supplying it and now you don’t have that plugin. (there’s a filter for it)
    I think it’s a dynamic thing, but if it’s actually in the content of your old posts (or in the meta data for the old images), then it doesn’t match what I thought was happening.

    Thread Starter acmac35

    (@acmac35)

    The srcset is definitely in the image tag markup from my old WordPress.com site and the theme I was using. Here’s an example of the before (.com) and after (.org)

    www.remarpro.com (NEW)
    <div class=”featured-thumbnail”> </div>

    Wordpress.com (OLD)
    <div class=”featured-thumbnail”> Formal silverware at an empty table.</div>

    Having the srcset is great, but I don’t think that’s what is causing my theme to use lower quality images than necessary. I’m thinking this is a bug in the theme and I’ll have to work it out with the Theme creator.

    For example, in the “similar posts” section at the bottom of each blog post, it includes a 726px wide image area for the featured image, but is using a 225px wide version of the image and blowing it up. Obviously that just makes no sense. There are larger images available for use, but it is not choosing those.

    Very weird, but I think I’ve figured out this is a theme issue and not a WordPress issue.

    Thank you for helping me sort through this.

    Thread Starter acmac35

    (@acmac35)

    Haha! Might help if I wrapped the code in code tags. Sorry.

    www.remarpro.com
    <div class="featured-thumbnail"> <img width="300" height="240" src="https://liveyourwage.com/wp-content/uploads/2019/10/test-image-crop-300x240.jpg" class="attachment-writer-widgetfull size-writer-widgetfull wp-post-image" alt="" title="" scale="0"></div>

    Wordpress.com
    <div class="featured-thumbnail"> <img width="300" height="200" src="https://liveyourwage.com/wp-content/uploads/2019/09/table-setting.jpg" class="attachment-writer-widgetfull size-writer-widgetfull wp-post-image" alt="Formal silverware at an empty table." title="" srcset="https://liveyourwage.com/wp-content/uploads/2019/09/table-setting.jpg 3864w, https://liveyourwage.com/wp-content/uploads/2019/09/table-setting-300x200.jpg 300w, https://liveyourwage.com/wp-content/uploads/2019/09/table-setting-768x511.jpg 768w, https://liveyourwage.com/wp-content/uploads/2019/09/table-setting-1024x681.jpg 1024w, https://liveyourwage.com/wp-content/uploads/2019/09/table-setting-1568x1043.jpg 1568w" sizes="(max-width: 300px) 100vw, 300px"></div>

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘WordPress Generating Cropped Images’ is closed to new replies.