New "Google Photo style" gallery theme/module

Showcases
1

That is also my naming standard for GitHub repositories. Adding the deluxe suffix automatically makes it much better :slight_smile:

I have wanted a gallery theme to to show off my photos similar to how Google Photos does it. I first tried to integrate with Google Photos, but failed miserably, so I decided to go with what I know: Hugo’s image processing with a little JS on top.

I’m pretty happy with the result, this is something that I can use.

The theme is currently a little undocumented. Also, if you’re on desktop, there are some key bindings when viewing the photo in the lightbox: arrow left/right and escape (close).

Have fun.

20 Likes
2

Good One, I hope it will come to the level of photswipe as touch on mobile and left/right arrow navigation on desktop is really important for better user experience. Not sure how less or more code this generates but it is really good for the 1st version.

3

I’m pretty happy with this as is so I would not hold my breath for much improvements (from me, anyhow). There are simple swipe detection (swipe up or down to close) and left/right key bindings.

Just to be clear: The main feature of this gallery module is that it scales incredibly well to galleries with, say, thousands of photos. Which I have hard time finding good examples of photswipe doing.

1 Like
4

Question then is… how do you store all those photos, at what resolution, online? github? other host?

5

{{/* 20, 100, 250, and 500 height */}}
{{ $m := dict
“20” (.Resize “x20 webp”)
“100” (.Resize “x100 webp”)
“250” (.Resize “x250 webp”)
“500” (.Resize “x500 webp”)
}}

{{ return $m }}

This would probably save on size

Also this is amazing and is so fast

1 Like
6

I store them on Amazon S3 in it’s orignal size (which in the “demo” site is 1600px wide) + (height px) 20 + 100 + 250 + 500.

My current workflow is:

  • Create album(s) in Lightroom and publish those whenever
  • Then build with Hugo with the Lightroom album(s) mounted into the gallery Hugo project.
  • I publish to AWS S3 (I use s3deploy, but hugo deploy should also do the same trick).
  • Currently I have about 350 photos, which gives me:

Total Objects: 1789
Total Size: 140.0 MiB

My take on this is that not everything need to live on GitHub and be built on a CI server. Some stuff can be built where the data lives.

I have not done the math, but the above is still in the “cheap department” when it comes to storage/hosting cost (I think I currently pay $0.023 per GB/month in storage price).

@devsr-gt you are right about the webp thing, that would save some, but I I decided to do it simple in its first iteration.

1 Like
7

Thank you for this! :slight_smile:

Did a quick deploy: https://images.youronly.one/

  • Images: 804
  • Build time: 66959 ms
  • Site hosted at Gitlab (source: YourOnly.One / site.img · GitLab )
  • Images on Gitlab (separate repo: YourOnly.One / images · GitLab )
  • Site deployment via Cloudflare Pages
  • Image types included: jpg, webp, png, apng
    • For .apng, I had to change the mime type (in Hugo config) to image/png so the resize will work for the thumbnail (but once opened, it still animates). (Probably not ideal.)
  • Pageinsight speedtest: mobile is 99; desktop is 94.
1 Like
8

But it caches well if you store the cache from build to build …

1 Like
9

Yep. Sadly not possible with Cloudflare Pages … they rebuild the entire instance. I hope they change it one day.

1 Like
10

it feels very slow when scrolling down the page to see other images

11

can this make use of the hugo webp image format and thumbnails with lazyload data to give it a much faster feel.

13

this is neat

Also you take very nice pictures

1 Like
14

Looks very good! Already have an idea to use this for myself :smiley:

1 Like
15

And now also with EXIF support:

1 Like
16

See GitHub - bep/gallerydeluxe_starter: Starter project for https://github.com/bep/gallerydeluxe for a template project.

1 Like
17

First of big Thanks for your wonderful work @bep . Just a dummies question if I want image gallery to be loaded from “/content/images/2022/great_lakes” how I do that ? i tried to create this directory with index.md and bunch of jpg file. But failed

18

See gallerydeluxe_starter/index.html at main · bep/gallerydeluxe_starter · GitHub

Setting sourcePath to images/2022/great_lakes should do the trick for you.

2 Likes
19

Thanks a ton

20

This is really great, how do I use this with a theme, such that I can have the theme main page, blog posts in content/posts, and then an image gallery in /gallery or the like? I’ve tried a bunch of configurations, but none of them worked how I expected. Thanks!