mfg92 / hugo-shortcode-gallery Goto Github PK

Hello, I would like to ask if it can only be used in index files, because I find that it does not work in other files.

I get any empty page trying to add the shortcode to _index.md. Is this by design?

Hi everybody!
I am currently a bit struggling with setting up the gallery.
I use the hugo-coder theme and want to add the gallery as an add on.
I‘ve walked through the quickstart guide of the gallery, but when I add the example code, it‘s just shown as a text when I access the md-file…

Hi,

I use hugo-shortcode-gallery together with the docsy theme.
The docsy theme allows to generate a print preview of sections -- this basically combines several pages to a bigger printable page.
In the resulting "bigger" page only galleries from the first page are visible.
Galleries from further pages are not visible but after inspection of the html they're correctly included.
If I inspect those "invisible" galleries, the images appear with size 0x0.

Unfortunately the affected site is not public yet so I can't really share an example.

Any ideas? could this be related somehow to resizing of images which is only applied to part of the images?

Hi there,

here is the error I get when I add a SVG file in the images folder:

ERROR 2021/04/18 23:19:30 Rebuild failed:

ERROR 2021/04/18 23:19:30 "[...]/hugo/img/content/gallery/index.md:23:1": failed to render shortcode "gallery": failed to process shortcode: "[...]/hugo/img/themes/hugo-shortcode-gallery/layouts/shortcodes/gallery.html:89:30": execute of template failed: template: shortcodes/gallery.html:89:30: executing "shortcodes/gallery.html" at <$original.Fit>: error calling Fit: *resources.genericResource is not an image

Thanks a lot for this awesome module!

OS: Windows 10
Hugo version: hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended

Dude, I have some photos taken by phone camera and screenshot in camera/camera/, and I write this into camera/index.md:

{{< gallery match="camera/*" sortOrder="desc" rowHeight="120" margins="2" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=false previewType="color" embedPreview=true loadJQuery=true >}}

When I use the latest version hugo-shortcode-gallery, hugo serve failed with:

Error: error building site: "D:\git\_BYYA-site\content.zh\docs\camera\index.md:5:1": failed to render shortcode "gallery": failed to process shortcode: "D:\git\_BYYA-site\themes\hugo-shortcode-gallery\layouts\shortcodes\gallery.html:114:35": execute of template failed: template: shortcodes/gallery.html:114:35: executing "shortcodes/gallery.html" at <images>: can't evaluate field AutoOrient in type interface {}

I accidentally deleted the hugo-shortcode-gallery old version I used before, and I can't compare them 🤡.

I'm trying to use this gallery with the Wowchemy theme, but the problem is that the theme has a builtin shortcode with the same name, i.e. {{< gallery ... >}}. So I tried to set up the gallery from this repo by copying the layouts/shortcodes, assets/shortcode-gallery and static/shortcode-gallery into my project, and renaming the shortcode file to autogallery.html instead.

This does load when I start up the hugo server, but the gallery doesn't function properly, all the thumbnails are just shown as very blurred images, and the thumbnails just link directly to the image files, i.e. there is no lightbox opening or anything like that.

What steps am I missing in order to get this to work as a manually imported shortcode?

Hi,

have you tested the shortcode with hugo + extended for avif files? For me this does not work. Not sure if it is the shortcode or some dependency which is not capable of handling avif files..

hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1
Error: Error building site: "/content/portfolio/Wildlife/index.de.md:7:1": failed to render shortcode "gallery": failed to process shortcode: "/themes/hugo-shortcode-gallery/layouts/shortcodes/gallery.html:130:30": execute of template failed: template: shortcodes/gallery.html:130:30: executing "shortcodes/gallery.html" at <$original.Fit>: error calling Fit: *resources.genericResource is not an image

Hi! I'm trying to use your awesome shortcode, yet nothing appear on my side. The page resources appear in the build root, yet nothing shows where it should get the gallery. It's a multi language site, with hugo 0.89.4. I followed the instructions, so I have all my images under images/* and copied the shortcode command. No error at build or serve, yet no gallery... any clue?

EDIT: posted in the wrong place, sorry to waste your attention. i don't see how to delete this, so just closing.

This plugin looks great. I'd like to migrate from https://github.com/liwenyip/hugo-easy-gallery/ but the missing feature for me is the ability to specify a custom image order without relying on file naming.

Hi, I was just wondering if you could specify a license for the code in this repo. I have some derivative code I would like to either build upon this or possibly submit to this repo if you were open to it, but can't really do that in absence of knowing the license of the software.

https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository

Thanks so much for writing this shortcut, it's the best option for hosting images with hugo I've found and has helped me a lot.

I followed the installation instructions, and the gallery is not rendering for me. The preview of an article that includes the gallery shortcode looks like it's trying to render something.

When I go into the post, it's completely blank.

My directory structure looks correct, but maybe I'm missing something?

I have also included it in my themes directory:

theme = ["logbook", "hugo-shortcode-gallery"]

Thank you for that great project

I've followed your detailed instructions

However, it seems the shortcode is simply ignored, not a single js package is loaded (Firefox Dev Console F12 in comparison to your demo > matze.rocks)

Where should I start to investigate?

hugo serve

Watching for changes in /home/x/mysyite/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/x/mysyite/config.yml, /home/x/mysyite/themes/hugo-shortcode-gallery/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)

head config.yml (excerpt)

theme:
  - hugo-shortcode-gallery
  - hugo-flex

[themes]$ tree -d -L 2

    .
    ├── hugo-flex
    │   ├── assets
    │   ├── images
    │   └── layouts
    └── hugo-shortcode-gallery
        ├── assets
        ├── layouts
        └── static

cat index.md

+++
title = "Gallery"
lastmod = 2021-01-03T17:10:05+01:00
draft = false
+++
{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" resizeOptions="600x300 q90 Lanczos" showExif="true" previewType="blur" embedPreview="true" >}}

{{< gallery
    match="images/*"
    showExif="true"
    sortOrder="desc"
    loadJQuery="true"
    embedPreview="true"
>}}

I'm trying to incorporate the shortcode in my website. I've followed the instructions as they stand.

I've edited my config.yaml to this:

theme: 
    - hugo-theme-novela
    - hugo-shortcode-gallery
baseURL: "https://example.com"
languageCode: "en-us"

I've also cloned it into the themes folder. According to the installation instructions, this should be enough to get me started. However when I add a new folder called images next to the _index.md inside content and us this shortcode, nothing shows up:

---
hero:
  heading: A Whole Sort of General Mishmash
  maxWidthPX: 400
seo:
  image: /images/hero-2.jpg
---
{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" resizeOptions="600x300 q90 Lanczos" showExif="true" previewType="blur" embedPreview="true" >}}

I've uploaded all the files to this repo here if that helps: Website Repo. Can someone help me with this? I've been trying for a while now. I'm new to Hugo so I might be missing something that is very simple.

hi,can resources load remote images url?

Hi, I'm trying to use gallery in my site but it won't show up. Theme is hugo-coder. Site is multilingual.
This is md file, pictures.sr.md

+++
title = "Galerija"
slug = "pictures"
+++
{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview=true loadJQuery=true >}}

Directory layout

content
    pictures.sr.md
    images
        image1.jpg
        image2.jpg

I can see in developer tools that jquery is loaded

	if (!jQuery) {
		alert("jquery is not loaded");
	}

	$( document ).ready(() => {
		const gallery = $("#gallery-3d0aaff2ab37b060b25f87de322693fd-0");
		

		
		let swipeboxInstance = null;

		
		
		gallery.on('jg.complete', () => {
			
				
				
				$(() => {
					$('.lazy').Lazy({
						visibleOnly: true,
						afterLoad: element => element.css({filter: "none", transition: "filter 1.0s ease-in-out"})
					});
				});
			

			swipeboxInstance = $('.galleryImg').swipebox(
				jQuery.extend({},
					{  }
				)
			);
		});

		
		gallery.justifiedGallery({
			rowHeight : "150",
			margins : "5",
			border : 0,
			randomize :  false ,
			waitThumbnailsLoad : false,
			lastRow : "justify",
			captions : false,
			
			
		});

		
		
	});

Is there anything i can try to make it work. Thanks

Hello - I was wondering if it were possible to use the shortcode in a branch bundle page. I'm new to Hugo, and how it handles content; I'd like to use the shortcode on my _index.md page that's the root of my content directory. Is this currently possible?

Hello, unluckily the gallery isn't showing on my hugo site. I'm trying to use it in the homepage.
I'm using beautiful hugo as theme.
Into hugo server i don't receive any error.
My config.toml is like:

baseURL = 'http://www. [...] .com'
languageCode = 'it'
DefaultContentLanguage = "it"
title = 'Title'
theme = ["beautifulhugo", "hugo-shortcode-gallery"]
metaDataFormat = "yaml"

[ ... theme configs after ... ]

Content folder is like this:

content/
├── images
│   ├── blue-fish.jpeg
│   ├── Cerbero.jpeg
│   ├── Eyes-scaled.jpeg
│   ├── Gohan.jpg
│   ├── jimi.jpeg
│   ├── Moth.jpeg
│   └── Viola-scaled.jpeg
├── _index.md
└── Punk-scaled.jpeg

This is my _index.md (also the home page)

---
title: ""
date: 2022-09-18T23:15:47+02:00
draft: true
---
![imag](/images/Cerbero.jpeg)  <---- This image works correctly

{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview="true" >}}

I've downloaded you repo as submodule into themes

themes/  [only folders]
├── beautifulhugo
│   ├── etc...
└── hugo-shortcode-gallery
    ├── assets
    │   └── shortcode-gallery
    │       └── font-awesome
    ├── layouts
    │   └── shortcodes
    └── static
        └── shortcode-gallery
            ├── justified_gallery
            ├── lazy
            └── swipebox
                ├── css
                ├── img
                └── js

I cross-post selected content from my personal blog on Medium.

Medium has a convenient import feature. However, it's unable to import any images displayed by the gallery plugin. I assume it's due to the fact that they are dynamically loaded. The problem is that Medium doesn't allow editing of imported posts, so there's no way of adding the images later.

I'm not sure whether this is feasible to fix.

Sorry for abusing the "issues". This is not an issue.

Thanks for making this! I have wanted it for so long; I knew it was possible to do such a thing but could never quite get it together with my limited knowledge and skills. Tried numerous ways of going about it but nothing worked properly.

This works exactly as I hoped with no futzing around and customization is straightforward.

I installed the theme and put the images that I was testing in an images folder but it doesn't seem to be able to find them.

I keep getting this error from this.

Here is how I'm calling the shortcode and what the file structure looks like.


The shortcode is in the melee.md file and the images are located in that images file

Hi Matze,

first of all, thank you for your work and time you have put into the hugo-shortcode-gallery. This will be very helpful for me and I am looking forward to use it. However, I have run into an issue which I would like to report. I haven't found a solution so far.

I tried to use your hugo-shortcode-gallery within the theme hugo-theme-massively. Unfortunately I am not able to get a gallery working. I see the following issue in the development tools:

jQuery.Deferred exception: gallery.justifiedGallery is not a function TypeError: gallery.justifiedGallery is not a function
at HTMLDocument. (http://localhost:42399/gallery/:279:11)
at e (http://localhost:42399/shortcode-gallery/jquery-3.6.0.min.js:2:30038)
at t (http://localhost:42399/shortcode-gallery/jquery-3.6.0.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2

jquery-3.6.0.min.js:2 Uncaught TypeError: gallery.justifiedGallery is not a function
at HTMLDocument. ((index):279)
at e (jquery-3.6.0.min.js:2)
at t (jquery-3.6.0.min.js:2)

Cheers and best regards,
Alex

Changing from {{ .Model }} to {{ .Quality }} displays nothing instead of expected tag value (RAW for this particular tag). Tried other tags as well, nothing. Any ideas?

Tested with https://raw.githubusercontent.com/mfg92/hugo-shortcode-gallery/example_site/example_site/content/gallery/images/2020-07-26-_MG_3439.jpg 😍

Adding these two lines to config.toml don't change the issue:

[imaging.exif]
includeFields = ".*"

Update:

• Found one tag working: Artist

I've noticed that if i use a featured image with the aether theme that this image is not included in the gallery. Is this by design? And is there a way to overwrite this behaviour?

post:

---
title: "DSM Progress Week 1"
date: "2012-05-15"
categories: 
  - "aquatic"
tags: 
  - "algae"
  - "aquarium"
  - "dry-start-method"
  - "dsm"
  - "nano-tank"
  - "planted-tank"
resources:
  - name: featuredImage
    src: "images/tank18.jpg"
---

Progress shots at week 1:

{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview="true" loadJQuery=true >}}

Thank you for providing this great shortcode!

resizeOptions allows me to control the size of the thumbnails. Is there a way to do the same for the images being displayed in the swipebox itself.

Some of my photos are many MB large (and I want to provide them for download too). Is there a way to serve lower-res/lower quality versions in the gallery without resizing them myself? I'm not sure how to achieve this since it appears that the images are being loaded dynamically by the jQuery plugin.

I'm running a hugo site in a subdirectory on a web-server instead of the server root.

The javascript paths in layouts/shortcodes/gallery.html are hardcoded, so that the site fails to load the JS and fails to display the gallery.

Hi @mfg92

Nice work on this !

I seem to be having some issues with the filtering buttons not showing,

when I check out your example-site and render it with Hugo the buttons are showing,

then I take the exact code and add it to mine and it doesn't show the filtering buttons

Here is my md
https://github.com/stiliajohny/stiliajohny.github.io/tree/galery/content/photography

here is my config.toml
In particular :

gallery anotations
https://github.com/stiliajohny/stiliajohny.github.io/blob/702b64a803c01aaf8277b69d20591175c4d10a3c/config.toml#L249

exiff annotations
https://github.com/stiliajohny/stiliajohny.github.io/blob/702b64a803c01aaf8277b69d20591175c4d10a3c/config.toml#L559

Am I missing something ?

I am not fully sure whether this behavior is caused by the gallery plugin, my theme or Hugo itself.

Most of my posts have a gallery on top (before any other content). This results in the description to look like this (from the RSS feed):

<description>
if (!jQuery) { alert("jquery is not loaded"); } $( document ).ready(() = { const gallery = $("#gallery-0"); let swipeboxInstance = null; gallery.on('jg.complete', () = { $(() = { $('.
</description>

This makes its way into the RSS feed, and the HTML meta tags which will be utilized when sharing on various social media sites.

My workaround is to add an explicit description for each post. However, I still think this is problematic because the default mechanism in many themes is to populate the description from the post content, and it appears that this doesn't filter out Javascript code.

Here's how Hugo populates og:description, and here's my theme's configuration. Finally, this is how Hugo populates the RSS description field.

The galleries are beautiful but I'm having an issue when I try to add two of them on the same page.

I'm using page bundles and have installed hugo-shortcode-gallery via git in my themes folder. I'm loading jquery with galleryLoadJQuery = true in hugo.toml. My content is structured like this:

• content
  • posts
    • firstpost
      • index.md
      • gallery1
        • image1.jpg
        • image2.jpg
      • gallery2
        • image3.jpg
        • image4.jpg

I have two lines in index.md
{{< gallery match="gallery1/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview=true >}}

{{< gallery match="gallery2/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview=true >}}

Either line works fine on its own but when they're both present, the second gallery doesn't display and its pictures appear in the first gallery (but not the thumbnails, only when you page through the lightbox).

Adding the second line also causes an error in the console: Uncaught Error: jQuery is not loaded, hugo-shortcode-gallery wont work without it!

Hi! I'd like to implement the filtering in my gallery. I see that I can filter by " EXIF tags, image description, start rating or color labels". What exif tag should I create/use if I want to filter similarly to your example site ("Favourites, birds, insects, etc.).

I really do love this gallery shortcode and thank you for all your hardwork!

If I use portrait images from my smartphone, the gallery images are not displayed in portrait but all in landscape.
If I display the images in large by clicking on them, they're rendered correctly in portrait.
I guess that lightbox respects the exif orientation but thumbnail generation doesn't.
Any ideas?

Hi there,

webp images doesn't seem to be supported:

Adding a .webp file in the image folder results in this error:

ERROR 2022/04/01 16:04:23 "/home/user/hugo-shortcode-gallery/content/posts/images/index.md:9:1":
failed to render shortcode "gallery": failed to process shortcode: "/home/user/hugo-shortcode-gallery/themes/hugo-shortcode-gallery/layouts/shortcodes/gallery.html:130:30":
execute of template failed: template: shortcodes/gallery.html:130:30:
executing "shortcodes/gallery.html" at <$original.Fit>: error calling Fit: *resources.generic
Resource is not an image

Hi,

First of all, I wanted to thank you for this amazing gallery! It works great and looks amazing.

I am using it as the default gallery on my website (www.dzyla.com). I noticed that when I am using it on my portfolio, images do not load at first and the website has to be reloaded. I am not sure what is causing it.

Another issue I noticed is that the image that is lower at the website is clicked, it is not centered properly in the lightbox. However, when the lightbox starts with the images at the top, everything works well.

Both issues are related to the full page gallery that is initialized with:

{{< gallery match="images/*" sortOrder="desc" rowHeight="300" margins="10" resizeOptions="600x600 q95 Lanczos" showExif=true previewType="color" embedPreview="false" >}}

I hope it can be easily fixed!
Thanks!

Thanks for the amazing shortcode! It's exactly what I was attempting to build for my site, but better. I found a small bug and have a suggestion below.

Inside of the gallery.html the following snippet controls the display image exif data. The problem is that placeholder text such as the 'mm', 'f/', 'sec', and 'ISO' either preceding or following their respective tags is displayed regardless of whether the tag itself is available in the metadata or not. This problem only occurs if showExif=true and no metadata is available for a given image.

{{ if $showExif }}
	data-description="{{ .Model }} + {{ .LensModel }}<br/>{{ .FocalLength }}mm f/{{ .FNumber }} {{ .ExposureTime }}sec ISO {{ .ISOSpeedRatings }}"
{{ end }}

This results in the following exif display, for images w/o available metadata ('QSS-32_32' is from the description):

A simple solution is to wrap each tag's lookup inside a with statement:

{{ if $showExif }}
	data-description="{{with .Model}}{{ . }}{{end}}{{with .LensModel}} {{ . }}{{end}}<br/>{{with .FocalLength}} {{ . }}mm{{end}}{{with .FNumber}} f/{{ . }}{{ end }}{{with .ExposureTime}} {{ . }}sec{{end}}{{with .ISOSpeedRatings }} ISO {{ . }}{{end}}"
{{ end }}

Wrapping tag lookups inside with statements only displays them if they are available, which results in the following display of the same image above (again note that 'QSS-32_32' is from the description):

Hi

[0]It has 5 steps, yet I don't know where to start before 1 open a terminal in the root folder of hugo-shortcode-gallery. How do I get this folder?

Doing 3 step fails bash: cd: ./example_site: No such file or directory

I guessed and tried /themes/hugo-shortcode-gallery

[0]https://github.com/mfg92/hugo-shortcode-gallery/tree/example_site/example_site

Hi there,
Thank you so much for setting up this gallery. It would be extremely helpful if you could provide a minimal hugo repo with this gallery implemented, as I am experiencing issues making the gallery display properly. I don’t think there is a bug but more about me having missed a crucial step which I couldn’t troubleshoot on my own. Thank you - have added this as a documentation enhancement.

Hello,

I managed to include the gallery into my website and everything is working fine so far (thank you for the great work!).

However, I would like to change (darken) the font color of the filter buttons, as they currently appear with white font on light gray background on my website.

Any idea on how to achieve this?

I am very new to hugo, your help is much appreciated!

At first, thanks for your awesome gallery project.

In general, the exposure time should be expressed in fractions，like 1/100 1/ 320.

As a temporary solution, I set the fraction expressed exposure time in sidecar files.

I installed the shortcode using hugo modules. When I attempt to run the shortcode nothing shows up on the screen. To be fair im a bit new to this.

Here is the error I see in the console


This is he HTML that loads. I can see the picture there.


The gallery is supposed to be between the heading and the social media buttons.

Can anyone please help me?

(first off - i love this tool! thank you so much for making and maintaining it.)

any idea what might be behind this behavior?

basically - the portion of the gallery that is offscreen does not un-blur after scrolling down:

i can force the final row to unblur by:

• first scrolling down the page, then hitting refresh (only works on localhost), or:
• scrolling down, then changing the browser zoom (works on localhost or the live website)

i was able to reproduce this behavior on OS X Firefox and Safari

the problem doesn't seem to be there on mobile (where the gallery is forced into a single vertical column)

here's the code, which is almost exactly your example:

{{< gallery match="images/*" sortOrder="desc" rowHeight="300" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=false previewType="blur" embedPreview=true loadJQuery=true >}}

(in case useful, here is the page in question: https://raw.works/dalle-3-can-almost-spell/)

Hi, awesome short code. It works while using at a regular page, but while using at a blog post or the like nothing appears any idea?

works:
https://github.com/t0rsten/gallerytest/tree/main/content/about

doesn't
https://github.com/t0rsten/gallerytest/tree/main/content/gallery

Hi Matze. Firstly, thank you the help on victoriadrake/hugo-theme-sam#26 . Your shortcode has saved me a lot of time.

I am having trouble with the lightbox and I think you might have the same problem. When I visit https://matze.rocks/images/ and click on the image the lightbox opens but its just blank with no image.

Any idea what the problem is?

If I've a very low number of images, say only one or two, than the images are displayed full size accross the page width even though they should be limited by rowHeight.
Would it be possible that the images always have a height not larger than rowHeight?

Hi,
I'm trying to use the match pattern parameter to only display a subset of the images in a gallery (I want to put a gallery per section of my post).

File structure:

website/
├─ content/
│ ├─ posts/
│ │ ├─ my sample post/
│ │ │ ├─ images/
│ │ │ │ ├─ prefixA-file1.jpg
│ │ │ │ ├─ prefixA-file2.jpg
│ │ │ │ ├─ prefixA-file3.jpg
│ │ │ │ ├─ prefixB-file1.jpg
│ │ │ │ ├─ prefixB-file2.jpg
│ │ │ ├─ index.md

Gallery code used (copied sample)
{{< gallery match="images/prefixA*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" previewType="blur" embedPreview=true loadJQuery=true >}}

I was expecting the gallery to only display the images starting with "prefixA", but it displays all images in the images folder.
Trying different patterns, it seems that irrespective what i put in the match param, all images are selected (even if providing an invalid match pattern)
Patterns tried:

• prefixA*
• images/prefixA*
• invalidMatchPattern

How do i correctly use the match parameter?

I've read README carefully.
And in the chapter Usage Example, it said: The folder must be next to the .md file where this gallery is used in.
So, I'm just taking a chance. 🤡

I want to use this script hugo-picture-optimization to compress the picture. They're a little too big. But therefore, I can only put the picture in /static/images.

Thanks for read :)

CSS3 has built-in support for masonry grid layouts. This could be used to manage the layout of the gallery without JS. As a side-effect this would also solve issues like #35 where automatic crawlers don't find the images because they are loaded dynamically.

masonry-layout is currently only supported in Firefox, but other browsers might follow. We could keep the current approach as a fallback to ensure the gallery looks great everywhere.

I built a quick PoC based on this article and it looks promising. If there's interest to go down this path, I could invest some time to come up with a PR, or also help/review if someone else wants to build this.

It will be very good, if we start versioning code with tags, so we can use this shortcode with hugo modules: https://gohugo.io/hugo-modules/use-modules/#get-a-specific-version

Hi

First of all thank you for providing and maintaining this component!

I was able to setup a gallery but struggle with the layout. I am using the Congo theme and above a certain resolution (width > 1023px) somehow the images of the gallery do not align as intended. Instead of being displayed as a gallery, they are simply displayed one by one below each other and the rowHeight parameter has no effect on the gallery anymore. Below 1024px the gallery works as expected. Any idea what causes this behaviour?

Thanks for your support!