# “Universal” gallery shortcode

**URL:** <https://discourse.gohugo.io/t/universal-gallery-shortcode/18581>\
**Category:** support\
**Created:** [May 8, 2019, 9:26am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581 "2019-05-08T09:26:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [May 8, 2019, 9:26am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/1 "2019-05-08T09:26:25Z")

</div>

Hi all!

For a large project I am writing a gallery shortcode which needs to enable multiple galleries on a page.

This works fine and is my preferred approach. Each gallery would live in a separate subfolder:

```auto
{{ with (.Page.Resources.ByType "image").Match (printf "%s/*" (.Get "dir")) }}

```

Yet, sometimes the shortcode is needed on the [landing page](https://discourse.gohugo.io/t/images-on-home-page-range/18576).

Is this a good and future proof approach to do this?

```auto
{{ with (.Page.Resources.ByType "image").Match (printf "%s**" (.Get "src")) }}

```

```auto
.
└── content
    └── _index.md
    └── gallery-1-1.jpg
    └── gallery-1-2.jpg
    └── gallery-2-1.jpg
    └── gallery-2-2.jpg
    ├── posts
    | ├── firstpost.md
    | ├── gallery1
    | | └── 1.jpg
    | | └── 2.jpg
    | ├── gallery2
    | | └── 1.jpg
    | | └── 2.jpg

```

Any better ideas?

Thank you very much, guys!

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [May 8, 2019, 2:52pm UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/2 "2019-05-08T14:52:17Z")

</div>

I’m not sure this is actually better, but I did the same: [Adding a photoswipe gallery as a shortcode using Page.Resources](https://discourse.gohugo.io/t/adding-a-photoswipe-gallery-as-a-shortcode-using-page-resources/10672)

My recent version doesn’t use masonry.js, but css3 columns instead. I can share that if you want.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [May 8, 2019, 2:53pm UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/3 "2019-05-08T14:53:17Z")

</div>

**does not work for index.md!**

i use page bundles ( \_index.md -\> index.md )  
tryed to formaat ☹

```
└── content
    └── index
       └── index.md
       └── gallery1 
          └── gallery-1-1.jpg
          └── gallery-1-2.jpg
       └── gallery1 
          └── gallery-2-1.jpg
          └── gallery-2-2.jpg
    ├── posts
     | ├── firstpost
     | | ├── index.md
     | | └── gallery1
     | | └── 1.jpg
     | | └── 2.jpg
     | | └── gallery2
     | | └── 1.jpg
     | | └── 2.jpg
```

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [May 8, 2019, 6:45pm UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/4 "2019-05-08T18:45:03Z")

</div>

Thank you two!

> [@brunoamaral](#):
>
> I’m not sure this is actually better, but I did the same: [Adding a photoswipe gallery as a shortcode using Page.Resources](https://discourse.gohugo.io/t/adding-a-photoswipe-gallery-as-a-shortcode-using-page-resources/10672)
> 
> My recent version doesn’t use masonry.js, but css3 columns instead. I can share that if you want.

Yes, your `{{ $galleryimages := .Page.Resources.Match (printf "%s-*" (.Get "folder")) }}` is a similar approach. Yet, it encourages me to go this way.

Of course, I would like to see your updated CSS3 columns version. I currently rely on CSS grid (with fallback). It looks good as all images are resized to the same ratio.

> [@ju52](#):
>
> i use page bundles ( \_index.md → index.md )

That is interesting—and it would tidy up the root folder. I will figure out how to get the index folder to work so that the URL will be `/` instead of `/index/`. Can `/index/index.md` be defined as home in config.toml?

Thank you!

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [May 8, 2019, 8:06pm UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/5 "2019-05-08T20:06:49Z")

</div>

index.md uses /layout/index.html and generates index.html under /.

my Apache:

```
<Directory /web/html>
	Require all granted
	Options None 
	DirectoryIndex index.html
	AllowOverride None
</Directory>

```

hope this helps

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [May 8, 2019, 8:57pm UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/6 "2019-05-08T20:57:55Z")

</div>

Here you go @Grob !

> <https://gist.github.com/brunoamaral/ce0abf01f6f8757e9fd49ac96c9bc85b>

And there are a few examples here

> **[Bruno's Museum Tour](https://brunoamaral.eu/story/museum-tour/)**
>
> An unpretentious walk around Lisbon's Museums

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [May 9, 2019, 9:44am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/7 "2019-05-09T09:44:21Z")

</div>

Thank you very much! Looks very good, @brunoamaral!

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [May 9, 2019, 9:45am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/8 "2019-05-09T09:45:45Z")

</div>

> [@ju52](#):
>
> index.md uses /layout/index.html and generates index.html under /.

Hmm … in my setups it generates `/index/index.html`. I will try to figure it out. Thank you!

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [May 9, 2019, 10:18am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/10 "2019-05-09T10:18:41Z")

</div>

\*\*wrong way … \*\*

Let index.md on /content and make /content/images (or different name) for the pictures

Sorry

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [May 9, 2019, 11:49am UTC](https://discourse.gohugo.io/t/universal-gallery-shortcode/18581/11 "2019-05-09T11:49:15Z")

</div>

Thank you, @ju52, for your help.

I got it to work using

```auto
---
kind: home
---

```

on `/content/index.md`.

Now, my preferred version of the shortcode is working, too.