Webflow to Perch endeavor

I would start with a fresh presentation script. Most gallery display ( slider, grids, lightbox ) libraries have well documented methods of injecting images into your page. Your code inserts a single image.

To begin with the gallery you will need to start with a call to the gallery app. The code below uses the Gallery Revolution js and starts with setting up the images on the page using this template.

<ul>
    <?php perch_gallery_album_images( perch_get('s'), array('template' => 'GF-imageTemplate-Revolution.html', )); ?>
</ul>

the Template cycles through list images and has the Slider Reveolution JS Library data sprinkled around the perch gallery image request.

<li data-transition="fade" data-slotamount="1" data-masterspeed="900" >
<img src="<perch:gallery id="main" />" alt="<perch:gallery id="image-title" />  <perch:gallery id="desc" />" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
</li>

data-* are custom image attributes used by this particular library to manipulate the presentation of the image.

This is just a quick intro intro... and is specific to the Slider Revolution code. You'll need to create your own custom template with the gallery app. The broad principle is just to weave Perch image data and Js presentation data into your templates.

Ok, I will dig into this tonight and create a template for this. Thanks Ian and Drew for the input on this.

I created a template and added the regions to my homepage for the latest works images with lightbox effect.

I was able to add the images for the thumbnail and the larger image for the lightbox but the lightbox is not working with the code I am using.

Here is the original HTML for one of the image cells

<a class="w-inline-block w-lightbox" href="#"><img alt="Wake Up" src="images/wake-up-th.jpg">
              <script class="w-json" type="application/json">
                { "items": [{
                  "type": "image",
                  "_id": "588d49b0e39b1da106c88d51",
                  "fileName": "wake-up.jpg",
                  "origFileName": "wake-up.jpg",
                  "width": 722,
                  "height": 561,
                  "fileSize": 84751,
                  "url": "images/wake-up.jpg"
                }] }
              </script>
            </a>
            <h3 class="gallery-h3">Wake Up</h3>
            <div class="gallery-description">6″ long x 3.5″ high x 5″ deep</div>
            <div class="gallery-price">$300</div>

Here is my template

<a class="w-inline-block w-lightbox" href="#">
<img src="<perch:content id="galleryimagethumb" type="image" label="Gallery Image Thumbnail" />" alt="<perch:content id="title" type="text" label="Title" required="true" />" />
  <script class="w-json" type="application/json">
    { "items": [{
      "type": "image",
      "_id": "588d4ca56566e5217f1b2752",
      "fileName": "<perch:content id="galleryimage" type="image" label="Large Gallery Image" />",
      "origFileName": "<perch:content id="galleryimage" type="image" label="Large Gallery Image" />",
      "width": 600,
      "height": 432,
      "fileSize": 58832,
      "url": "<img src="<perch:content id="galleryimage" type="image" label="Large Gallery Image" />"
    }] }
  </script>
</a>
<h3 class="gallery-h3"><perch:content id="title" type="text" label="Title" required="true" /></h3>
<div class="gallery-description"><perch:content id="description" type="text" label="Description" required="true" help="Dimensions of the piece"/></div>
<div class="gallery-price"><perch:content id="galleryprice" type="text" label="Gallery Price" required="true" /></div>

I am not sure what I am doing wrong and I feel as thought the embedded script is playing a role in why the lighbox is not triggering. You can see the live site here without perch installed and the lightbox working correctly. https://alonzoclemons.com

Any help on this would be greatly appreciated.

I solved the issue.

I removed the

"<img src=

from this line of code

"url": "<img src="<perch:content id="galleryimage" type="image" label="Large Gallery Image" />"

I also removed this code from the script

"_id": "588d4ca56566e5217f1b2752",
"width": 600, 
"height": 432, 
"fileSize": 58832,

Everything is working like intended.