On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • I’m using galleryalbum on one page to set up a directory for between 4 and 6 different galleries which link to a ’display page’.

    On the gallery page I am running the [[!GalleryAlbums]] snippet using the following modified GalAlbumRowTpl chunk
    <div class="albumList">
    <p><a href="[[~17]]?[[+albumRequestVar]]=[[+id]]">
    [[+name]]</a>

    [[+description]]</p>
    </div>

    This displays the list of albums but I would like to add the first image of each album as a link to the resource id 17 which runs the [[!Gallery]] snippet then displays the respective gallery.

    I have tried using the [[!GalleryItem]] snippet and do achieve a certain amount of success if I add the &id=`78` property but it only calls the same image for each link and I want the first image of each gallery.

    Any suggests how this can be achieved? huh
      Helen Warner
      Number one pixel!
      Proud to be linked with MODX at Crimson Pixel
    • After a lot of trial and error managed to achieve what I wanted using both the Gallery snippet and GalleryAlbums snippet.

      This was my call on the gallery selection page

      <p>You will find here a selection of photos taken at past productions performed by members of the West London Opera.</p>
      <p>We hope you will enjoy looking at them.</p>

      [[Gallery? &tag=`poster`]]
      <div id="albumNames">
      [[GalleryAlbums? &rowTpl=`myChunk`]]
      </div>

      This then links to a page which displays the relevant gallery from the GalleryAlbums list.

      I used the following chunks - galAlbumRowTpl

      UPDATE: if you use the built in chunks when you run any updates these will be overwritten, so its best to duplicate and make your own chunks! Use the call &rowTpl=`` with GalleryAlbum snippet. Learnt this one the hard way... wink

      <div class="albumList">
      <ul>
      <li><a href="[[~17]]?[[+albumRequestVar]]=[[+id]]">
      [[+name]]</a>

      Production date: [[+description]]</li>
      </ul>
      </div>

      and the galItemThumb chunk

      <div class="[[+cls]]">
      <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image]]`:else=`[[~[[*id]]]]?[[+imageGetParam]]=[[+id]]&[[+albumRequestVar]]=[[+album]]`]]">
      <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
      </a>
      </div>

      I then styled using CSS as follows:

      #content .gal-item {
      float: left;
      width: 120px;
      height: 160px;
      padding: 5px;
      margin: 20px 20px 0 20px;
      border: 4px ridge #777;
      text-align: center;
      opacity: 1;
      }
      #content .gal-item a:hover {
      cursor: none;
      }
      .albumList a {
      text-decoration: none;
      font-variant: small-caps;
      color: #a6121c;
      }
      .albumList a:hover {
      color: #a6121c;
      font-weight: bold;
      }
      .gal-item img {
      margin-top: 5px;
      }
      .albumList {
      width: 120px;
      float: left;
      padding: 0 20px;
      margin: 0 10px;
      text-align: center;
      }
      #albumNames {
      float: left;
      width: 600px;
      margin-top: -70px;
      }

      The site is still underdevelopment but please take a look at finished product at westlondonopera.crimsonpixel.co.uk/gallery

      Hope this helps someone else.
        Helen Warner
        Number one pixel!
        Proud to be linked with MODX at Crimson Pixel
      • I think this is exactly what I’ve been trying to figure out... will keep you posted. Many thanks!! your examples will be of help for certain!! smiley