Trouble with Gallery functionality

Hi Kyle,

I don't think the Gallery App will be developed further. Perch Content with Multiple Item Regions will do the job just as well and are simple to implement.

If you have some static, working code, you can implement Perch into it. Post the code you'd like to replicate here and we can give you some pointers.

Ok, thank you Simon. Here's what I've got:

I'm now using fixed image sizes and media query breakpoints for the thumbnail grid. The image divs are sized square. I'm using a responsive-sized flexbox container to position everything. It all works very nicely.
The thumbnail image sizes are (all square cropped) 65px, 77px, 87px, 100px and 112px.

I've created the Perch template 'gridSquare':

<div class="gridsquare">
    <div class="swiper-slide thmbnail">
    <img src="<perch:content id="image_gal1" type="image" label="Gallery Image" width="112px" height="112px" crop>" alt="<perch:content id="alt" type="text" label="Alt Text">">
    <perch:content id="image_gal1" type="image" label="Gallery image" suppress>
    </div>
</div>

html:

 <!-- GALLERY THUMBNAILS -->
    <div class="swiper-container gallery-thumbs">
        <!-- GALLERY THUMBNAILS -->
        <?php perch_content('gridSquare'); ?> 
    </div>

That's all working.

Then I need a lightbox to open the large (native res - contrained by screen width/height) image using the same image upload (not cropped/resized).

I assume I have to create a new Perch template for the lightbox (full-size/uncropped) image, with the 112 x 122px image now selected as 'surpress'. Will this require the editor to manually order both regions so the correct thumbnail aligns with the correct larger image? Am I correct in assuming that deleting 'width' and 'height' will result in the full-sized image?

I'm using Swiper.js here but I can use Colorbox or any modern, lightweight lightbox plugin that allows navigation.

So any pointers are appreciated.

Hi, you should be able to build it into one template.

What's the final code you'd like to output?

PS: Don't include px in width & height e.g. <perch:content id="image_gal1" type="image" label="Gallery Image" width="112" height="112" crop>

Also, rather than not setting a width and height for the full-sized image, I would set an ideal width and height, to help with page load speed, just incase the client uploads a very large image.

Ok, thank you, I've managed to get this done using photoswipe.js and perch:blocks. The only issue now are:

• the image thumbnails do not open to the correct images (originally this was working but since I changed it to perch:blocks it no longer does). There is a data-index value in the html that should accomplish this, but I do not know how to use Perch to input the correct value. Maybe there is another way.

• the overlay captions do not appear (this might be specific to the in-line jquery or the linked photoswipe files, but the html IS showing the caption text).

This is the template I created:

<perch:blocks>

    <perch:block type="gallerydate" label="Gallery Date (optional)">

        <div class="gallerydate"><span class="gal-date-slug"><perch:content id="galdate" type="text" label="Date" help="Enter the event/photo date"></span></div>

    </perch:block>

    <perch:block type="galleryitem" label="Gallery Image">

        <figure itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
            <a href="<perch:content id="image_gal1" type="image" label="Gallery Image" width="1000px" height="667px">" itemprop="contentUrl" data-size="1000x667" data-index="0">
            <perch:content id="image_gal1" type="image" label="Gallery image" width="112px" height="112px suppress>
            <img src="<perch:content id="image_gal1" type="image" label="Gallery Image" width="112px" height="112px" crop>" alt="<perch:content id="alt" type="text" label="Alt Text">">
            <perch:content id="image_gal1" type="image" label="Gallery image" width="1000px" height="667px" suppress>
            </a>
            <figcaption itemprop="caption description"><perch:content id="galtext" type="text" label="Image Caption" help="Enter an optional caption"></figcaption>
        </figure>

    </perch:block>

</perch:blocks>

This is the output html:

<!-- GALLERY THUMBNAILS -->
<div class="picture gallery-thumbs" itemscope itemtype="https://schema.org/ImageGallery">
        <div class="gallerydate"><span class="gal-date-slug">May 30, 2018</span></div>  
        <figure itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
            <a href="/perch/resources/image1-1-w1000pxh667px.jpg" itemprop="contentUrl" data-size="1000x667" data-index="0">
            <img src="/perch/resources/image1-1-w112pxh112px.jpg" alt="">
            </a>
            <figcaption itemprop="caption description">Caption text.</figcaption>
        </figure> 
        <figure itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
            <a href="/perch/resources/image2-2-w1000pxh667px.jpg" itemprop="contentUrl" data-size="1000x667" data-index="0">
            <img src="/perch/resources/image2-2-w112pxh112px.jpg" alt="">
            </a>
            <figcaption itemprop="caption description">Caption text.</figcaption>
        </figure>
        [etc...]
</div>

Note, the data-index="0" in all images. Can this be input with the image upload via Perch?

Hi Kyle

I would use repeaters rather than blocks and then use <perch:content id="perch_item_zero_index"> to count through the items in the javascript array.

Jon