We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24059
    • 15 Posts
    Hi all, i’m new to ModX cms.. and i have a problem setting up my gallery for my portfolio site..
    i’m new to coding skills too, it’s just two weeks i’ve started learning html, css etc...

    This is what i want: Gallery web page -> inside an "album with thumb" that i can click -> after click, all the pictures of that album.

    This is the problem: albums don’t show... i can manage to load and show every picture in the album (and if i want, enlarge them too), but NOT the album himself...

    I’ve searched on the forum like a mad, read every post about gallery module, i’ve seen like only one or two persons asking for the same problem, but with no answer...

    This is my setup, after reading your tutorials cipa (i’ve seen you’re a member of the forum):

    DemoGalAlbumRowTpl Chunk

    <div class="albumPreview">
        <h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
        <div class="thumb">
            <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]" /></a>
        </div>
        <div class="desc">
            <p>[[+description]]</p>
            <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a>
        </div>
    </div>


    DemoGalItemThumb Chunk

    <div class="[[+cls]]">
        <a href="[[+image]]" rel="pirobox" title="[[+description]]">
        	<img data-href="[[+thumbnail]]" class="[[+imgCls]]" src="[[++base_url]]assets/templates/portfolio/images/loading_thumb.gif" alt="[[+name]]" width="195" height="140" />
        </a>
      [[+name]]
    </div>


    DemoGalleryAlbumTpl Chunk

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


    Gallery Snippet

    <?php
    /**
     * Gallery
     *
     * Copyright 2010 by Shaun McCormick <[email protected]>
     *
     * Gallery is free software; you can redistribute it and/or modify it under the
     * terms of the GNU General Public License as published by the Free Software
     * Foundation; either version 2 of the License, or (at your option) any later
     * version.
     *
     * Gallery is distributed in the hope that it will be useful, but WITHOUT ANY
     * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
     * A PARTICULAR PURPOSE. See the GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License along with
     * Gallery; if not, write to the Free Software Foundation, Inc., 59 Temple
     * Place, Suite 330, Boston, MA 02111-1307 USA
     *
     * @package gallery
     */
    /**
     * The main Gallery snippet.
     *
     * @package gallery
     */
    $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 */
    $album = $modx->getOption('album',$scriptProperties,false);
    $plugin = $modx->getOption('plugin',$scriptProperties,'');
    $tag = $modx->getOption('tag',$scriptProperties,'');
    $limit = $modx->getOption('limit',$scriptProperties,0);
    $start = $modx->getOption('start',$scriptProperties,0);
    $sort = $modx->getOption('sort',$scriptProperties,'rank');
    $sortAlias = $modx->getOption('sortAlias',$scriptProperties,'galItem');
    if ($sort == 'rank') $sortAlias = 'AlbumItems';
    $dir = $modx->getOption('dir',$scriptProperties,'ASC');
    $showInactive = $modx->getOption('showInactive',$scriptProperties,false);
    $linkToImage = $modx->getOption('linkToImage',$scriptProperties,false);
    $imageGetParam = $modx->getOption('imageGetParam',$scriptProperties,'galItem');
    $albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
    $tagRequestVar = $modx->getOption('tagRequestVar',$scriptProperties,'galTag');
    $itemCls = $modx->getOption('itemCls',$scriptProperties,'gal-item');
    
    /* check for REQUEST vars if property set */
    if ($modx->getOption('checkForRequestAlbumVar',$scriptProperties,true)) {
        if (!empty($_REQUEST[$albumRequestVar])) $album = $_REQUEST[$albumRequestVar];
    }
    if ($modx->getOption('checkForRequestTagVar',$scriptProperties,true)) {
        if (!empty($_REQUEST[$tagRequestVar])) $tag = $_REQUEST[$tagRequestVar];
    }
    if (empty($album) && empty($tag)) return '';
    
    /* build query */
    $tagc = $modx->newQuery('galTag');
    $tagc->setClassAlias('TagsJoin');
    $tagc->select('GROUP_CONCAT('.$modx->getSelectColumns('galTag','TagsJoin','',array('tag')).')');
    $tagc->where($modx->getSelectColumns('galTag','TagsJoin','',array('item')).' = '.$modx->getSelectColumns('galItem','galItem','',array('id')));
    $tagc->prepare();
    $tagSql = $tagc->toSql();
    
    $c = $modx->newQuery('galItem');
    $c->select(array('galItem.*'));
    $c->select('('.$tagSql.') AS `tags`');
    $c->innerJoin('galAlbumItem','AlbumItems');
    $c->innerJoin('galAlbum','Album',$modx->getSelectColumns('galAlbumItem','AlbumItems','',array('album')).' = '.$modx->getSelectColumns('galAlbum','Album','',array('id')));
    
    /* pull by album */
    if (!empty($album)) {
        $albumField = is_numeric($album) ? 'id' : 'name';
    
        $albumWhere = $albumField == 'name' ? array('name' => $album) : $album;
        $album = $modx->getObject('galAlbum',$albumWhere);
        if (empty($album)) return '';
        $c->where(array(
            'Album.'.$albumField => $album->get($albumField),
        ));
        $galleryId = $album->get('id');
        $galleryName = $album->get('name');
        $galleryDescription = $album->get('description');
        unset($albumWhere,$albumField);
    }
    if (!empty($tag)) { /* pull by tag */
        $c->innerJoin('galTag','Tags');
        $c->where(array(
            'Tags.tag' => $tag,
        ));
        if (empty($album)) {
            $galleryId = 0;
            $galleryName = $tag;
            $galleryDescription = '';
        }
    }
    $c->where(array(
        'galItem.mediatype' => $modx->getOption('mediatype',$scriptProperties,'image'),
    ));
    if (!$showInactive) {
        $c->where(array(
            'galItem.active' => true,
        ));
    }
    
    if (strcasecmp($sort,'rand')==0) {
        $c->sortby('RAND()',$dir);
    } else {
        $c->sortby($sortAlias.'.'.$sort,$dir);
    }
    if (!empty($limit)) $c->limit($limit,$start);
    $items = $modx->getCollection('galItem',$c);
    
    /* load plugins */
    if (!empty($plugin)) {
        if (($className = $modx->loadClass('gallery.plugins.'.$plugin,$gallery->config['modelPath'],true,true))) {
            $plugin = new $className($gallery,$scriptProperties);
            $plugin->load();
            $scriptProperties = $plugin->adjustSettings($scriptProperties);
        }
    } else {
        if ($modx->getOption('useCss',$scriptProperties,true)) {
            $modx->regClientCSS($gallery->config['cssUrl'].'web.css');
        }
    }
    
    /* iterate */
    $output = '';
    foreach ($items as $item) {
        $itemArray = $item->toArray();
        $itemArray['cls'] = $itemCls;
        $itemArray['filename'] = basename($item->get('filename'));
        $itemArray['image_absolute'] = $modx->getOption('gallery.files_url').$item->get('filename');
        $itemArray['fileurl'] = $itemArray['image_absolute'];
        $itemArray['filepath'] = $modx->getOption('gallery.files_path').$item->get('filename');
        $itemArray['filesize'] = $item->get('filesize');
        $itemArray['thumbnail'] = $item->get('thumbnail',array(
            'w' => (int)$modx->getOption('thumbWidth',$scriptProperties,100),
            'h' => (int)$modx->getOption('thumbHeight',$scriptProperties,100),
            'zc' => (boolean)$modx->getOption('thumbZoomCrop',$scriptProperties,1),
            'far' => (boolean)$modx->getOption('thumbFar',$scriptProperties,'C'),
            'q' => $modx->getOption('thumbQuality',$scriptProperties,90),
        ));
        $itemArray['image'] = $item->get('thumbnail',array(
            'w' => (int)$modx->getOption('imageWidth',$scriptProperties,500),
            'h' => (int)$modx->getOption('imageHeight',$scriptProperties,500),
            'zc' => (boolean)$modx->getOption('imageZoomCrop',$scriptProperties,false),
            'far' => (string)$modx->getOption('imageFar',$scriptProperties,''),
            'q' => $modx->getOption('imageQuality',$scriptProperties,90),
        ));
        if (!empty($album)) $itemArray['album'] = $album->get('id');
        if (!empty($tag)) $itemArray['tag'] = $tag;
        $itemArray['linkToImage'] = $linkToImage;
        $itemArray['imageGetParam'] = $imageGetParam;
        $itemArray['albumRequestVar'] = $albumRequestVar;
        $itemArray['tagRequestVar'] = $tagRequestVar;
        $itemArray['tag'] = '';
    
        $output .= $gallery->getChunk($modx->getOption('thumbTpl',$scriptProperties,'galItemThumb'),$itemArray);
    }
    
    $containerTpl = $modx->getOption('containerTpl',$scriptProperties,false);
    if (!empty($containerTpl)) {
        $ct = $gallery->getChunk($containerTpl,array(
            'thumbnails' => $output,
            'album_name' => $galleryName,
            'album_description' => $galleryDescription,
        ));
        if (!empty($ct)) $output = $ct;
    }
    
    $toPlaceholder = $modx->getOption('toPlaceholder',$scriptProperties,false);
    if (!empty($toPlaceholder)) {
        $modx->toPlaceholders(array(
            $toPlaceholder => $output,
            $toPlaceholder.'.id' => $galleryId,
            $toPlaceholder.'.name' => $galleryName,
            $toPlaceholder.'.description' => $galleryDescription,
        ));
    } else {
        $placeholderPrefix = $modx->getOption('placeholderPrefix',$scriptProperties,'gallery.');
        $modx->toPlaceholders(array(
            $placeholderPrefix.'id' => $galleryId,
            $placeholderPrefix.'name' => $galleryName,
            $placeholderPrefix.'description' => $galleryDescription,
        ));
        return $output;
    }
    return '';


    GalleryAlbums Snippet

    <?php
    /**
     * Gallery
     *
     * Copyright 2010 by Shaun McCormick <[email protected]>
     *
     * Gallery is free software; you can redistribute it and/or modify it under the
     * terms of the GNU General Public License as published by the Free Software
     * Foundation; either version 2 of the License, or (at your option) any later
     * version.
     *
     * Gallery is distributed in the hope that it will be useful, but WITHOUT ANY
     * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
     * A PARTICULAR PURPOSE. See the GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License along with
     * Gallery; if not, write to the Free Software Foundation, Inc., 59 Temple
     * Place, Suite 330, Boston, MA 02111-1307 USA
     *
     * @package gallery
     */
    /**
     * Loads a list of Albums
     *
     * @package gallery
     */
    $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');
    $showInactive = $modx->getOption('showInactive',$scriptProperties,false);
    $prominentOnly = $modx->getOption('prominentOnly',$scriptProperties,true);
    $toPlaceholder = $modx->getOption('toPlaceholder',$scriptProperties,false);
    $sort = $modx->getOption('sort',$scriptProperties,'createdon');
    $dir = $modx->getOption('dir',$scriptProperties,'DESC');
    $limit = $modx->getOption('limit',$scriptProperties,10);
    $start = $modx->getOption('start',$scriptProperties,0);
    $parent = $modx->getOption('parent',$scriptProperties,0);
    $showAll = $modx->getOption('showAll',$scriptProperties,false);
    $albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
    $albumCoverSort = $modx->getOption('albumCoverSort',$scriptProperties,'rank');
    $albumCoverSortDir = $modx->getOption('albumCoverSortDir',$scriptProperties,'ASC');
    
    /* handle sorting for album cover */
    if ($albumCoverSort == 'rank') {
        $albumCoverSort = 'AlbumItems.rank';
    }
    if (in_array(strtolower($albumCoverSort),array('random','RAND()','RAND'))) {
        $albumCoverSort = 'RAND()';
        $albumCoverSortDir = '';
    }
    
    /* build query */
    $c = $modx->newQuery('galAlbum');
    if (!$showInactive) {
        $c->where(array(
            'active' => true,
        ));
    }
    if ($prominentOnly) {
        $c->where(array(
            'prominent' => true,
        ));
    }
    if (empty($showAll)) {
        $c->where(array(
            'parent' => $parent,
        ));
    }
    $c->sortby($sort,$dir);
    if ($limit > 0) { $c->limit($limit,$start); }
    $albums = $modx->getCollection('galAlbum',$c);
    
    /* iterate */
    $output = '';
    foreach ($albums as $album) {
        $albumArray = $album->toArray();
        $c = $modx->newQuery('galItem');
        $c->innerJoin('galAlbumItem','AlbumItems');
        $c->where(array(
            'AlbumItems.album' => $album->get('id'),
        ));
        $c->sortby($albumCoverSort,$albumCoverSortDir);
        $c->limit(1);
        $coverItem = $modx->getObject('galAlbumItem',$c);
        
        if ($coverItem) {
            $albumArray['image'] = $coverItem->get('thumbnail',array(
                'w' => (int)$modx->getOption('thumbWidth',$scriptProperties,100),
                'h' => (int)$modx->getOption('thumbHeight',$scriptProperties,100),
                'zc' => (boolean)$modx->getOption('thumbZoomCrop',$scriptProperties,1),
                'far' => (boolean)$modx->getOption('thumbFar',$scriptProperties,'C'),
                'q' => $modx->getOption('thumbQuality',$scriptProperties,90),
            ));
        }
    
        $albumArray['albumRequestVar'] = $albumRequestVar;
        $output .= $gallery->getChunk($rowTpl,$albumArray);
    }
    
    if ($toPlaceholder) {
        $modx->setPlaceholder($toPlaceholder,$output);
        return '';
    }
    return $output;


    Gallery web page resource content field (i don’t use TinyMCE, i don’t use no editors)

    [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
    
    [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
    
    [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`[[+GalleryAlbums]]` &else=`[[+Gallery]]`]]


    PS.: 1. Pirobox is another "lightbox-like" image viewer
    2. I have no Friendly URLs on (but searching on google and on forum, i see no links between Gallery and FURLs...)
    3. Everything is "Active"
      • 24059
      • 15 Posts
      No one can help me?
        • 28215
        • 4,149 Posts
        Make sure your albums are set to "Prominent" status.
          shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
          • 24059
          • 15 Posts
          That doesn’t work.. i used &prominentOnly=`0` anyway, to show albums not prominents..
            • 24059
            • 15 Posts
            found the problem.. i needed to add the placeholder "GalleryAlbums" and "Gallery" in the source...

            so if anyone is using .cipa. template from his tutorial, need to add the two palceholder, liket this:

            [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
            
            [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
            
            [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`[[+GalleryAlbums]]` &else=`[[+Gallery]]`]]
            
            [[+GalleryAlbums]]
            [[+Gallery]]
            
              • 37073
              • 12 Posts
              Hi

              Do you have a demo link, would like visit and see how it works.

              Thnx
              Sintl
                • 24059
                • 15 Posts
                sintl i’m working on local, i still didn’t finished my portfolio!
                  • 41958
                  • 65 Posts
                  I have this call [[!GalleryAlbums ]] in my template.
                  How to put class="active" on the link for the selected gallery almbum (or any other css call)?