Forum

Thread tagged as: Question, Problem

Multiple items with an exception on the first one

Hello,

I'm looking for a way to apply specific markup only to the first instance of multiple items.

For example, in a list of images for a slideshow, all except the first one would be lazy loaded.

First item:

<li><figure>
    <img src="<perch:content type="image" id="image" label="Image" width="950" height="595" />" alt="" />
    <figcaption><perch:content type="text" id="caption" label="Caption" title="true" /></figcaption>
</figure></li>

Following items are lazy loaded:

<li><figure>
    <img data-original="<perch:content type="image" id="image" label="Image" width="950" height="595" />" alt="" class="lazy" />
    <noscript><img src="<perch:content type="image" id="image" />" width="950" heigh="595"></noscript>
    <figcaption><perch:content type="text" id="caption" label="Caption" title="true" /></figcaption>
</figure></li>

("lazy" class has been added, "data-original" is used instead of "src" and a no script fallback is added)

Is it possible?

Stéphane Mégécaze

Stéphane Mégécaze 0 points

  • 7 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support