Related posts image size

Hi there,

Your WPSP's img seems to have been stripped of its srcset attribute.

By default, WP Show Posts lets WordPress decide what image size it serves based on srcset.

Do you use the image height and width field for the WPSP lists on the sidebar? IF yes, can you keep them empty? It's an old function that is planned for obsoletion. It's actually removed on the latest beta version here - https://wpshowposts.com/wp-show-posts-1-2-0/

Hi, Elvin.
Yes, you are right I use height and width fields for the WPSP lists on the sidebar and I will remove them now. Thanks a lot for this.

However, what I tried to explain in the first message of this thread is not related to WPSP and the sidebar. I am talking about the related posts listing below the post content. I added a screenshot to the first message so that you can see where it is.

Actually, it would be great if I could the same thing with the WPSP plugin but if it is not possible, I have to use my own custom function code and that is why I need your help with the image size as I tried to explain in the first message.

Thanks a lot in advance.

However, what I tried to explain in the first message of this thread is not related to WPSP and the sidebar. I am talking about the related posts listing below the post content. I added a screenshot to the first message so that you can see where it is.

It actually applies to all the images on your site. Not just with WPSP.

Normally, WordPress serves images with srcset for the post loops. This "srcset" is what browsers checks for what size its going to serve depending on the viewport size.

But in your site's case, all if the <img> tags don't have one.

I think we should check first why the srcsets are missing.

Can you try disabling ALL plugins except WPSP and GP Premium and see if the srcsets show up?

As my site is live with lots of traffic, I created a staging site in order to find what causes the problem. I added the staging site link and the login info to the first message so that you can check and do anything to fix the issue. I also disabled all the plugins except the ones you said.

Hi there,

why the need for a featured image ? When you could simply use the Post Title and not load an image ? You could then use some CSS to style the colors. This would be far more performant then loading images.

Hi, David.
The need for a featured image is that as my featured images are generated from post titles, I do not need to use the post titles. That is the way I list the posts on category pages and on the sidebar. That is why I want to do the same thing for listing the previous and next posts on single posts.

The custom function for your next / previous posts is using the the_post_thumbnail_url() function

https://developer.wordpress.org/reference/functions/the_post_thumbnail_url/

Which has a sizes argument.

So you can simply specify the size in the function eg.

the_post_thumbnail_url('medium')

the_post_thumbnail_url()
I got what you mean, David. However, I could not find the code above in my custom function.

the_post_thumbnail_url('medium')

If I need to add the code above in my custom function, could you please add it properly to the file in the first message as I do not how to do?

In your content-single.php there are two instances of this ( one for Prev and one for Next):

<img data-lazyloaded="1" src="<?php echo the_post_thumbnail_url();?>" width="696" height="385" data-src="<?php echo the_post_thumbnail_url();?>" class="attachment-full size-full wp-post-image litespeed-loaded" alt="<?php echo $post_title;?>" loading="lazy" itemprop="image" data-was-processed="true">

You can see the function in there

Thanks, David. I had totally forgotten the content-single.php file.

<img data-lazyloaded="1" src="<?php echo the_post_thumbnail_url('medium')();?>" width="696" height="385" data-src="<?php echo the_post_thumbnail_url();?>" class="attachment-full size-full wp-post-image litespeed-loaded" alt="<?php echo $post_title;?>" loading="lazy" itemprop="image" data-was-processed="true">

So, should the code be like the one above? I guess there are some parts that should be removed or changed. For example I am not sure if these parts are needed or not: width="696" height="385", class="attachment-full size-full wp-post-image litespeed-loaded", data-lazyloaded="1", data-src="<?php echo the_post_thumbnail_url();?>", class="attachment-full size-full wp-post-image litespeed-loaded", loading="lazy" itemprop="image" data-was-processed="true"

What about the code below? Will it be enough?

<img src="<?php echo the_post_thumbnail_url('medium')();?>" width="300" height="166" data-src="<?php echo the_post_thumbnail_url();?>" alt="<?php echo $post_title;?>" >

Wherever in the code you see: the_post_thumbnail_url() you will need to change it.

Wherever in the code you see: the_post_thumbnail_url() you will need to change it.

OK, I will do that. What I want to learn, is there anything else that I should change or remove? Because there is something related to the LiteSpeed cache plugin, which I do not use anymore. I now use the Wp-Rocket plugin.

And one more thing, cannot we use srcset instead of displaying only one size?

According to this comment, the_post_thumbnail() function adds "srcset".

Edit: Just to test this the_post_thumbnail() code, I added one of the two parts (Previous Posts) and replaced all that code with this <img src="<?php echo the_post_thumbnail();?>. And as far as I can understand, it seems to add srcset but it still displays full-size images on mobile. The second part (Next Posts) still works with the old code.

So, <img src="<?php echo the_post_thumbnail();?> should I use this code safely?

OK, I will do that. What I want to learn, is there anything else that I should change or remove? Because there is something related to the LiteSpeed cache plugin, which I do not use anymore. I now use the Wp-Rocket plugin.

If you completely removed LiteSpeed cache, you won't have to worry about it. Uninstalling this plugin should remove its effects on the site. :D

So, should I use this code safely?

Yes this can work but you don't need to wrap add <img tag as the_post_thumbnail() itself makes its own <img>

Use this as reference - https://developer.wordpress.org/reference/functions/the_post_thumbnail/

You can also try these 2
For img src = https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
For img srcset = https://developer.wordpress.org/reference/functions/wp_get_attachment_image_srcset/

Thank you so much, Elvin. As you told I removed the img tag and my new code is <?php echo the_post_thumbnail();?>

The bigger part of the code is the one below:

					<article class="post-333 type-post status-publish format-standard has-post-thumbnail hentry category-english-level-tests generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-33" itemtype="https://schema.org/CreativeWork" itemscope=""><div class="inside-article"><div class="post-image">
<a href="<?php echo $post_link;?>">
<?php echo the_post_thumbnail();?>
</a></div></div></article>

There are some parts in <article class and <div class parts functions of which I cannot understand.

<a href="<?php echo $post_link;?>">
<?php echo the_post_thumbnail();?>

Should this code be between the article and div classes or should I delete or change these parts?