We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Gallery Revo with Subfolder

    • 39053
    • 34 Posts
    mediengaarage Reply #1, 10 years, 8 months ago
    I want to generate a gallery with subfolder like this:

    2016
    - Album 1
    - Album 2
    - Album 3
    - ...

    2015
    - Album 1
    - Album 2
    - ...

    It should only the first level to be visible (2016, 2015). Click on the year it should show the albums of the next level.

    Call of first level:
    [[!GalleryAlbums? &rowTpl=`rowTpl1` &toPlaceholder=`galleries` &prominentOnly=`0` &showAll=`0`  ]]
<div class="css-wrapper">[[+galleries]]</div>


    Chunk "rowTpl1":
    <div class="span3 item">
    <h3>[[+showName:notempty=`[[+name]]`]]</h3>
 <a class="preview" href="[[~63]]?&[[+albumRequestVar]]=[[+id]]" title="[[+name]]">
  <img src="[[+image]]&w=250&h=250&zc=1" alt="[[+name]]">
 </a>
</div>


    Call of second level (Ressource ID 63):
    [[!GalleryAlbums? &rowTpl=`rowTpl` &toPlaceholder=`galleries` &prominentOnly=`0` &showAll=`0`  ]]
<div class="css-wrapper">[[+galleries]]</div>
Id: [[+id]]
galAlbum: [[+album]]
Parent: [[+parent]]


    Chunk "rowTpl":
    <div class="span3 item">
    <h3>[[+showName:notempty=`[[+name]]`]]</h3>
 <a class="preview" href="[[~34]]?[[+albumRequestVar]]=[[+id]]" title="[[+name]]">
  <img src="[[+image]]&w=250&h=250&zc=1" alt="[[+name]]">
 </a>
</div>


    Call detail (Ressource ID 34):
    [[!Gallery? &toPlaceholder=`gallery` &thumbTpl=`rowTpl2` &thumbWidth=`200` &thumbHeight=`160` &thumbQuality=`80`]]
 <div class="row">
  <div class="text-title">
   <h2>[[*longtitle]]</h2>
    <p>[[+gallery.description]]</p>
     <p class="textCenter"><a href="[[~[[*parent]]]]">» zurück zur Übersicht</a></p>
  </div>         
  <div class="css-wrapper">
   [[+gallery]]
  </div>
 </div>


    Chunk "rowTpl2":
    <div class="span2 item2 galItem">
 <a class="preview" href="[[+image_absolute]]" title=" " rel="prettyphoto[pp_gal]">
  <img src="[[+thumbnail]]" alt=" " class="img-rounded">
 </a>
</div>


    What's wrong?

    ModX 2.4.2
    Gallery
    GalleryAlbums
    GalleryItems [ed. note: mediengaarage last edited this post 10 years, 8 months ago.]
      • 47717
      • 144 Posts
      Ananda Reply #2, 10 years, 7 months ago
      Quote from: mediengaarage at Jan 27, 2016, 12:59 PM
      I want to generate a gallery with subfolder like this:

      2016
      - Album 1
      - Album 2
      - Album 3
      - ...

      2015
      - Album 1
      - Album 2
      - ...

      It should only the first level to be visible (2016, 2015). Click on the year it should show the albums of the next level.

      Call of first level:
      [[!GalleryAlbums? &rowTpl=`rowTpl1` &toPlaceholder=`galleries` &prominentOnly=`0` &showAll=`0`  ]]
<div class="css-wrapper">[[+galleries]]</div>


      Chunk "rowTpl1":
      <div class="span3 item">
    <h3>[[+showName:notempty=`[[+name]]`]]</h3>
 <a class="preview" href="[[~63]]?&[[+albumRequestVar]]=[[+id]]" title="[[+name]]">
  <img src="[[+image]]&w=250&h=250&zc=1" alt="[[+name]]">
 </a>
</div>


      Call of second level (Ressource ID 63):
      [[!GalleryAlbums? &rowTpl=`rowTpl` &toPlaceholder=`galleries` &prominentOnly=`0` &showAll=`0`  ]]
<div class="css-wrapper">[[+galleries]]</div>
Id: [[+id]]
galAlbum: [[+album]]
Parent: [[+parent]]


      Chunk "rowTpl":
      <div class="span3 item">
    <h3>[[+showName:notempty=`[[+name]]`]]</h3>
 <a class="preview" href="[[~34]]?[[+albumRequestVar]]=[[+id]]" title="[[+name]]">
  <img src="[[+image]]&w=250&h=250&zc=1" alt="[[+name]]">
 </a>
</div>


      Call detail (Ressource ID 34):
      [[!Gallery? &toPlaceholder=`gallery` &thumbTpl=`rowTpl2` &thumbWidth=`200` &thumbHeight=`160` &thumbQuality=`80`]]
 <div class="row">
  <div class="text-title">
   <h2>[[*longtitle]]</h2>
    <p>[[+gallery.description]]</p>
     <p class="textCenter"><a href="[[~[[*parent]]]]">» zurück zur Übersicht</a></p>
  </div>         
  <div class="css-wrapper">
   [[+gallery]]
  </div>
 </div>


      Chunk "rowTpl2":
      <div class="span2 item2 galItem">
 <a class="preview" href="[[+image_absolute]]" title=" " rel="prettyphoto[pp_gal]">
  <img src="[[+thumbnail]]" alt=" " class="img-rounded">
 </a>
</div>


      What's wrong?

      ModX 2.4.2
      Gallery
      GalleryAlbums
      GalleryItems

      Hi ,

      I'm not sure about your problem, as you do not provide us with a clear definition of the error/issue.

      I suggest you build it, using this example, from basic to advanced. So begin with the example, and then try with each step to advance your design/code, and test, then repeat the cycle.

      https://rtfm.modx.com/extras/revo/gallery/gallery.example1
        • 39053
        • 34 Posts
        mediengaarage Reply #3, 10 years, 7 months ago
        Hi,

        thank you for the information, but it is not that what i need.

        My problem is that i want to have a tree function.
        First it should show the first level e.g. 2015 and 2016, when i click on one item then there are the subfolders with the album1, album2, and so on.
        When i click on one album you see all the images of this album.

        It should only the first level to be visible (2016, 2015). Click on the year it should show the sub-albums of this album. When i click on each album, it opens the images of the album. In my case you can click on the single image and it opens a lightbox via prettyphoto.

        But it dont open the second level.
        What's wrong or did you know a example?
          • 39053
          • 34 Posts
          mediengaarage Reply #4, 9 years, 9 months ago
          I have a solution with albums and sub-albums. I use prettyphoto. We need also the Extra "getUrlParam"


          Call Album Site:
          [[!GalleryAlbums? 
&rowTpl=`rowTpl` 
&toPlaceholder=`galleries` 
&prominentOnly=`0`]]
<div class="css-wrapper">[[+galleries]]</div>


          Chunk rowTpl
          <div class="span3 item">
 <a class="preview" href="[[~Id-of-Detailressource]]?[[+albumRequestVar]]=[[+id]]" title="[[+name]]">
  <img src="[[+image]]&w=320&h=240&zc=1" alt="[[+name]]">
 </a>
  <h4>[[+showName:notempty=`[[+name]]`]]</h4>
</div>


          Chunk callDetail at Detailressource:
          [[!GalleryAlbums? 
&rowTpl=`rowTpl` 
&toPlaceholder=`galleries` 
&prominentOnly=`0` 
&parent=`[[!getUrlParam? &name=`galAlbum`]]`  
&showAll=`0`]]

[[!Gallery? 
&toPlaceholder=`gallery` 
&thumbTpl=`rowTpl2` 
&thumbWidth=`200` 
&thumbHeight=`160` 
&thumbQuality=`80`]]
 
 <div class="css-wrapper">[[+galleries]]</div>
 
 <div class="row">
  <div class="text-title">
    <div><h4>[[+gallery.description]]</h4></div>
     <a href="[[~[[*parent]]]]">zurück zur Übersicht</a>
  </div>         
  <div class="css-wrapper">
   [[+gallery]]
  </div>
 </div>


          Chunk rowTpl2
          <div class="span2 item2">
 <a class="preview" href="[[+image_absolute]]" title=" " rel="prettyphoto[pp_gal]">
  <img src="[[+thumbnail]]" alt=" " class="img-rounded">
 </a>
</div>


          The Doc of prettyphoto you will find here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/