mfg92 / hugo-shortcode-gallery Goto Github PK
View Code? Open in Web Editor NEWA theme component with a gallery shortcode for the static site generator hugo.
License: MIT License
A theme component with a gallery shortcode for the static site generator hugo.
License: MIT License
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.
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
[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,can resources load remote images url?
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.
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?
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.
(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:
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/)
Rebuild failed:
"/home/languitar/src/hugo/content/portfolio/landscape/index.md:11:1": failed to render shortcode "gallery": failed to process shortcode: "/home/languitar/src/hugo/themes/hugo-shortcode-gallery/layouts/shortcodes/gallery.html:144:35": execute of template failed: template: shortcodes/gallery.html:144:35: executing "shortcodes/gallery.html" at <$original.Fit>: error calling Fit: image "/home/languitar/src/hugo/content/portfolio/landscape/gallery/landscape-13-4x2.jpg": png: invalid format: invalid image size: 1x0
This is landscape
{{< gallery match="gallery/*" rowHeight="250" margins="3" resizeOptions="1200x1200 q90 Lanczos" previewType="color" embedPreview="false" thumbnailHoverEffect="enlarge" >}}
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!
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 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"
>}}
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):
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?
I get any empty page trying to add the shortcode to _index.md
. Is this by design?
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:
How do i correctly use the match parameter?
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, 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
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.
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.
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.
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.
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
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!
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
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 :)
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β¦
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?
At first, thanks for your awesome gallery project.
In general, the exposure time should be expressed in fractionsοΌlike 1/100 1/ 320.
But when I used Hugo command to generate the static pages, the exposure time expressed in decimals.As a temporary solution, I set the fraction expressed exposure time in sidecar files.
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 >}}
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!
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!
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.
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.
EDIT: posted in the wrong place, sorry to waste your attention. i don't see how to delete this, so just closing.
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:
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!
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?
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.
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?
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 ?
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
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
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
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!
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?
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:
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.