“Universal” gallery shortcode

support
1

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:

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

Yet, sometimes the shortcode is needed on the landing page.

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

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

.
└── 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!

2

I’m not sure this is actually better, but I did the same: Adding a photoswipe gallery as a shortcode using Page.Resources

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

3

does not work for index.md!

i use page bundles ( _index.md -> index.md )
tryed to formaat :frowning:

└── 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
4

Thank you two!

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.

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!

5

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

6

Here you go @Grob !

And there are a few examples here

7

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

1 Like
8

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

10

**wrong way … **

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

Sorry

11

Thank you, @ju52, for your help.

I got it to work using

---
kind: home
---

on /content/index.md.

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