Gallery album link

128 Posts

evegate94 Reply #1, 10 years, 8 months ago

I have my gallery call which is working

<ul>
[[!GalleryAlbums?
    &rowTpl=`gallery_thumb`
    &limit=`3`
  ]] 
</ul>

And my gallery_thumb

<li>
<a href=""> <img src="[[+image]]" width="200" height="150" alt="[[+name]]"></a>
<h4>[[+name]]</h4>
<p>[[+description]]</p>
</li>

But I can't work out what to put in the href to get it to link to the gallery album, I've tried [[~[[*id]]]]
Whatever I try just stays on the same page.

436 Posts

Dan Reply #2, 10 years, 8 months ago

Have you tried it with

[[~[[*id]]]]?[[+albumRequestVar]]=[[+id]]

?

128 Posts

evegate94 Reply #3, 10 years, 8 months ago

That takes it to ?galAlbum=2 which I assume is the correct album but the page is still on the home page. How do I get it to go to it's own template?

436 Posts

Dan Reply #4, 10 years, 8 months ago

Actually, the old docs list the correct syntax as both:

[[~[[*id]]?&[[+albumRequestVar]]=`[[+id]]`]]

http://oldrtfm.modx.com/display/ADDON/Gallery.GalleryAlbums.rowTpl

and

[[~[[*id]]&galAlbum=`[[+gallery.id]]`]]

http://oldrtfm.modx.com/display/ADDON/Gallery.Setting+Up+Your+Gallery

Confusing..... I've used Gallery numerous times but have never actually used a gallery selection page as such so I can't comment on which one is definitely the correct method. [ed. note: absent42 last edited this post 10 years, 8 months ago.]

128 Posts

evegate94 Reply #5, 10 years, 8 months ago

Afraid those didm't work. I have gallery page which shows the albums and then shows the images from that album below when clicked:

<h3>Albums</h3>
<span><a href="news.html">View More Featured</a></span>
<ul>
[[!GalleryAlbums?
    &rowTpl=`gallery_thumb` 
  ]] 
</ul>
</div>
<div>
[[!Gallery? &album=`1` &toPlaceholder=`gallery`]]
<h2><a href="[[~[[*id]] &galAlbum=`[[+gallery.id]]`]]">[[+gallery.name]]</a></h2>
<p>[[+gallery.description]]</p>
[[+gallery]]
</div>
<div class="galImage">
[[!GalleryItem]]
[[!+galitem.image:notempty=`
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" style="width:100%"/></a>
`]]
</div>

But I want to feature the latest albums on the home page which is where the following code comes in but can't get it to link to the actual album.

<ul>
[[!GalleryAlbums?
    &rowTpl=`gallery_thumb`
    &limit=`3`
  ]] 
</ul>

gallery_thumb

<li>
<a href="[[~[[*id]]&galAlbum=`[[+gallery.id]]`]]"> <img src="[[+image]]" width="200" height="150" alt="[[+name]]"></a>
<h4>[[+name]]</h4>
<p>[[+description]]</p>
</li>

I'm thinking somewhere I have to tell the call a template to use. Basically I want it to go the gallery page and show the album selected.

436 Posts

Dan Reply #6, 10 years, 8 months ago

Ah right I understand a little better at what you're trying to do, at a guess..... with MODX *id always references the current page, so in your case it will reference the homepage, not a gallery page.

I would suggest setting up a new gallery page resource with the correct templating then on homepage galleryrow tpl replacing [[*id]] with a reference to the new page ID so it would be something like:

[[~123]]?galAlbum=[[+gallery.id]]

where 123 is the new gallery page resource ID, or the ID of a resource you may already have set up to display the contents of a gallery. [ed. note: absent42 last edited this post 10 years, 8 months ago.]

128 Posts

evegate94 Reply #7, 10 years, 8 months ago

Thanks, nearly there!

That sends me to the new page but how do I change my gallery to show the selected album? I would still like the albums to show as options but the gallery underneath to display the selected album from the home page.

<div class="body home">
<div>

<div>

<div>


<h3>Albums</h3>
<span><a href="news.html">View More Featured</a></span>
<ul>
[[!GalleryAlbums?
    &rowTpl=`gallery_thumb` 
  ]] 
</ul>
</div>
<div>
[[!Gallery? &album=`1` &toPlaceholder=`gallery`]]
<h2><a href="[[~[[*id]] &galAlbum=`[[+gallery.id]]`]]">[[+gallery.name]]</a></h2>
<p>[[+gallery.description]]</p>
[[+gallery]]
</div>
<div class="galImage">
[[!GalleryItem]]
[[!+galitem.image:notempty=`
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" style="width:100%"/></a>
`]]
</div>


</div>
</div>
<div class="sidebar">

[[$Sidebar]]

</div>
</div>

128 Posts

evegate94 Reply #8, 10 years, 8 months ago

Also, as you seem to know your stuff Dan, is there a way to get the large image to show without the screen reloading to the top of the page. I scroll down to the images but everytime I click on the thumbnail to display the larger the page goes to the top and i have to scroll down again to the large image. Would be nice for the image to just load. Could just be the way I've decided to handle the gallery is perhaps not ideal?

436 Posts

Dan Reply #9, 10 years, 8 months ago

The GalleryItem section in <div class="galImage"> to display a gallery image whilst still on the homepage from a click on the GalleryAlbums call?

If I understand correctly that would require some jQuery/AJAX.

Gallery does come with a plugin for Galleriffic http://rtfm.modx.com/extras/revo/gallery/gallery.plugins/gallery.plugins.galleriffic but I've always gone with thirdparty scripts for such purposes.

Most of the time I use Fancybox: http://fancyapps.com/fancybox/

Edit: But there's shed loads of pre-made jQuery scripts that can handle image thumbnail placement and lightboxes etc, due to the nature of MODX they're all pretty easy to integrate. Find one that suits your particular purpose.
[ed. note: absent42 last edited this post 10 years, 8 months ago.]