Forum

Thread tagged as: Question, Problem, Gallery

Webflow to Perch endeavor

Hello, I am very new to Perch and trying to plan out my first project to be driven by Perch. The website I am working on is https://alonzoclemons.com

I am a designer first and I am familiar with HTML, CSS and some light JS. That being said I use Webflow to create my web designs and would like to use the code from Webflow to integrate Perch.

Although most of the planning seems straight forward, I have hit a wall on how to deal with the Gallery as the gallery uses a script within the html. Please see the below code example of one of the gallery items.

     <div class="w-col w-col-6">
          <div class="gallery-div-block pastels">
            <a class="w-inline-block w-lightbox" href="#"><img alt="Hippo Mama" src="images/pastel-1-th.jpg">
              <script class="w-json" type="application/json">
                { "items": [{
                  "type": "image",
                  "_id": "588d535de39b1da106c894ea",
                  "fileName": "pastel-1.jpg",
                  "origFileName": "pastel-1.jpg",
                  "width": 1000,
                  "height": 659,
                  "fileSize": 171368,
                  "url": "images/pastel-1.jpg"
                }] }
              </script>
            </a>
            <h3 class="gallery-h3">Pastel 1</h3>
          </div>
        </div>

What is the best way to to integrate the Gallery App for this with the script?

Thanks in advance.

brennan smith

brennan smith 0 points

  • 4 years ago

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.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You can create a Perch template to output JSON if you need - it's all just text.

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.