[Closed] Problem with views and CLS, Cumulative Layout Shifts

[Author]

Posts

[valterB]

Hi,
I get bad ratings on Google PageSpeed Insights on CLS (Cumulative Layout Shifts). It says width and height values are lacking for images. I am using views created with Toolset. As far as I can see I do have width and height specified, but still get complaints from Google Speed insight.

Here is an example of a view I am using:
<h6 class='flexteaser'>[types field='teasertema'][/types]</h6>
<div class="flexbild">[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='330' height='200' resize='crop' separator=', '][/types]</div>
<h4 class='flexrubrikxs'>[wpv-post-link]</h4>
<p class='flexnedryck'>[types field="nedryckare"][/types]</p>

This view is used here:
hidden link
and here:
hidden link

Can you help me to understand what I am doing wrong?
How can I fix the CLS problem?

Thanks in advance!
Valter

[Minesh]

Hello. Thank you for contacting the Toolset support.

Please allow me to discuss this with concern person about this and I'll get in touch with you as soon as I know more.

[Minesh]

I've tested this issue on my test site where I've added the image field using the Types shortcode and I can see that on frontend that when I check the page source the image tag is missing the height and width attributes.

Please allow me to escalate this to our next level support and I'll get in touch with you as soon as I know more.

[valterB]

Really appreciate your efforts to help me with this problem. Hope you will find a solution soon!

[Jamal]

Hello! Minesh is on vacation. If you don't mind, I'll continue with you on this ticket.

The issue has been escalated to the concerned teams. It will be handled in an upcoming release. We don't really have a visibility on when this will be fixed.

In the meantime, you can work around it by building the image tag manually and passing the URL of the resized image using the types shortcode. The trick is to use the url="true" shortcode argument. Read more about the available arguments for the Image field here https://toolset.com/documentation/customizing-sites-using-php/functions/#image
The following shortcode will return the image URL:

[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='300' resize='crop' url="true"][/types]

Where as the following will return the <img> tag of the resized image:

[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='300' resize='crop'][/types]

Check the screenshot of my result: hidden link
You can log in to this test site using this link hidden link
I used a content template instead of a view: hidden link
And I added both images to it. Check it here hidden link

Instead of using:

[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='300' resize='crop'][/types]

Build the whole image block like so:

  <img 
       src="[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='300' resize='crop' url="true"][/types]" 
       width='400' 
       height='300' 
       class="attachment-custom">

However, by doing this, you won't get the image title and alt text generated automatically. For that reason, you can add the custom shortcode in this ticket to generate both of them https://toolset.com/forums/topic/alt-text-output-for-images-from-custom-field/#post-1857657
Like this:

  <img 
       src="[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='300' resize='crop' url="true"][/types]" 
       title="[media-info field='wpcf-image' info='title']"
       alt="[media-info field='wpcf-image' info='alt']"
       width='400' 
       height='300' 
       class="attachment-custom">

I hope this helps. Let me know if you have any questions.

[valterB]

Hi, I tried to follow your example but need a little more assistance.
Changing my views as shown below did NOT work.
Can you clarify what it should look like?
Thanks!
Valter

I changed my view from this:

<div class="flexbild">[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='330' height='200' resize='crop' separator=', '][/types]</div>

To this:

<div class="flexbild">
[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='330' height='200' resize='crop' url="true"][/types]
title="[media-info field='wpcf-image' info='title']"
alt="[media-info field='wpcf-image' info='alt']"
width='400'
height='300'
class="attachment-custom">
</div>

[Jamal]

Instead of:

<div class="flexbild">[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='330' height='200' resize='crop' separator=', '][/types]</div>

Use:

<div class="flexbild">
    <img
        src="[types field='image' size='custom' width='330' height='200' resize='crop' url='true'][/types]"
        title="[media-info field='wpcf-image' info='title']"
         alt="[media-info field='wpcf-image' info='alt']"
         width='330'
         height='200'
         class="attachment-custom"
</div>

Note that you need to add the custom shortcode to your theme's functions.php file or to a Toolset snippet. Login to my test site and check the snippet here hidden link

If you are unsure about it, allow me temporary access and I'll check it further. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[valterB]

I tested adding the code with code-snippet, but that crashed the site so I went back to a backup. I will probably need help to do fix this.

Right now I am changing some Toolset views/content templates to regular WordPress blocks to solve some issues with missing image width/height values

Can I get back to you within a few days, to get help with fixing Toolset's issue with width/height values?

[Jamal]

Of course. I'll set this ticket as waiting for your feedback, it should be kept open for 3 weeks and you will receive an email notification before it is closed automatically, so you can reply to us and continue together on this.