Forum

Thread tagged as: Problem

including perch_item_index in a perch:content id

I have this repeater in a blocks template:

<perch:repeater id="images16" label="Images" scope-parent="true" max="6">
        <div id="p7OPMpn_16_<perch:content id="perch_item_index" />" class="opm-panel">
          <div class="opm-panel-content">

            <img alt="" src="<perch:content id="image16" type="image" label="Image" width="640" height="640" required="false" />" style="padding-top:16px;"  /> 

          </div>

        </div>
    </perch:repeater>

and I want to append perch_item_index to the perch:content id currently image16 so that it becomes image16-1, image16-2 etc. It doesn't work. Is there a way to do this?

I am using it earlier in the template like this:

<perch:if exists="image16-1"><li><a id="p7OPMtg_16_1" href="#">Trigger Text</a></li></perch:if> ...
John Liston

John Liston 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

In what way doesn't it work?
John Liston

John Liston 0 points

5 years ago

What I want to do is this (adding appending <perch:content id="perch_item_index" /> to the content id in src) like this but it doesn't work the <img ... /> isn't output to the page.

<img alt="" src="<perch:content id="image16-<perch:content id="perch_item_index" />" type="image" label="Image" width="640" height="640" required="false" />" style="padding-top:16px;"  />
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I think you want something more like your first example

id="p7OPMpn_16_<perch:content id="perch_item_index" />"

You can't nest two perch:content tags inside each other, and I can't see why that would be needed.
John Liston

John Liston 0 points

5 years ago

I needed the ids to be numbered sequentially. There are several perch:if exists lines in my template. But, as I suspected, two perch:content tags can't be nested so I'll find another way without using a repeater. Thanks
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Why do the Perch IDs need to be numbered? Surely it's only the IDs for the HTML tags themselves that matter here.
John Liston

John Liston 0 points

5 years ago

Well it would be if I wasn't constrained by a particular piece of code (it a carousel of, in this case, images) which needs triggers (one for each image) to be declared before the code for the images.

So I had a scheme where I would declare six trigger instances (I'm only permitting a maximum of six images in the repeater) and then use a perch:if statement to exclude any triggers that wouldn't be needed. That all works fine but I need to identify each image with a unique id to match the id in the triggers. If, on the other hand, I could predict what the ids would be I might be able to use that in the trigger code. ... to wordy I'm sorry.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

That's fine - none of that requires setting the field IDs in your Perch tags dynamically. You just need to set the id attributes on your HTML tags. You can use perch_item_index for that.

If you show us the code you're trying to replicate we might be able to help better.
John Liston

John Liston 0 points

5 years ago

This is the code I am using. It works but I would prefer to use a perch:repeater if I can for the panel content divs. The li trigger links have to be together and before the panel content divs and, to work, they need to have the dame ids.


<div id="p7OPMtb_15" class="opm-tabs">
    <ul>
        <perch:if exists="image15-1">
            <li><a id="p7OPMtg_15_1" href="#">Trigger Text</a></li>
        </perch:if>

        <perch:if exists="image15-2">
            <li><a id="p7OPMtg_15_2" href="#">Trigger Text</a></li>
        </perch:if>

        ... and for p7OPMtg_15_3, p7OPMtg_15_4 and so on ...

    </ul>
</div>

<div id="p7OPMpw_15" class="opm-panel-wrapper">
    <div id="p7OPMww_15" class="opm-panel-layout">

        <perch:if exists="image15-1">
            <div id="p7OPMpn_15_1" class="opm-panel">
                <div class="opm-panel-content">
                    <img alt="" src="
                    <perch:content id="image15-1" type="image" label="Image 1" width="640" height="640" required="false" />" style="padding-top:16px;" width="1920" height="600" class="scalable" />
                </div>
                <div style="font-size: 80%; text-align:right;">
                    <perch:content id="caption15-1" type="text" label="Image caption" html="false" required="false" />
                </div>
            </div>
        </perch:if><!-- end  -->

        ... this repeats for p7OPMtg_15_2, p7OPMtg_15_3 and so on ...

    </div>
</div><!-- end panel layout -->
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I think you need to use the repeater twice:

<div id="p7OPMtb_15" class="opm-tabs"> 
<ul>
<perch:repeater id="panels" label="Panels">
<li><a id="p7OPMtg_15" href="#"><perch:content id="trigger" type="text" label="Trigger text" required="true" /></a></li>
<perch:content id="image" type="image" label="Image" width="640" height="640" suppress="true" />
<perch:content id="caption" type="text" label="Image caption" suppress="true" />
</perch:repeater>
</ul>
</div>

<div id="p7OPMpw_15" class="opm-panel-wrapper"> 
<div id="p7OPMww_15" class="ope-panel-layout">
<perch:repeater id="panels" label="Panels">
<div id="p7OPMpn_15_<perch:content id="perch_item_index" />" class="opm-panel"> <div class="opm-panel-content"> <img alt="" src=" <perch:content id="image" type="image" label="Image" width="640" height="640" required="false" />" style="padding-top:16px;" width="1920" height="600" class="scalable" /> </div> <div style="font-size: 80%; text-align:right;"> <perch:content id="caption" type="text" label="Image caption" html="false" required="false" /> </div> </div>
</perch:repeater>
</div>
</div>