Create a unique CSS class within a repeater?

  • Hi,


    I'm using a repeater in my template.


    I'd like to be able to output a unique CSS class for each item in a repeater, something like this:


    Code
    1. <div class="item-0">...</div>
    2. <div class="item-1">...</div>
    3. <div class="item-2">...</div>


    I've used <perch:showall> and I can see each repeater item starts with a unique array, simplified example below.


    Is it possible to use these array numbers in my HTML template? If not, perhaps I could use the [assetID]?




    Health check

    • Perch Runway is up to date
    • PHP 7.1.26 is up to date
    • MySQL 5.7.25 is up to date
    • Image processing available
  • I've hit a bump with this...


    When I have more than one block on a page, the value of perch_item_index is no longer unique.


    Using perch:showall I can see each block as a unique ID


    <perch:content id="_block_id">


    I was hoping to combine _block_id and perch_item_index to make a unique value within a repeater


    Unfortunately, I can't access _block_id inside a repeater


    I've created variables from IDs in the past, but the way I do that involved referencing a fixed page. As this is a block, it could appear anywhere.


    Is it possible to make _block_id a variable, so I could use it inside a repeater


    Or perhaps there's a better way to create a unique value per item in a repeater ?

  • To use _block_id inside a perch:repeater, just do this:


    Add scope-parent to the perch:repeater, then add id="parent._block_id" to the ID inside the perch:repeater

    Code
    1. <perch:repeater scope-parent id="your_repeater_id"><perch:content id="parent._block_id" type="hidden">-item-<perch:content id="perch_item_index" type="hidden"></perch:repeater>


    When combined with perch_item_index, this will output a unique value per item inside a repeater. A useful addition if you intend to have more than one block on a page.



    More info in the docs, at the bottom of the page, 'Accessing content outside the repeater'.