Image resizing / WP Show Posts issues
-
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’d like to email my website address if possible, can also supply login details if needed.
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.
On my homepage I used a bunch of WP Show post boxes. The box called “Header” in show posts is the 4 posts structured as a large left box image, wide medium top right, then two smaller lower right images.
The second WP Show post section shows 4 images/articles in 2 by 2 fashion and called “Standard”, the third is image left and text right for three articles and called “Align”, the latest is 4 images with text overlays and is called “Simple”.
I have two more Wp Show posts sections called “Sidebar” which shows latest posts with a bit of hacking css and plugin, and then “Related which shows under posts.
The problem is – some of these WP Show posts I can define the width and the specific image size and the images display properly at the intended size. For some of them when I put both the intended image size and width, the images don’t display in some cases.
This only seems to happen for the Standard, Align, Simple and Related WP Show Posts boxes and doesn’t affect the Sidebar and Header.
If I omit the width of the image, the browser loads a larger image size than I want, even though the defined image size is in WP Show Posts. This for me defeats the point of the image size stuff.
Also there are some weird SP Show Posts behaviours 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 behaviour https://imgur.com/a/ZQeSp3L. Might be because I’ve upgraded, not installed fresh.
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.
This is my biggest problem at the moment. I’m trying to trim down the site as much as possible for loading times as advertising is affecting the loading times a lot and anything I can do helps.
-
This is using the new beta version available on the website where image sizes are selectable from the image sizes I’ve got, plus you can add height/width.
I can try the suggestion but I think the beta was aiming to fix the issue of not being able to choose a size by having a specifically selectable one.
Thanks for taking a look.
I have no snippets that interfere, I’ve cleared cache every time and disabled any plugins that might interfere too.
Please note this is with the WP Show Posts classes in the Dispatch theme https://gpsites.co/dispatch/
I use a very similar set of Wp Show Posts boxes to display my front page so the classes for each are similar. What I refer to as Header is the Hero/header 4 posts top part.
My issue is that without defining a width (and to be clear i’m just defining width, not height, because it’s more about cropping images than showing the full one), then the full image size loads – regardless of what I’ve put the image size class as.
For example the css for your thumbnail example shows as
<img src="https://elvin.wppluginsupport.net/wp-content/uploads/2021/01/543f795f-28f9-31c3-8984-d12888fe9e76-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Test alt" loading="lazy" itemprop="image" srcset="https://elvin.wppluginsupport.net/wp-content/uploads/2021/01/543f795f-28f9-31c3-8984-d12888fe9e76-150x150.png 150w, https://elvin.wppluginsupport.net/wp-content/uploads/2021/01/543f795f-28f9-31c3-8984-d12888fe9e76-300x300.png 300w, https://elvin.wppluginsupport.net/wp-content/uploads/2021/01/543f795f-28f9-31c3-8984-d12888fe9e76-100x100.png 100w" sizes="(max-width: 150px) 100vw, 150px" width="150" height="150">assuming you’ve just defined the image class size as thumbnail and not put eight and width in manually.
If I do the same with a class I have called “rta_thumb_no_cropped_800x” which is 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" class="attachment-rta_thumb_no_cropped_800x size-rta_thumb_no_cropped_800x wp-post-image" alt="alt here" loading="lazy" title="title 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" class="center">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" class="attachment-rta_thumb_no_cropped_400x size-rta_thumb_no_cropped_400x wp-post-image" alt="alt" loading="lazy" title="title" 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" class="center" title="Home 8">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" class="center" title="Home 9">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.
[redacted]
- The topic ‘Image resizing / WP Show Posts issues’ is closed to new replies.
