Gallery nested albums

Hi, all!

Has anyone a decision how to show gallery with nested albums?
For example, there is some albums without images inside but they contain other sub-albums with images.
It’s a very simple purpose - to output albums and images as “step by step”: Main album - Sub-albums - Images in selected sub-album. And it would be very good if breadcrumbs links are supported, to return to previous or main album.

I think it very popular task at most of the sites, but I haven’t find an easy way to do this with Gallery component. Standard use of Gallery show only images inside album but not sub-albums.
Or if you can advice some useful another component for MODX revolution to resovle same problem.

Thank you!

I believe the property &checkForRequestAlbumVar can be used to only show the sub-albums of the current album.

[[!GalleryAlbums? 
    &prominentOnly=`0`
    &checkForRequestAlbumVar=`1`
    &showAll=`0`
]]

Unfortunately there seems to be a bug in the code. (The request-parameter is not included in the cache-key).

Therefore you have to make the following changes to the code. (Be sure to make a backup copy first.)

Delete these 4 lines

and then add these similar lines at the start of the getList function (line 405/406).

public static function getList(modX &$modx,array $scriptProperties = array()) {

        // THE NEW LINES
        if ($modx->getOption('checkForRequestAlbumVar',$scriptProperties,false)) {
            $albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
            if (!empty($_REQUEST[$albumRequestVar])) $scriptProperties['parent'] = $_REQUEST[$albumRequestVar];
        }

        // EXISTING CODE
        $cacheKey = 'gallery/album/list/'.md5(serialize($scriptProperties));`
        ...
1 Like

Here is some code to create breadcrumbs for your album tree. It’s based on the snippet “GalleryAlbums”.

Create a snippet GalleryCrumbs

<?php
$gallery = $modx->getService('gallery','Gallery',$modx->getOption('gallery.core_path',null,$modx->getOption('core_path').'components/gallery/').'model/gallery/',$scriptProperties);
if (!($gallery instanceof Gallery)) return '';

/* setup default properties */
$rowTpl = $modx->getOption('rowTpl',$scriptProperties,'galAlbumRowTpl');
$rowCls = $modx->getOption('rowCls',$scriptProperties,'');
$toPlaceholder = $modx->getOption('toPlaceholder',$scriptProperties,false);
$showName = $modx->getOption('showName',$scriptProperties,true);

$scriptProperties['showAll'] = true;
$scriptProperties['prominentOnly'] = false;
$scriptProperties['checkForRequestAlbumVar'] = false;
$scriptProperties['limit'] = 0;
$scriptProperties['start'] = 0;

/* query all active albums */
$albums = $modx->call('galAlbum','getList',array(&$modx,$scriptProperties));

/* read id of current album from $_REQUEST */
$albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
$current_album = 0;
if (isset($_REQUEST[$albumRequestVar]) && !empty($_REQUEST[$albumRequestVar])){
    $current_album = intval($_REQUEST[$albumRequestVar]);
}

/* iterate */
$output = array();
$albums_lookup = array();
foreach ($albums as $album) {
    $albumArray = $album->toArray();
    $albums_lookup[$albumArray['id']] = $albumArray;
}

$root_reached = false;
$search_id = $current_album;
while (!$root_reached) {
    $found = false;
    if (array_key_exists($search_id, $albums_lookup)) {
        $albumArray = $albums_lookup[$search_id];
        
        $classes = array($rowCls);
        if ($current_album == $albumArray['id']) {
            $classes[] = 'gallery-crumb-current';
        }
        
        $albumArray['cls'] = implode(' ', $classes);
        $albumArray['showName'] = $showName;
        $albumArray['albumRequestVar'] = $albumRequestVar;
        $output[] = $gallery->getChunk($rowTpl,$albumArray);
        
        $found = true;
        $search_id = $albumArray['parent'];
    }
    if (!$found || $search_id == 0){
        $root_reached = true;
    }
}

/* Show a 'Home' Crumb */
$showHomeCrumb = $modx->getOption('showHomeCrumb',$scriptProperties,true);
$homeCrumbTpl = $modx->getOption('homeCrumbTpl',$scriptProperties,'');
if ($showHomeCrumb && $homeCrumbTpl){
    $albumArray = array();
    $classes = array($rowCls);
    $classes[] = 'gallery-crumb-home';
    
    $albumArray['cls'] = implode(' ', $classes);
    $output[] = $gallery->getChunk($homeCrumbTpl,$albumArray);
}

$output = array_reverse($output);

/* set output to placeholder or return */
$outputSeparator = $modx->getOption('outputSeparator',$scriptProperties," &gt; ");
$output = implode($outputSeparator,$output);

if ($toPlaceholder) {
    $modx->setPlaceholder($toPlaceholder,$output);
    return '';
}
return $output;

then call it (uncached) with

[[!GalleryCrumbs]]

or

[[!GalleryCrumbs?
    &showHomeCrumb=`1`
    &homeCrumbTpl=`galHomeCrumbTpl`
    &rowTpl=`galCrumbTpl`
    &rowCls=`my-crumb-class`
    &outputSeparator=` - `
]]

Chunk galHomeCrumbTpl

<span[[+cls:notempty=` class="[[+cls]]"`]]><a href="[[~[[*id]]]]">All albums</a></span>

Chunk galCrumbTpl

<span[[+cls:notempty=` class="[[+cls]]"`]]><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+showName:notempty=`[[+name]]`]]</a></span>

This code isn’t thoroughly tested and probably contains some bugs.

1 Like

halftrainedharry, Thank you very much! Breadcrumbs are working well! As about displaying nested albums - unfortunately they don’t show albums inside. I’ve edited a code in “galalbum.class.php” as you suggested. By the way, number of lines was some different in my version (MODX is 2.8.3, Gallery is 1.7.1).
If album contents photos - they displayed OK, but if it contain other albums - it is empty…
You can see it by navigating on breadcrumbs at the page: http://test-site.uxp.ru/photo-video. And also at that home page - parent-albums shown without content.

I create gallery page by code:

[[!GalleryAlbums? 
    &toPlaceholder=`GalleryAlbums` 
    &rowTpl=`MyAlbums`
    &limit=`0`
    &prominentOnly=`0`
    &checkForRequestAlbumVar=`1`
    showAll=`0`
]]
[[!Gallery? 
    &toPlaceholder=`Gallery` 
    &containerTpl=`MyAlbumRow`
    &thumbTpl=`MyAlbumThumb`
]]
[[!If? 
&subject=`[[+Gallery]]` 
&operator=`isempty` 
&then=`[[+GalleryAlbums]]`
]]
<div class="gallery-crumbs">
[[!GalleryCrumbs?
    &showHomeCrumb=`1`
    &homeCrumbTpl=`galHomeCrumbTpl`
    &rowTpl=`galCrumbTpl`
    &rowCls=`my-crumb-class`
    &outputSeparator=` <i class="fas fa-chevron-right"></i> `
    &toPlaceholder=`GalleryCrumbs`
]]
[[+GalleryCrumbs]]
</div>
[[+Gallery]]
<div class="gallery-crumbs">
[[+GalleryCrumbs]]
</div>

Chunk “MyAlbumRow”:

<h4>[[+album_name]]</h4>
<p>[[+album_description]]</p>
[[+thumbnails]]

Chunk “MyAlbums”:

<div class="col-md-3 col-6">
	<div class="gallery-album">
		<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">
		<div class="gallery-album-img"><img src="[[+image_absolute:pthumb=`w=416&h=300&zc=1`]]" alt="[[+name]]" title="[[+name]]"></div></a>
		<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><div class="gallery-album-title">[[+name]]</div></a>
	</div>
</div>

Chunk “MyAlbumThumb”:

<div class="photo-tpl col-md-3 col-6">
<a data-fancybox="gallery" rel="gallery" class="fancybox" data-caption="[[+name]]" href="[[+image_absolute:pthumb=`w=1280&h=720&zc=1`]]" title="[[+name]]" [[+link_attributes]] >
	<img src="[[+image_absolute:pthumb=`w=416&h=300&zc=1`]]" alt="[[+name]]" />
</a>
</div>

All OK, except display of albums that contains other albums…

Would be grateful if you could help me again.
Thanks!

Why do you use an If here? I think you always have to output [[+GalleryAlbums]] to see the nested albums.

If I remove this condition - albums are not opening at all, unfortunately. ((( What can be the reason? That chunk without “if” is on the test-site at the moment.

Here is code:

[[!GalleryAlbums? 
    &toPlaceholder=`GalleryAlbums` 
    &rowTpl=`MyAlbums`
    &limit=`0`
    &prominentOnly=`0`
    &checkForRequestAlbumVar=`1`
    showAll=`0`
]]
[[!Gallery? 
    &toPlaceholder=`Gallery` 
    &containerTpl=`MyAlbumRow`
    &thumbTpl=`MyAlbumThumb`
]]
[[+GalleryAlbums]]
<div class="gallery-crumbs">
[[!GalleryCrumbs?
    &showHomeCrumb=`1`
    &homeCrumbTpl=`galHomeCrumbTpl`
    &rowTpl=`galCrumbTpl`
    &rowCls=`my-crumb-class`
    &outputSeparator=` <i class="fas fa-chevron-right"></i> `
    &toPlaceholder=`GalleryCrumbs`
]]
[[+GalleryCrumbs]]
</div>
[[+Gallery]]
<div class="gallery-crumbs mt-4">
[[+GalleryCrumbs]]
</div>

maybe, you need to call the placeholder uncached, since your snippet-call is uncached, too

[[!+GalleryAlbums]]

1 Like

Not sure, why you are using the &toPlaceholder property at all.

The property showAll in your call to GalleryAlbums is missing the & at the beginning.

It should work when you add it:

[[!GalleryAlbums? 
    ...
    &showAll=`0`
]]
1 Like

Thanks for your answers!

I used an “IF” condition and “&toPlaceholder” property to
hide album icons when album is opened and shown photos in it. I’d like to use breadcrumbs instead of album links.

But even if I use only simple call of snippets, it doesn’t displayed albums inside other albums… Displaying of images is seems working well…

I’ve attached a screenshot of Gallery structure. For example, now I trying to show album 16 and other nested albums.

Recource code:

[[!GalleryAlbums? 
    &rowTpl=`MyAlbums`
    &limit=`0`
    &prominentOnly=`0`
    &checkForRequestAlbumVar=`1`
    &showAll=`0`
    &parent=`16`
]]
[[!Gallery? 
    &containerTpl=`MyAlbumRow`
    &thumbTpl=`MyAlbumThumb`
]]

Page is the same (as in a post above)

Thank you beforehand!

When I test it with your code on my installation it works.

It kind of looks like that the changes you made to /core/components/gallery/model/gallery/galalbum.class.php don’t take effect at all.


Maybe you can (temporarily) add some additional lines to log messages, so that you can check the error log to see what’s going on.

public static function getList(modX &$modx,array $scriptProperties = array()) {

        // THE NEW LINES
		$modx->log(modX::LOG_LEVEL_ERROR,'function getList() called. parent is ' . $scriptProperties['parent']); //Write a message to the error log
        if ($modx->getOption('checkForRequestAlbumVar',$scriptProperties,false)) {
            $albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
            if (!empty($_REQUEST[$albumRequestVar])) $scriptProperties['parent'] = $_REQUEST[$albumRequestVar];
            if (!empty($_REQUEST[$albumRequestVar])) $modx->log(modX::LOG_LEVEL_ERROR,'parent changed to ' . $_REQUEST[$albumRequestVar]); //Write a message to the error log
        }

        // EXISTING CODE
        $cacheKey = 'gallery/album/list/'.md5(serialize($scriptProperties));`
        ...

Sorry for response delay and thank you very much for help!
Really, it seems that I had an incorrect PHP code in “galalbum.class.php”.

There is only one unsolved question I have:

If an album contains only other nested album but not images - it displayed on page without cover picture.
Cover images have loaded to these albums. Also I’ve tried to load a cover image inside this album, but it isn’t displayed.
How to make them show a thumbnail?

Thanks.

What exactly is your setup?

  • Do you use the row template “galAlbumRowWithCoverTpl” or a row template with the placeholder [[+image]]?
[[!GalleryAlbums? 
    ...
    &rowTpl=`galAlbumRowWithCoverTpl`
]]
  • When you look at the source code of the page, do you see the <img>-tag for the cover image?
  • If there is an <img>-tag, what is the value of the “src”-attribute? Is the path to the image correct (get-parameter “src”)?
1 Like

Thanks for the tip!
The SRC path was incorrect:

img src="[[+image_absolute:pthumb=`w=416&h=300&zc=1`]]"

When I replace it to:

img src="[[+image:pthumb=`w=416&h=300&zc=1`]]"

Images had been displayed, but pthumb didn’t working.

So, I removed “pthumb” modification and set thumbWidth and thumbHeight properties in “GalleryAlbums” snippet:

[[!GalleryAlbums? 
    &rowTpl=`MyAlbums`
    &albumCoverSort=`rank`
    &limit=`0`
    &prominentOnly=`0`
    &checkForRequestAlbumVar=`1`
    &showAll=`0`
    &parent=`16`
    &thumbWidth=`416`
    &thumbHeight=`300`
]]

It seems working OK!
halftrainedharry, thank you for help!

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.