Featured image in sidebar does not use the specified thumbnail size

[chancarlo]

Hi Aldo, thank you for this really really great plugin. I appreciate all the effort you've put in.

I think I found an issue with displaying the featured image. It does not use the thumbnail size I specify. For my case, it always picks the large image (or even original) even if I specified a small thumbnail. I don't really need a big file size image to be displayed in a small sidebar.

I traced what could be causing the issue and found that WordPress builds the featured image with srcset and this gets saved under "$image_html". So that leaves the browser to choose a size which usually ends up being larger than thumbnail size I specified.

To fix the issue, I added the following line in pis-functions-display.php, Line 490:

$image_html = preg_replace( '/(width|height|srcset|sizes)=\"[\S\s]*?\"/', "", $image_html );

to remove the srcset in the final html text. Can you please have a look. Thank you.

[aldolat]

Hi @chancarlo,

thank you for this really really great plugin. I appreciate all the effort you've put in.

You are welcome. I really appreciate your kind words.

[cut] To fix the issue, I added the following line in pis-functions-display.php, Line 490 [cut]

The way browsers handle responsive images is something that I never studied well. I should do it - the problem is the available time, as always.

I made some tests with your regex, which is working perfectly, but I prefer to leave users the freedom to choose. If I add that line, all users will be forced to use it. In addition I would remove the responsive functionality added by WordPress, and I don't know if this could be the best approach.

Instead, I will add a filter, so that you can change that line as you want. The line will be:

$image_html = apply_filters( 'pis_image_html', $image_html );

and a possible filter with your regex could be:

/**
 * Remove some img attributes for responsive image.
 *
 * @param string $image_html The incoming HTML string with the img element.
 * @return string $image_html The filtered HTML string with the img element.
 */
function add_img_filter( $image_html ) {
    $image_html = preg_replace( '/(width|height|srcset|sizes)=\"[\S\s]*?\"/', '', $image_html );
    return $image_html;
}
add_filter( 'pis_image_html', 'add_img_filter' );

Let me know, please.

Thanks. :)

[chancarlo]

Thanks @aldolat for considering my comment and proposing to add a filter. That way the core code need not be changed after I update the plugin. Thinking about it, I agree with you that the best approach is to leave the responsive functions added by WordPress.

It's just that in some cases, like when the user is viewing on an iPhone (retina), he gets a larger file size than what I specified versus when the user is viewing on a non-retina device. Which means that the site would load slower on iPhone because the total page size is bigger. So adding the filter would give flexibility to the web developer to control the precise image size.

[aldolat]

Hello @chancarlo I just released the 4.8.0 version.

Thanks! :)