1 Reply Latest reply on May 15, 2016 2:07 AM by Carla@home

    Module_gallery and liquid

    Carla@home Level 2

      In the thread https://forums.adobe.com/thread/2019211 is explained how to make the module_gallery work with “Liquid”-markup.

      I had a question but the topic was already marked “as answered”. Sorry for my duplicate question(s).



      1. How can you target a (random) photo from the module_gallery and start with this image on the web page?


      In my webpage I want to display the (first) three images from the gallery module. A large photo on the left, next to the large photo two smaller photo's underneath each other. When the site visitor clicks one of these photos the lightbox should appear with the remaining images from the gallery module


      If I use “ {module_photogallery id="34445" resultsPerPage=“1”   …..}  it shows the same picture in that block on the website and in the light-box and not the remainder images.


      2. How can the light-box be made responsive?

      apparently based on the parameter  “ ?Action=thumbnail&Width=1080&Height=540&Algorithm=fill_proportional “ the light-box gets is dimensions. And that is a fixed width.

      3. How can you add a swipe behavior (parameters) for mobile devices?

      Now you have to click the navigation buttons for switching between slides


      Thanks for any help.


      Kind regards,


        • 1. Re: Module_gallery and liquid
          Carla@home Level 2

          By coincidence I found out, that when you have a web app with a media field that contains an image and has the parameter on the web page for showing it as a light-box and together with the light-box module_gallery  all images will be showed together as a light-box.


          So my “ugly” work around for my problem is:


          web page

          1. place the code in the <head> only if it's not there

          <link type="text/css" href="/CatalystStyles/lightbox.css" rel="StyleSheet">

          <script type="text/javascript" src="/CatalystScripts/Cache/lightbox2022.js"></script>


          Web app

          1. add a media field that points to the image file

          2. add a numeric field that contains the gallery id from the module_gallery



          1. upload or place desired image files in the gallery EXCEPT the one(s) already placed in the web app

          2. get the gallery id from the module


          web page

          1. place the web app with the fields that have to be rendered including the image field

          2. place the gallery


          the ugly part

          add this code in the web page

          1. capture the gallery id from the web app for later assign

          <!-- gallery id number is kept in the web app for later capture retrieval -->

          {% capture galleryId -%}{{item.['Property Gallery Number'] | replace: '.00' | convert: "number" }}

                  {% assign galleryId = {{ galleryId }} -%}

          {% endcapture -%}

          note: when you place a numeric field in the web app, it’s output shows like this 999.00

          so you have to delete the .00

          2. place the capture in the part where the gallery will render

          {module_photogallery id="{{galleryId}}" resultsPerPage="20" width="540" height="270" useStandardMethod="true" thumbnail="fill_proportional" collection="imageGalleryProperty" template=""}

          3. the most ugliest thing

          hide things from the web browser by using an inline style “display: none and visibility: hidden” i.e.

          <section class="section-properties" role="region" id="view-photos" style="display: none;

              visibility: hidden">


          rest of your code




          The liquid code will render and all the images are shown as a light-box.

          It’s not ideal, but it works.


          Kind regards,