Albums i.e. nested galleries

Thanks for your question. I regret that the short answer is no, MLA does not provide any direct support for an “Album” feature. With a bit of work you could create an application that does pretty much the same thing.

First, you would identify the items for each album by assigning a unique taxonomy term or custom field value to them.

Second, create a WordPress page that displays the “album”. This would include an [mla_gallery] shortcode that accepts the value assigned in step one to filter the gallery display.

Third, create an MLA custom markup template to display the “album” thumbnail as a hyperlink to the page in step two, passing the value assigned in step one.

Finally, use an [mla_gallery] shortcode with the custom markup template and the “album” value to display the album thumbnail. You could also display a multi-item gallery of albums, for example, using a taxonomy term to select all the album items with something in common.

Once you worked out the best approach for your application the process of creating, maintaining and displaying albums would be pretty simple.

I will leave this topic unresolved for now in case you’re interested in pursuing this idea and need more specific guidance. Let me know if I can help, and thanks for your interest in the plugin.

First of all thank you for answer. I understand how to do 1 and 2, but I am not so expert of MLA to create a custom template and use it in a shortcode. Any suggestion will be appreciated.

In practice I have groups of images. I wish to make a gallery of albums where each album is a group of images. When the album is clicked, the corresponding gallery is shown. It is practically a 2-tier gallery.

Thanks for your updates. Here is a simple example of the “2-tier gallery” approach. I’ve used the existing Att. Category and Att. Tag taxonomies, but if you have a lot of albums you may want to define a separate taxonomy for them. That is easy to do and I can be more specific if it’s of interest.

For this example we need one Att. Category term to identify the gallery thumbnail item. You could create more categories if you have albums of different types. I have created “Album Thumbnail” for this purpose. We also need one Att. Tag term to identify the items assigned to each album. I have created three albums, “Animal”, “Mineral” and “Vegetable”.

For my example I decided to use one of the album items as the thumbnail image, which makes things a bit easier. If you want to exclude the thumbnail item from the album, let me know and I’ll modify the example to show how that’s done.

For the album thumbnails I picked one image from each album and assigned the “Album Thumbnail” Att. Category to them. I also assign exactly one Att. Tag term to each item, i.e., one “Animal”, one “Mineral” and one “Vegetable”. These terms will be used to connect the thumbnail item to the item(s) in the album.

For the other items in each album I add the “Animal”, “Mineral” and “Vegetable” tags. You can have additional Att. Tag terms assigned to the album items if you like.

After some additional testing I realized that you do not need a custom markup template for this simple approach. You can use the default template and just replace the link behind each item in the album gallery. Here is the content for a one-page solution:

<h3>Album Gallery</h3>

[mla_gallery attachment_category=album-thumbnail mla_link_href="{+page_url+}?album_tag={+terms:attachment_tag(slug),single+}"]

<h3>The Album</h3>

[mla_gallery attachment_tag="{+template:({+request:album_tag+}|a-bad-term)+}"]

The first sortcode selects every item assigned to the “Album Thumbnail” Att. Category. The mla_link_href parameter links back to the current page ({+page_url+}) and supplies the tag assigned to the album of choice ({+terms:attachment_tag(slug),single+}). The (slug) parameter substitutes the slug value for the default term name value, and the ,single format code picks just the first assigned term, which should be the only term.

The second shortcode displays a gallery filtered by the term slug ({+request:album_tag+}) that is present after clicking on a thumbnail in the album gallery. When the page is first loaded the album_tag is empty and the a-bad-term default displays an empty gallery.

There are many ways of extending this simple example but it is sufficient to show the basic approach. I will leave this topic unresolved in case you have problems or further questions regarding the above suggestions.

Wow… I did not expected that MLA was so sophisticated. Close to a script language. Thank you for the detailed example. I experimented a little bit with your code.

I associated ANY image that has to go in a gallery to “gallery” category, since I have images that have not to go in galleries. I also associated to any image that has to be used as album thumbnail, to category “album_thumbnail”, one for each album. Eventually, I associated to groups of “gallery” images a tag, to created albums as you suggested.

So I used the following code, but it does not give me the expected result:

<h3>Gallery Album</h3>
<p class="manifest">Clicca su una miniatura per vedere la galleria corrispondente all'album.</p>
[mla_gallery attachment_category="album_thumbnail" mla_link_href="{+page_url+}?album_tag={+terms:attachment_tag(slug),single+}" orderby="date" order="DESC" size="thumbnail" thumb_width="180" thumb_height="180"]

<!-- hidden until parameter album_tag is not passed through the URL -->
[mla_gallery attachment_category="gallery" attachment_tag="{+template:({+request:album_tag+}|a-bad-term)+}" columns="6" orderby="date" order="DESC" size="thumbnail" style="launch" thumb_width="180" thumb_height="180"]

First problem: the size of album thumbnail is bigger than the expected 180×180px. Why?
Second problem: if I click on a thumbnail, page is reloaded but it shows ALL the “gallery” images, not the ones associated to the specified album_tag. Any idea why?

I also wonder why, when I load the gallery, the albums related to the first shortcode are no more visible. Look at https://academy.romafilm.it/galleria-fotografica

OK, it works now. It looks like thumb_height and thumb_width are ignored. I had to use columns to have the expected thumbnail size:

<h3>Gallery Album</h3>
<p class="manifest">Clicca su una miniatura per vedere la galleria corrispondente all'album.</p>
[mla_gallery attachment_category="album_thumbnail" mla_link_href="{+page_url+}?album_tag={+terms:attachment_tag(slug),single+}" columns="6" orderby="date" order="DESC" size="thumbnail" thumb_width="180" thumb_height="180"]

<hr class="dashed" />

<!-- hidden until parameter album_tag is not passed through the URL -->
<h3>Selected Gallery</h3>
<p class="manifest">Clicca su una miniatura per vedere la foto ingrandita.</p>
[mla_gallery attachment_category="gallery" attachment_tag="{+template:({+request:album_tag+}|image_placeholder)+}" columns="6" orderby="date" order="DESC" size="thumbnail" style="launch" thumb_width="180" thumb_height="180"]

Thanks for your updates with the positive feedback and for the good news that you have a solution that works for you. I really enjoyed looking at the galleries in the Roma Film Academy site! Regarding your points:

You wrote “It looks like thumb_height and thumb_width are ignored.” The [mla_gallery] shortcode does not support parameters for changing thumbnail height and width. Your first shortcode uses MLA’s gallery display features, but your second shortcode looks like it uses the “Photonic Gallery” plugin because you have included a style=launch parameter. In that case, MLA does only the item selection part of the process; it hands control off to Photonic to format and display the gallery. I do not see the thumb_height and thumb_width parameters in the Photonic documentation, either.

You wrote “ page is reloaded but it shows ALL the “gallery” images” and “I also wonder why, when I load the gallery, the albums related to the first shortcode are no more visible.” I am not sure what you mean by these comments; the gallery display and album thumbnails look good to me. Perhaps you fixed whatever the problem was?

I am marking this topic resolved, but please update it if you have any problems or further questions regarding your album solution. Thanks for an interesting question and the opportunity to illustrate some of MLA’s features.

OK, but if I give back control to MLA, as such:

<h3>Gallery Album</h3>
<p class="manifest">Clicca su una miniatura per vedere la galleria corrispondente all'album.</p>
[mla_gallery attachment_category="album_thumbnail" mla_link_href="{+page_url+}?album_tag={+terms:attachment_tag(slug),single+}" columns="6" orderby="date" order="DESC" size="thumbnail"]

<hr class="dashed" />

<!-- hidden until parameter album_tag is not passed through the URL -->
<h3>Selected Gallery</h3>
<p class="manifest">Clicca su una miniatura per vedere la foto ingrandita.</p>
[mla_gallery attachment_category="gallery" attachment_tag="{+template:({+request:album_tag+}|image_placeholder)+}" columns="6" orderby="date" order="DESC" size="thumbnail"]

I still have a problem, that is, gallery is NOT RESPONSIVE. On mobile stamp thumbnail for 6 columns are too small. So, how can I change the number of columns depending on screen width?

Thanks for your update and the additional question. You can find one approach to creating a responsive gallery in this earlier topic:

Can the gallery be made responsive?

Another example of custom CSS styling can be found here:

Please allow setting padding in the Shortcode

I hope you will find a solution that works for you in the earlier topics.