Forum

Thread tagged as: Question

Repeating Gallery Block using Lightbox

I have a site that requires a simple repeating gallery block to display images of varying projects. This gallery can be a regular or large block and uses flexbox for sizing. Within this I have a thumbnail image which calls a lightbox script to load each image. It was coded up using Webflow. My problem is I need to be able to repeat the gallery block (which I can) but I also need a way to load several Lightbox images through Perch. i.e. allow the user to add as many Lightbox images within that individual gallery block as they wish. I can't have a nested repeater inside the existing repeater. Any other ideas how best this can be achieved?

template being used:

<perch:repeater id="galleryBlock" rel="group" label="Gallery Block">
<a class="<perch:content type="select" id="blockSelect" label="Select Block Type" options="Regular Block|gallery-block, Large Block|big-block gallery-block" />  w-inline-block w-lightbox" rel="group" data-ix="image-hover" href="<perch:content type="image" id="gallery" label="Thumbnail"/>">
        <div class="text-wrap">
          <div class="big-text"><perch:content type="text" id="galleryProjname" label="Project Name"/></div>
        </div><img class="thumbnail" src="<perch:content type="image" id="gallery"/>">

   <script class="w-json" type="application/json">{ "items": [{
  "type": "image",
  "url": "<perch:content type="image" id="gallery"/>",
  "caption": "<perch:content type="text" id="caption" label="Image Caption"/>"
}] }</script>  
</a>
</perch:repeater>
Cormac Kerrigan

Cormac Kerrigan 0 points

  • 4 years ago
Duncan Revell

Duncan Revell 78 points
Registered Developer

4 years ago

You may well have discounted this, but wouldn't a multi-item region be the answer? One item per gallery, with each item containing the repeater for the individual images.
Cormac Kerrigan

Cormac Kerrigan 0 points

4 years ago

Hi Duncan, Yes I have and have tried this + place the repeater around the lightbox script to repeat it that way but that doesn't work either (they don't link). When they're successfully linked in Webflow they look like this >

<script class="w-json" type="application/json">{ "items": [{
  "type": "image",
  "_id": "59789c59b87b440001572749",
  "fileName": "3903-9001.jpg",
  "origFileName": "3903-9001.jpg",
  "width": 800,
  "height": 1200,
  "fileSize": 112442,
  "url": "images/3903-9001.jpg"
}, {
  "type": "image",
  "_id": "59789c34ba2d010001701f05",
  "fileName": "3903-8988.jpg",
  "origFileName": "3903-8988.jpg",
  "width": 1200,
  "height": 800,
  "fileSize": 148955,
  "url": "images/3903-8988.jpg"
}] }</script>
Cormac Kerrigan

Cormac Kerrigan 0 points

4 years ago

Thanks, I've had to get this working using a different Lightbox alternative to Webflow... Perch Repeaters don't work inside scripts!! not really Perch's problem but thanks for any assistance.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Repeaters don't know about their context, so they'll work with any type of text content.
ian hobbs

ian hobbs 1 points

4 years ago

I re-read a few times... when you are discussing the user experience is the user logged in or outside of perch?
Cormac Kerrigan

Cormac Kerrigan 0 points

4 years ago

The user is logged inside Perch and using repeaters to load multiple images. In theory to gt it working using Webflow, the Perch repeater would need to be within the script tag but this simply doesn't work. I've used a different approach using Lightbox master.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

What's Webflow?