Unite Gallery in Grav non modular page: any short code?

Support Plugins
1

Hi all! I’m trying to put a gallery in a blog page using Unitegallery plugin, but I can’t find a way to do this. My situation is even worsened by Gantry 5 plugin, which need this code:

<div class="gallery-container {{ page.header.class }}">
	{{ unite_gallery(page.media.images)|raw }}
</div>

for the images to be dispalyed correctly.

I tried this solution from pambtaau for a similar post:

        {% extends 'partials/base.html.twig' %}

{% block content %}
  <div class="gallery-container {{ page.header.class }}">
      {{ unite_gallery(page.media.images, '{"gallery_theme":"' ~ page.header.unitegallery.gallery_theme ~ '"}') }}
  </div>

  {{ page.content|raw }}
{% endblock %}

but it doesn’t work, probably for the limitation of Gantry 5 template.
Moreover to put this in a page I need a sort of shortcode…
Can someone put me in the right direction?
Thanks in advance

2

@maria, If you want to embed the UniteGallery inside the Markdown of a page, you could try the following:

  • I’m using a fresh install of Grav 1.7.0
  • Install UniteGallery: $ bin/gpm install unitegallery
  • Create page ‘gallery’
  • Add images to folder ‘/user/pages/03.gallery’
    user/pages
├── 01.home
│   └── default.md
├── 02.typography
│   └── default.md
└── 03.gallery
    ├── default.md
    ├── autumn.jpg
    ├── butterflies.jpg
    ├── butterfly.jpg
    └── corn.jpg
  • Add the following to ‘/user/pages/03.gallery/default.md’
    ---
title: Gallery
unitegallery:
  gallery_theme: tiles
process:
    twig: true
---
<div class="gallery-container {{ page.header.class }}">
    {{ unite_gallery(page.media.images, '{"gallery_theme":"' ~ page.header.unitegallery.gallery_theme ~ '"}') | raw }}
</div>
  • Browse to ‘/localhost/gallery’ and you should see something like:
    Untitled
3

THANKS A MILLION! It works like a charm :smiley:
Now I need only a little improvement: captions for the photos.
If I use meta.yaml for every photo in the gallery folder can I have the captions?

4

@maria,

The README of the UniteGallery plugin gives you some examples. Here is one:

<div class="gallery-container {{ page.header.class }}">
    {{ unite_gallery(page.media.images, '{
        "gallery_theme":"' ~ page.header.unitegallery.gallery_theme ~ '",
        "tile_enable_textpanel":true,
        "tile_textpanel_title_text_align": "center",
        "tile_textpanel_always_on":true
        }') | raw }}
</div>

Untitled

You might need to add some css to change the opacity of the background of the the captions.

The original UniteGallery will give you even more display alternatives…

5

Sorry…I’m a newbie with Grav… using your code I can see only the grey strip under the photo, but not the title…can you give me an example of how you add “Autumn”?
i read the documentation about meta.yaml files for the description, but I don’t know where to put the myimage.meta.yaml file :roll_eyes:

6

@mari, I wouldn’t call someone a newbie while being a member since Nov. '18 and having created 9 posts…

The docs on meta files are quite explanatory on this.

If you are using this method to add file-specific styling or meta tags for a single file, you will want to put the YAML file in the same folder as the referenced file.

7

My learning curve is a bit slow :roll_eyes: …
I’ll try and let you know!
Thanks!

8

Ok. Now meta.yaml files are in the same folder of the related images… but I can’t see any description in the gallery…

9

@maria,

Did you force a refresh of the browser’s cache (Ctrl-F5, or open its devtools), and/or cleared cache of Grav?

What do you meta files look like?

10

cleared browser, gantry 5 and grav cache, but no results…

My meta.yaml

title: 'My Image'
alt: ''
caption: 'My Image'
11

@maria,

According the README (what’s in a name?) of the UniteGallery plugin:

This generates an album where all pictures are displayed as thumbnails and the metadata alt_text [emphasis is mine] is displayed as text at the bottom of the thumbnail

12

Put “my Image” in alt, saved all, emptied cache of browser, grav and gantry… no success…

13

That doesn’t surprise me at all… :wink:

14

Ok I found the problem: I used “Admin Addon Media Metadata” plugin to generate the meta.yaml files, but the alt text is displayed only if in the meta.yaml is:

alt_text: 'My Image'

and the plugin doesn’t generate this code.

As said, thanks a million for your help!