Module_gallery and liquid

Report · May 14, 2016

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,

Carla

Report · May 15, 2016

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

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

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

{% 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

</section>

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

It’s not ideal, but it works.

Kind regards,

Carla

Adobe Community

Module_gallery and liquid