Display all image files in the user/images/gallery/subdirectory

Support
1

Hello,
I am moving articles from Joomla 3 to Grav 1.7.

In Joomla, in the content of the article I have the plugin code: {gallery}/gallery/2021/28-09{/ gallery}.

The code loads all images from the given location.

In Grav, I would also like to replace it with code that will display these images (in the exported .md files, I add field: gallery: 'gallery/2021/28-09' to the item.md file, and delete string: {{gallery / 2021 / 28-09} }.

I copied all the images to the user / images directory and they are in their own subdirectories.

I don’t know how to get all files in this location user/images/gallery/2021/ 28-09 in the .twig file.

Any idea how to get an array of these image files? Maybe you can generate such a gallery in some other way?

2

@q3d, Have a look at the docs on Where to put your files

If you put your image folders below /user/pages/, you can get an array of images in Twig using page.find('/gallery/2021/28-09').media

If you do not want a bare list of images but instead a slider/gallery, you’ll need a plugin like LightSlider and place that in a Twig template.

3

So the key is to put the files inside: user/pages/gallery, NOT user/images/gallery?

Do I understand correctly?

If I have image arrays it will basically generate any HTML structure for itself.

At the moment, I altogether changed it so that at the time of exporting from Joomla, it copies these files to my directories user/pages/blog/slug with the .md file (probably the standard place in CMS Grav for graphic files attached to the article).

4

@q3d,

If I have image arrays it will basically generate any HTML structure for itself.

No, you will have to loop the array in Twig and create <img> elements using:

{% for image in page.find('/gallery/2021/28-09').media %}
  {{ image.html() | raw }}
{% endfor %}

Images “belonging” to page:
If you place images in the same directory as the page file (*.md), you can get all images for that page using:

{% for image in page.media %}
  {{ image.html() | raw }}
{% endfor %}

Image inside Markdown:
If you want to add an image statically in Markdown you could use ![my image](image.jpg)

1 Like