Forum

Thread tagged as: Question, Problem

Structure inside a repeater

Hi,

This problem looks simple, but I cannot find the solution:

I need to create hotspots in a panoramic picture using image map and areas. Then the link on each area shoud call inline contents. I'm using a repeater to give the abilty to create multiple spots on the image, any repeater entry should provide the coordinates of the point, the title and the content of the popup window. The code below is not correct and it's doesn't work anyway, but if I put my "inlineContent" div inside the map tag, it's not correct either. The only solution I've found to get it to work is to remove the before and after tags, but the ID of my map is duplicated and it's not right. I've tryed the scope-parent feature without success. I think something like say <perch:closure> or some kind of instuction allowing to put content after the closure of a repeated content could help if existing.

Any ideas?

<img src="<perch:content type="image" width="1200" height="500" crop="false" id="image" label="Image" bucket="panorama" required="true" />" alt="" data-width="<perch:content id="image" type="image" label="Image" output="w" />" data-height="<perch:content id="image" type="image" label="Image" output="h" />" usemap="#hotspots">

<perch:repeater id="spotsMap" label="Map area">
<perch:before>
                    <map id="hotspots" name="hotspots">
</perch:before>
                        <area class="hotspot" shape="circle" coords="<perch:content id="distH" type="text" label="Distance from left" required="true" divider-before="Coordinates of the point" order="1" />,<perch:content id="distV" type="text" label="Distance from top" required="true" order="2" />,30" href="#<perch:content type="hidden" id="perch_item_index" />" alt="<perch:content id="titre" type="text" label="Titre" required="true" />" />
<perch:after>
                    </map>
</perch:after>
                    <div id="<perch:content type="hidden" id="perch_item_index" />" class="inlineContent">
                        <h3><perch:content id="titre" type="text" label="Titre" required="true" divider-before="Fenêtre pop-up" order="4" /></h3>
                        <perch:content id="text" type="textarea" label="Contenu" html="true" editor="redactor" imagewidth="400" imageheight="400" required="false" imagecrop="false" bucket="panorama" />
                    </div>
</perch:repeater>
Hugues Mertens

Hugues Mertens 0 points

  • 5 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

What is the mark-up you are trying to create? Can you create it so it works without Perch?

That would be a good starting point.

It works in hard coding, but the problem with the template is the map tag must be closed and the inline content following must be repeated. Each occurence is named after perch_item_index, so it's impossible to write it inside the perch:after tag.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I think you want the repeater inside the <map> tags.

Sorry, I'm not very clear. I need both <area> and inlineContent in the same repeater. Areas have to be wrapped inside <map> tags while the inlineContent has to be placed outside the <map> tags.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I think that's probably two separate repeaters then, rather than one.

I need the same repeater, because the ID of the inlineContent must match the ID of the repeater for the link (the inlineContent needs to be displayed through a FancyBox)

Drew McLellan

Drew McLellan 2638 points
Perch Support

So is there an inlineContent for each area ?

If so, you'll need to use two templates. One for editing, and one for display. Group the content in whatever order required for the former, and use the repeater twice in the latter.

Fantastic, it's was the only thing I hadn't tried yet and it works great! thank you very much indeed.