Forum

Thread tagged as: Question

Perch blocks - gallery with thumbnails?

I am trying to create a gallery with thumbnails. Throughout the site I use this feature but using perch_content_custom to output the thumbnails in the page. For a new region / template within the site I need to enable the user to add multiple images to show the large image but also output the thumbnails underneath. I'm a bit stuck here and could use some assistance.

My template for the large images is:

<perch:before>
                <ul id="gallery" class="list-unstyled">
                </perch:before>
                  <li>
                    <a href="#slide<perch:content id="perch_item_index" type="hidden" />">
                      <img src="<perch:content id="slideImage" type="image" width="1000" label="Image" />" alt="<perch:content id="slideAlt" type="text" label="Image Description" size="xl" title="true" />">
                    </a>
                  </li>
                  <perch:content id="slideImage" type="image" suppress="true" width="200" label="Image" />
                <perch:after>
                </ul>
                </perch:after>

For the thumbnails the template is:

<perch:before>
                <div class="thumb-box">
                    <ul class="thumbs list-unstyled">
                    </perch:before>
                      <li><a href="#<perch:content id="perch_item_index" />" data-slide="<perch:content id="perch_item_index" />"><img src="<perch:content id="slideImage" type="image" width="200" label="Image" />" alt="<perch:content id="slideAlt" type="text" label="Image Description" size="xl" title="true" />"></a></li>
                    <perch:after>
                    </ul>
                </div>
                </perch:after>

So what I want is for the user to be able to select multiple images but for the thumbnails for their selections to be outputted below.

Any suggestions for this would be amazing!
Ben Stillwell

Ben Stillwell 1 points

  • 4 years ago
Ben Stillwell

Ben Stillwell 1 points
Registered Developer

4 years ago

An update:

So I can get the large images to display but I am having trouble with the thumbnails. For the main images I have the following code which works well:

<perch:blocks>
      <perch:block type="image" label="Image">
        <perch:before>
                <ul id="gallery" class="list-unstyled">
                </perch:before>
                  <li>
                    <a href="#slide<perch:content id="perch_item_index" type="hidden" />">
                      <img src="<perch:content id="slideImage" type="image" width="1000" label="Image" />" alt="<perch:content id="slideAlt" type="text" label="Image Description" size="xl" title="true" />">
                    </a>
                  </li>
                  <perch:content id="slideImage" type="image" suppress="true" width="200" label="Image" />
                <perch:after>
                </ul>
                </perch:after>
      </perch:block>
    </perch:blocks>

After the closing </ul> I need to take the values from the block item and list them as thumbnails. My template for this is:

<perch:before>
                <div class="thumb-box">
                    <ul class="thumbs list-unstyled">
                    </perch:before>
                      <li><a href="#<perch:content id="perch_item_index" type="hidden" />" data-slide="<perch:content id="perch_item_index" type="hidden" />"><img src="<perch:content id="slideImage" type="image" width="200" label="Image" />" alt="<perch:content id="slideAlt" type="text" label="Image Description" size="xl" title="true" />"></a></li>
                    <perch:after>
                    </ul>
                </div>
                </perch:after>

I think I need to use 'scope-parent' or layout the feature differently. I've tried quite a few options but everything has failed thus far.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Are you looking to redisplay the blocks?
Ben Stillwell

Ben Stillwell 1 points
Registered Developer

4 years ago

Yes. In the block the user can select an image and add a description. The image is also re-sized to 200px wide. These images are displayed in a list.

Underneath this list I need to output the thumbnails (200px image) using the template shown above in previous post.

Whenever I try and do this using parent-scope="true" I seem to output the thumbnails in the wrong place or simply something odd happens.

I've never done this before as have always used perch_content_custom in pages to achieve. For this particular page I require this functionality to work within the template.

Large images work fine. It's just getting the thumbnails to show below that I am struggling with.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I think you just need to repeat the blocks. You can't use block content outside the scope of a block.