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"