Go Back

Image set name: Nature and Food

Image Gallery field type value output examples:

---

This is a complex example how to use diffrent layouts to output the content:

Select Gallery Layout: 3D_Rotating_Gallery CSS_Only_image_gallery animated_Mini_Photo_Gallery A_CSS_only_expanding_gallery A_CSS_only_expanding_gallery_II Pure_CSS_Lightbox_using_target_and_has Sibling_Gallery Show Layout

---

Simple list of thumbnails:

{{ gallery }}

Output:
,,,,

---

Simple list of original image links:
When editing a layout you can double-click on the tag to see the list of possible options.

{{ gallery("link:_original",",") }}

Output:

https://joomlaboat.com/images/galleryexample/g41_gallery__original_1.jpg,https://joomlaboat.com/images/galleryexample/g41_gallery__original_2.jpg,https://joomlaboat.com/images/galleryexample/g41_gallery__original_3.jpg,https://joomlaboat.com/images/galleryexample/g41_gallery__original_4.jpg,https://joomlaboat.com/images/galleryexample/g41_gallery__original_5.jpg

---

Array of thumbnails:

{% set images = gallery("link:",";")|split(';') %}
<ul>
{% for image in images %}
  <li>{{ image }}</li>
{% endfor %}
</ul>

Output:

https://joomlaboat.com/images/galleryexample/g41_gallery__esthumb_1.jpg
https://joomlaboat.com/images/galleryexample/g41_gallery__esthumb_2.jpg
https://joomlaboat.com/images/galleryexample/g41_gallery__esthumb_3.jpg
https://joomlaboat.com/images/galleryexample/g41_gallery__esthumb_4.jpg
https://joomlaboat.com/images/galleryexample/g41_gallery__esthumb_5.jpg