Featured Images do not Work. HELP!

Resolved socialpays
(@socialpays)

5 years, 6 months ago

Hi. I am having a big issue trying to get responsive images to work correctly from desktop to mobile.

My media settings are:

thumbnail: 150×150
medium: 250×1024
mobile: 350×1024
large: 700×4096

The css for ‘get_post_thumbnail’ shows as ‘medium’ for featured images which looks great on a desktop but looks a bit blurry on a mobile.

When I change it from ‘medium’ to ‘mobile’ it looks great on the mobile but not on the desktop.

Here is the code from my ‘index-masonry’ page:

————————————————————————
$is_gallery = count($images) > 1;

$imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘medium’);
if ($imgsrc[0] == ”) {
$imgsrc[0] = get_template_directory_uri() . ‘/img/blank.gif’;
$imgsrc[1] = get_option(‘medium_size_w’);
$imgsrc[2] = get_option(‘medium_size_w’);
} else if ($imgsrc[1] <= 1 && $imgsrc[2] <= 1){
$thumbid = get_post_thumbnail_id($post->ID);
$size = getimagesize($imgsrc[0]);
$imgsrc[1] = $size[0];
$imgsrc[2] = $size[1];
}
———————————————————————

I have trying to fix this for days and everything I try is not working. Could someone take a look and guide me in the right place.

I have tried setting ‘img’ as well as ‘featured-thumb’ via css to max-width: 100% which doesn’t solve the issue either as it goes outside of it’s container.

You can see what I mean when you look at the desktop and mobile version of my site. Any help or guidance would be greatly appreciated.

Thank you.

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

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

Niall Madhoo
(@nm1com)

5 years, 6 months ago
Hello @socialpays,

On mobile, your site loads a lower resolution image than it’s set to display via CSS. For instance, if you look in the screenshot below, the image file is 236x260px and displays at 327x361px:

It displays on an iPhone X as follows:

The upscaling is due to the following CSS code:
```
@media (max-width: 480px)
#masonry .featured-thumb {
    height: auto !important;
    width: 100% !important;
}

.featured-thumb {
    width: 100% !important;
    max-width: 100%;
}
```
I changed the media query as follows:
```
@media (max-width: 480px)
#masonry .featured-thumb {
    height: auto !important;
    width: auto% !important;
}
```
The image then displays at its correct 236x260px resolution:

As you can see, the image is still blurry, though it’s less bad. That’s because the original file that was uploaded appears heavily compressed.

It’s just as blurry on desktop:

It’s less bad than on mobile because it displays on the page at 250x260px (much closer to its original 236x260px):
Thread Starter socialpays
(@socialpays)

5 years, 6 months ago

Thanks so much for your detailed reply. Unfortunately it does not solve my issue.

I have multiple sizes of each image uploaded, including one that would fit a mobile:

thumbnail: 150×150
medium: 250×1024
mobile: 350×1024
large: 700×4096

.. but when I change the code to show ‘mobile’ instead of ‘medium’ it knocks the image out of the container on the desktop which only fits a medium size image.

I have even changed the code to show large images hoping that they would stay in the container but they do not.

So my question is, what code should I use to make sure that a larger image size would fit into it’s relevant container whether it be a 250 width on a desktop or a 350 width on a mobile etc?

I always though that images were responsive so it would work out the closest image uploaded and use that for the container.

Anyway, thanks again for your initial reply. If you have an idea about this then I would love to hear it as I have been at this for weeks now 🙁

Thread Starter socialpays
(@socialpays)

5 years, 6 months ago

** update **

Thanks for your help. After a bit more playing around I had to change all thumbnails to large format and then change the height and width to 100% for the featured-thumb making sure I included that in the media css as well in the styles sheet.

Thanks again. Have an awesome day 🙂

Niall Madhoo
(@nm1com)

5 years, 6 months ago

You’re welcome! Happy you managed to fix this. Same to you! 🙂