[Support request] Dispatch / WP Show Posts Beta image resizing issue

[Matt]

Using latest Generatepress and GP Premium, and using the beta WP Show Posts I am trying to resize images by using pre-defined smaller image sizes as advised previously in order to reduce loading time.

I have a few different image size, two being 800x and 400px wide using the classes rta_thumb_no_cropped_800x and rta_thumb_no_cropped_400x as define when using the Regenerate Thumbnails Advanced plugin. These are the sizes I’d like to use.

If I omit the width of the image even though I define the image size, the browser loads the full size image. For example, any image size class I use whether it’s rta_thumb_no_cropped_800x, medium, or thumbnail, will be shown as the full image size.

If I define the image width, for some classes of WP Show posts – using the Dispatch theme presets – the images don’t show for all of the posts in that block.

This only seems to happen for the Standard, Align, Simple and Related WP Show Posts boxes and doesn’t affect the Sidebar and Header. This for me defeats the point of the image sizing part of WP Show Posts though I was recommended to use it in https://generatepress.com/forums/topic/images-resized-in-css-not-html/

Also there are some weird WP Show Posts behaviors I’d like to highlight and see if they’re expected. They don’t make much sense to me as a user. I’ve put images to show the behavior https://imgur.com/a/ZQeSp3L.

When installing, at first you have to click and unclick the Images tickbox to get the “Image size” selection to display. Also you cant select from given image size you have to type of copy manually. https://imgur.com/H4TWHyF

Then when you enter the image size you have to also add an image width and height. For me sometimes I’d like to select say a 400px image but also put 400px width so the browser knows what size to expect and doesn’t move around (for low CLS). https://imgur.com/n4du8TP

When you click update and go back, the width and height boxes are display but you have to select and unselect the Images tickbox again to see the image size selected.

When using “rta_thumb_no_cropped_800x” which is for images 800px wide, no defined height, then the css comes out as follows for only the Header WP Show Posts section.

<img src="https://staging.mysite.com/wp-content/uploads/2021/01/image.jpg" alt="alt here" width="800" height="525" />

It’s loading the full original image size even though i’ve defined a specific size. This also happens if I select another image size like medium. The class name and width/height change to what they should be, but the full size image loads. Also, no srcset, i’m assuming you added that code that you’ve referred to in another post.

Now if I keep the same image class but define the 800px width for the image for the Header section in WP Show Posts it gives this css : –

<img src="https://staging.mysite.com/wp-content/uploads/2021/01/image-800x525.jpg" alt="alt text" />

A lot of changes there including missing image class, size, and title. But otherwise it loads the right image size and displays fine.

Now here’s the next WPSP box down I have as being called Standard, like the Dispatch theme styles here https://gpsites.co/dispatch/using-wp-show-posts/

This is with a defined image class size but no defined width/height

<img src="https://staging.mysite.com/wp-content/uploads/2021/01/image.jpg" alt="alt" width="400" height="202" />

This again loads the full image size even though it should be loading the smaller one.

If I add a width definition as 400px, this is the css for the first image of the set

<img src="https://staging.mysite.com/wp-content/uploads/2021/01/image-400x202.jpg" alt="alt" />

It loads the right image size but again, weird changes to class and no width/height stuff.

For the second image along, it’s not displayed at all, this is the css

<img src="" alt="alt" />

Not there is a ::before with “box-sizing: inherit” right after the img html.

This same issues with images not displaying occurs for most other boxes but not the Header or sidebar.

More info. Have been back and forth between here and WP Show Posts wp support now.
https://wordpress.org/support/topic/image-resizing-wp-show-posts-issues/#post-14022811
https://generatepress.com/forums/topic/image-resizing-wp-show-posts-issues/#new-post

[Tom]

Hi there,

The image height and width options shouldn’t be displayed – that could be a bug in the beta version.

I tried logging in to check, but the password isn’t correct.

Will be happy to take a closer look – it sounds like there could be a bug in the beta version that we need to address.

[Matt]

Login details added

[Tom]

So those actual Width/Height options will be deprecated in 1.2.0 – they only show if they’ve been saved prior to updating to 1.2.0. Those options aren’t ideal – it’s better to use the Image Size option. To use the new feature, simply remove your height/width values and save the list – this should make those options disappear, and the new image size option appear.

I’m having trouble seeing the issue as you’ve explained it – can you tell me which list is showing the issue/which page I can see that list on?

[Matt]

Steps to recreate

Set an image size on WP Show Posts list, don’t set height/width. Save.

Go to homepage

Check the actual size of the image displayed by right clicking >view image or whatever method you’d like.

Full size image is shown, even though the smaller image size was defined. That’s the issue.

Next issue steps

Set a width for the image in “Standard”. This is to give a correct width for the browser to know how much space that image takes.

Let’s say 400 as an example width set for the “Standard” WP Show Posts.

Save, view home page.

The second block on homepage is the “Standard” block.

The second image will not display at all.

These issues affect the Standard, Align, Simple and Related WP Show Posts lists.

Problems it causes: Larger image than needed displayed, or image not displayed, plus both having issues with CLS.

[Tom]

The width/height options are no longer necessary/should be ignored/removed.

What I can confirm is the regular image size feature isn’t working on your site. I added a Test list and set it to thumbnail, and added a Test page, and added the list. I can confirm that the thumbnail size is not being set.

Then I went to my test site and built the exact same list, and this was the result: https://www.screencast.com/t/0bMUXeOq

I wonder if something is off with your image sizes/server? Do you have another server to test a list on?

[Matt]

I have another server but it’s the same setup and same issue. This server uses PHP 7.4 with NGINX. I’ve removed the caching (which was fastcgi).

The server uses GD Library, not Imagick. Wondering if WP Show Posts relies on an Imagick function. Could I get an idea of what functions WP Show Posts relies on?

Did you add that WP Show Posts to a dispatch themed site with the beta version of WPSP?

I think this is going be something to do with what image or class WPSP is using.

As an example this is the html displayed on the “Standard” block with just the image class selected

<img src="https://staging.climbernews.com/wp-content/uploads/2020/06/Best-Beginner-Climbing-Rope.jpg" class="attachment-rta_thumb_no_cropped_400x size-rta_thumb_no_cropped_400x wp-post-image" alt="Best Beginner Climbing Rope" loading="lazy" title="Best Beginner Climbing Rope 2021 - Top 4 + Easy Guide 7" width="400" height="242">

Versus what is shown when the class and 400px width is selected – i.e. it calls the right image size

<img src="https://staging.climbernews.com/wp-content/uploads/2020/06/Best-Beginner-Climbing-Rope-400x242.jpg" alt="Best Beginner Climbing Rope 2021 – Top 4 + Easy Guide" class="center" title="Home 14">

Versus your example where the height and width are called before the img src, and classes after.

[Tom]

This image:

<img src="https://staging.climbernews.com/wp-content/uploads/2020/06/Best-Beginner-Climbing-Rope-400x242.jpg" alt="Best Beginner Climbing Rope 2021 – Top 4 + Easy Guide" class="center" title="Home 14">

Is using the old image/width option in WPSP – it will be deprecated in WPSP 1.2.0, which is why it doesn’t show up in the options anymore if it’s not already set.

This image:

<img src="https://staging.climbernews.com/wp-content/uploads/2020/06/Best-Beginner-Climbing-Rope.jpg" class="attachment-rta_thumb_no_cropped_400x size-rta_thumb_no_cropped_400x wp-post-image" alt="Best Beginner Climbing Rope" loading="lazy" title="Best Beginner Climbing Rope 2021 - Top 4 + Easy Guide 7" width="400" height="242">

Should be using the rta_thumb_no_cropped_400x size you’ve specified, but it’s not. I’ve tested this on my own servers and it’s working as it should.

What we can do is test the core WordPress function to output an image to see if your server is working correctly:

add_action( 'generate_after_header', function() {
    the_post_thumbnail( 'rta_thumb_no_cropped_400x' );
} );

Here’s the function: https://developer.wordpress.org/reference/functions/the_post_thumbnail/

With the size specified, it should output the image based on that size. Does it work?

[Matt]

It’s working, added that as a WP Snippet and tried a few different images size definitions – no display issues.

Also tried in a few different places. Could this be to do with the WPSP open and close wrappers?

Also feel free to add snippets and test on the site if you need.

[Tom]

Can you check the “Test List” page now to see if it’s working? Looking at the source, I’m seeing the 800x525 size being used after setting the list to use rta_thumb_no_cropped_800x.

[Matt]

Yes, the right image size seems to be shown now. I notice the srcset data is now being added.

Removed the defined width in all of the other blocks and this now seems to function correctly – what did you do! 🙂

[Tom]

Huh, I didn’t do anything lol

Perhaps something just needed a kick, and using the_post_thumbnail() did it? Super weird.

[Author]

Posts