Custom slideshow - any way to get an array of album image properties from Gallery?

I am trying to create a series of JQuery slideshows to be run in the same page. My intention is that a I will have a series of buttons each referring to an album, and when the user clicks a button a modal overlay plays a slideshow of the images in that album in a particular order.

I also want to have some way of managing the albums so a non-geek friend can manage the images in each album without having to do any coding, or ftp uploads, or anything even remotely technical.

I have tried using Gallery for its album management capabilities, but I don't want to display any thumbnails.

Instead, I would like to find some way to extract image information (filename, caption, description, sort order) from each album, which could then be passed to a JQuery slideshow on demand. I have hunted through the Gallery documentation but I can't see any way to extract that information from Gallery.

Is there some way to get this information out of Gallery, or is there some other Add-on or approach that will achieve the same end result?

Thanks

The galItemThumb tpl can be modified to output any kind of structure you want. Just because it says "thumb" it doesn't have to be little images; you can set the "thumbnail" size to be anything you want. Or don't use the [[+thumbnail]] placeholder at all.

See http://forums.modx.com/thread/81622/gallery-and-ad-gallery#dis-post-450297 for an example of customizing Gallery for a different JQuery gallery plugin.

I ended up digging through the Gallery snippets and the GalleryItemPagination example on rtfm.modx.com and created a new snippet.

This returns a PHP array containing a subarray for each album with the relevant album information. Each album subarray in turn contains nested arrays with all of the information I need for each image in the album.

I'm a complete newbie with ModX so there may be a better way of doing this, but it works and I can now use PHP to create whatever output I may need for a particular slideshow.

This is the resulting snippet:

<?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 '';

$albums = $modx->call('galAlbum','getList',array(&$modx,$scriptProperties));

$output = array();

foreach ($albums as $album)
{
$albumArray = $album->toArray();

$output[] = array('id' => $albumArray['id'],
'name' => $albumArray['name'],
'description' => $albumArray['description']);
}

/* I don't know if this is the correct way to do this - I'm just copying the method in the Pagination example here */
$modx->addPackage('gallery',$modx->getOption('gallery.core_path',null,$modx->getOption('core_path').'components/gallery/').'model/');

foreach ($output as $key => $alb_arr)
{

$c = $modx->newQuery('galAlbumItem');
$c->innerJoin('galItem','Item');
$c->where(
array(
'album' => $alb_arr['id'],
)
);
$c->select(
array(
'galAlbumItem.*',
'Item.*',
)
);

$c->sortby('rank','asc');

$collection = $modx->getCollection('galAlbumItem',$c);

//$items = array();
$images = array();

foreach ($collection as $i)
{
// $items[] = $i->toArray(); /* return $items to see all array key/value pairs for each image */

$item = $i->toArray();

$images[] = array('id' => $item['id'],
'rank' => $item['rank'],
'name' => $item['name'],
'path' => $item['filename'], /* relative to the '/assets/gallery' directory */
'description' => $item['description']);

}

$output[$key]['images'] = $images;

}

if (!function_exists('albsort'))
{
function albsort($a, $b)
{
return (($a['id'] < $b['id']) ? -1 : 1); /* sort albums by album id */
}
}

uasort($output, 'albsort'); // sort the albums by user function 'albsort'

/*return $output; // for returning the array to another snippet */

return '<pre>'.print_r($output, true).'</pre>'; // for viewing the output array [ed. note: philstix last edited this post 11 years, 3 months ago.]

You could do the same thing with the default gallery snippet. Just use a thumbTpl to generate the structure you want. That's why proper MODx snippets use mini-templates (tpls), putting all the data retrieved into placeholders so you can arrange them in any way you please in your customized tpl.

You can see the available placeholders for the thumbTpl here http://rtfm.modx.com/display/ADDON/Gallery.Gallery.thumbTpl

The way to do that is to take a hard look at one of the individual items in your chosen javascript's list of items in its demo code. Use that as the base for your tpl, replacing the actual content with the appropriate placeholders. Then just replace the block of items with the snippet call, just as you would replace the unordered list of a menu with a Wayfinder snippet.

@sottwell,

Thanks for the replies. I had a look at the placeholders you mentioned, and I can see they could hold the values for a single image, but how could I use templates to get an array containing the data for every image in an album? I don't want the image data embedded in the page - I just want the image information to pass to the JQuery slideshow, and the one that seems most suitable for me takes an array of image information (url, caption and description for each image). Unfortunately I still haven't got my head around ModX syntax so I may be missing something obvious.

What is the HTML structure your slideshow expects? Use a single image's container in the slideshow to provide the HTML for your tpl, replacing the stuff that changed for each image with the placeholder.

The thumbTpl is applied to each image, looping over the set of images in the album, so you might have something like

to get a list of the image names, if that's all you wanted.

@sottwell,

There is no HTML associated with the images. The slideshow is started using a JQuery function call that includes javascript arrays of image information. That is why I need the gallery image data as an array - either a PHP array so I can generate the javascript code, or a way of parsing the ModX output directly into a JQuery function call - bearing in mind that there is some string manipulation required to create correct javascript/JQuery calls.

The only HTML is a span element for each album, each of which has an onclick event handler that calls the function to start the slideshow for that album. And that is why I had difficulty with the template approach - I couldn't see a way of getting the image data without a HTML structure. But as I said, I'm new to ModX so I could be overlooking something obvious.

Anyway, I've got it working although I have had to generate the javascript code in the snippet and then output that to the web page. [ed. note: philstix last edited this post 11 years, 3 months ago.]