Forum

Thread tagged as: Question, Problem, Discussion

Perch tags in an image galley with thumb nails

It's been a while since I used perch so I'm having to basically relearn it for a new client. They want a image gallery with thumbnail images that they click on and then that shows the larger version above the thumbnails. I have this code below and was just wondering do I have to repeat the same perch tag were the <a href=""> is?

This is the original mark up section I need to add perch tags:

<div class="xb-showtime_slidereel">
<div class="xb-showtime_outer">
<div class="xb-showtime_inner">
<ul class="xb-showtime_thumbs">

<li>
<a href="Resources/DeathtoStock_Wired5.jpg" data-width="200" data-height="133">
<img src="Resources/DeathtoStock_Wired5_thumb.jpg">
</a>
</li>

</ul>
</div>
</div>
</div>
</span></p>
</div>

This is my amended mark up so far (wasn't sure what to replace the <a href=""> with?)

<div class="xb-showtime_slidereel">
<div class="xb-showtime_outer">
<div class="xb-showtime_inner">
<ul class="xb-showtime_thumbs">

<li>
<a href="Resources/DeathtoStock_Wired5.jpg" data-width="200" data-height="133">
<img src="<perch:content id="image" type="image" label="product Image" help="Text for help if needed" width="200">
</a>
</li>

</ul>
</div>
</div>
</div>
</span></p>
</div>

Any help with this would be greta thanks!
Michael Davies

Michael Davies 0 points

  • 6 years ago
Robert Ketter

Robert Ketter 103 points

6 years ago

This is my amended mark up so far (wasn't sure what to replace the <a href=""> with?)

<div class="xb-showtime_slidereel"> <div class="xb-showtime_outer"> <div class="xb-showtime_inner"> <ul class="xb-showtime_thumbs">

<li>
<a href="<perch:content id="image" type="image" label="Product Image" help="This is Full-size Image" />" data-width="200" data-height="133"><img src="<perch:content id="image" type="image" label="Product Image" help="This is 200px Image (thumbnail)" width="200" />" /></a> 
</li>

</ul> </div> </div> </div> </span></p> </div>

If you want to have a thumbnail point to actual fullsize, then you href the full size and show the thumbnail. In perch you can reuse the ID of an image field to make additional sizes of the image. Just remember if you plan to use these images in another template you need to use the same tag as original template to show additional sizes otherwise it will output fullsize image.

Hope this helps

Robert Ketter

EDIT: Code has been edited, I made a mistake in original, but the above has now been corrected and tested. It works perfectly.

RK
Michael Davies

Michael Davies 0 points

6 years ago

Great thanks for your help Robert!

Will have a look at this tomorrow and get the rest of the website done to se if I can get it all working.

Cheers

Mickey Davies
Michael Davies

Michael Davies 0 points

6 years ago

Hi Rk,

Thanks for the updated code, I think I need to show you more of the code as the code for the full size image was above, I have dropped in the code you sent where I think it should be is this correct? I will apologise for my lack of knowledge on this! Any more help would be so helpful! Cheers Mickey (see code below)

<p class="BigTitle"><a id="gallery"><img id="m4" class="f-ms" src="Resources/master.gif" alt=""></a>Gallery</p> <p class="BigSubtitle">See Some Photos</p> <div id="ShowcaseWrapper" class="f-cf f-ms"><div id="item1"><div class="xb-showtime_slideshow"> <div class="xb-showtime_main"> <div class="xb-showtime_image"> <img src="Resources/1717.jpg"> </div> </div> </div> <div class="xb-showtime_slidereel"> <div class="xb-showtime_outer"> <div class="xb-showtime_inner"> <ul class="xb-showtime_thumbs"> <li> <a href="<perch:content id="image" type="image" label="Product Image" help="This is Full-size Image" />" data-width="200" data-height="133"><img src="<perch:content id="image" type="image" label="Product Image" help="This is 200px Image (thumbnail)" width="200" />" /></a> </li> </ul> </div> </div> </div> </div> </div>
Robert Ketter

Robert Ketter 103 points

6 years ago

I should be home in a couple hours and I can look at the code then
Michael Davies

Michael Davies 0 points

6 years ago

Thats great thanks, just when ever you can.
Robert Ketter

Robert Ketter 103 points

6 years ago

I think this is what you want...

<p class="BigTitle"><a id="gallery"><img id="m4" class="f-ms" src="Resources/master.gif" alt="" /><!-- guessing this is like header image? --></a>Gallery</p> 
<p class="BigSubtitle">See Some Photos</p> 
<div id="ShowcaseWrapper" class="f-cf f-ms">
    <div id="item1">
        <div class="xb-showtime_slideshow"> 
            <div class="xb-showtime_main"> 
                <div class="xb-showtime_image"> 
                    <img src="<perch:content id="image" type="image" label="Product Image" help="This is Full-size Image" />" /><!-- this would be a fullsize image, same as you upload. If you need resizing then you need to add sizes... -->
                </div> 
            </div> 
        </div> 
        <div class="xb-showtime_slidereel"> 
            <div class="xb-showtime_outer"> 
                <div class="xb-showtime_inner"> 
                    <ul class="xb-showtime_thumbs"> 
                        <li><a href="<perch:content id="image" type="image" label="Product Image" help="This is Full-size Link" />" data-width="200" data-height="133"><!-- this is a link to the fullsize image --><img src="<perch:content id="image" type="image" label="Product Image" help="This is 200px Image (thumbnail)" width="200" />" /><!-- this is the 200px thumbnail --></a></li> 
                    </ul> 
                </div> 
            </div> 
        </div> 
    </div> 
</div>
Michael Davies

Michael Davies 0 points

6 years ago

Thanks for this got it all working now!

Thanks again for your help.

Cheers Mickey