Answered Outputting Gallery Items

Hello, I have managed to make a gallery page which references the gallery plugin, and outputs a list of all of my photo albums into nice, clean rows, displaying a thumbnail from each album. When you click on one of these images, I would like to make it so that when you select an album, it brings you to a separate page which then displays all of the photos from that album.

Following this tutorial: https://www.sitsol.be/blog/modx-gallery-albums/

I have successfully created an album listing page, and then have it link to a secondary page which shows all the corresponding photos from the album selected, but I cannot apply my custom HTML template to the photos on the secondary page. If I leave it barebones, it works without a hitch, but I would like to make it look almost identical to the prior page.


My HTML is broken into sections, with the "portfolio" section being how I display the rows of items.

<!-- PORTFOLIO -->
<section class="portfolio port-wrap padding-top-80 padding-bottom-80">
<!-- Work Filter -->
<ul class="tabs portfolio-filter text-center margin-bottom-80">
<li class="tab-title filter-item"><a class="active" href="#." data-filter="*">ALL</a></li>
<li class="tab-title filter-item"><a href="#." data-filter=".pf-branding-design">Branding Design</a></li>
<li class="tab-title filter-item"><a href="#." data-filter=".pf-photography">Photography</a></li>
<li class="tab-title filter-item"><a href="#." data-filter=".pf-web-design">Web Design</a></li>
<li class="tab-title filter-item"><a href="#." data-filter=".pf-digital-art">Animation</a></li>
</ul>

<!-- PORTFOLIO ITEMS -->

<div class="container">
<div class="items item-space row col-3">

This is essentially the heading of the main content, which then takes the following chunk:

<!-- ITEM -->
<article class="portfolio-item pf-web-design pf-branding-design">
<div class="portfolio-image"> <a href="[[~22]]?[[+albumRequestVar]]"> <img class="img-responsive" alt="Open Imagination" src="[[+image]]&w=320&h=240&zc=1"> </a>
<div class="portfolio-overlay style-4">
<div class="detail-info">
<div class="position-center-center">
<h3 class="no-margin">[[+name]]</h3>
<hr class="balck">
<span><a href="[[~22]]?[[+albumRequestVar]]=[[+id]]">VIEW ALBUM</a></span>
</div>
</div>
</div>
</div>
</article>

And uses it to create rows of thumbnails. It ends up looking like this:


This is working perfectly for displaying the albums, but not for displaying the items on the second page.

The following is the HTML call to the gallery snippet, on the secondary page, which should be displaying all of the photos from the album.

[[!Gallery? &toPlaceholder=`gallery` &thumbTpl=`rowTpl2` &thumbWidth=`200` &thumbHeight=`160` &thumbQuality=`80`]]
<div class="row">
<div class="text-title">
<h3>[[*longtitle]]</h3>
<div><h4>[[+gallery.description]]</h4></div>
<a href="[[~[[*parent]]]]"><button type="button" class="btn">back to overview</button></a>
</div>
<div class="css-wrapper">
[[+gallery]]
</div>
</div>

I have tried changing the template in the &thumbtpl line, so I am not simply just overlooking that.

And finally, here is the chunk for the secondary page which the above html should be referencing.

<!-- ITEM -->
<article class="portfolio-item pf-web-design">
<div class="portfolio-image"> <a href="[[+image_absolute]]" rel="prettyphoto[pp_gal]> <img class="img-responsive" alt="Open Imagination" src="[[+thumbnail]]"> </a>
<div class="portfolio-overlay style-4">
<div class="detail-info">
<div class="position-center-center">
<a href="[[+image_absolute]] rel="prettyphoto[pp_gal]"><h3 class="no-margin">VIEW FULL SIZE</h3></a>
<hr class="balck">
</div>
</div>
</div>
</div>
</article>

Could anyone tell me why this is not working? I feel as if I am just missing something that's simple. Thank you very much in advance!

Thank you for introducing me to moreGallery! It works like a charm!

No problem. It's one of those extras that is a pleasure to work with