How to add fetchpriority and other attributes inside <img> tag for Featured Image in Archive Layout?

[johanlundgren]

Hi!

I’m using Cornerstone to build a custom Archive Layout (the front page of my news site). I’m trying to improve LCP and PageSpeed performance by adding attributes like:

• fetchpriority="high"
• loading="eager"
• width , height
• decoding="async"

I only want to apply these attributes to the first one or two images on the page , not to all.

The problem is:
When I use the Featured Image element , any attributes I add (via Custom Attributes or filters in functions.php) end up outside the <img> tag , which means they don’t work.

I tested using the Image (Full Width) element, and in that case, fetchpriority is correctly placed inside <img> , but it’s not practical to use this inside a loop or archive layout.

I also tested raw HTML with a manual <img> tag and that works, but again – not ideal for dynamic post listings.

So my question is:
Is there a way to make the Featured Image element output these attributes inside the <img> tag, just for the first few images in an archive loop?

Or do you have any recommended workaround?

Thank you so much – I really like working with Cornerstone and just want to improve performance a little more.

Best regards,
Johan Lundgren

Thailand Info – Senaste nytt om Thailand och Asien

[ruenel]

Hello Johan,

Thank you for the detailed information. I believe that this isn’t possible at the moment with the current structure of the Image element. I will add a feature request and made our developers aware of this so that we can add custom attributes to both the image and the image wrapper element.

Please bear with us.

[christian]

Hey Johan,

Though there is no option for lazy loading yet for the image inside the Image element, what you need is possible using the Raw Content element, Dynamic Content and Element Conditions.

1. So in the Raw Content element, your write your needed img element with the loading attribute markup.
2. You then use the Dynamic Content to insert the Featured Image URL like {{dc:post:featured_image_id}}.
3. You use the Raw Content Element Condition to show this Raw Content with the loading="eager". The condition to use is the Number type and you use the {{dc:looper:item}} == 1 or {{dc:looper:item}} == 2 so the Condition feature will check if the looper item is the first item or second. If it’s true, it will show the Raw Content element

4. You just then need to duplicate the Raw Content element and remove the loading="eager" then edit the Condition. This time, use the Condition:
   {{dc:looper:item}} != 1 or {{dc:looper:item}} != 2. Notice the != (is not) condition. That will show the 3rd image element onwards because it’s neither the first nor the second Raw Contenet element

Hope that helps.