featured_image needs to be a ressource of that page, i.e. cannot be in a sub-directory.
If I understand this correctly, this is because the list.html template only lists sub-pages with at least one image. This is the “if gt (len $images) 0” condition in list.html, which hides albums with no images (and since pages with only sub-albums still need at least one image – the featured_image – this made sense for me).
So, for my purposes, instead of setting featured_image: DirABA/img_0234.jpg in DirAB/_index.html (which does not work), I copied DirAB/DirABA/img_0234.jpg to DirAB/feature.jpg, which automatically makes it the featured image (first/only image) and enables the display of DirAB in the list.
This can be seen in the “Animals” album on the Example site: the reptile image is only in the content/animals folder (which is a list of albums) and not shown in any other album.
I played around with a list.html which can display albums and photos (by adding the code from single.html to list.html). However it is not trivial to solve since this would result in the Gecko image from the “Animals” album list to be displayed below the Animals album list, which might not be desired in every case…
This could be solved by separating featured images and album images (e.g. by moving all album images to an “images/” subfolder and modifying list.html), but this would make several things much more complicated…
Wow… It came to my mind that Hugo might not be the right tool for this – however other solutions generate (and maybe also pre-generate) image variations of all images, and in some cases also pre-render HTML pages, so why not completely render everything
However for online galleries (which in many cases only show a very limited “best of” set of each event or topic) I stick to use 1600x1600 exports. I don’t want the site to grow huge and I don’t want clients to be able to download the full-resolution originals…
OK; I think it makes sense to not include “empty” directories that does not hold a (featured) image and it is an easy work-around for me just to add the featured image directly to those empty directories that just hold other directories. And yes, I can see how you made use of the feature in the example site.
I will just add featured files (and looking at the code I may consider naming them something with feature also, in case I end up with multiple images.
I noticed that the total count in a parent directoriy can be somewhat off when empty directories are left out; right now (with the missing featured images) I have one directory that says it holds 119 images in 4 subdirectories, but when you enter it, there is only one with 36 images (the others are again directories that hold no images directly but more subdirectories – but this problem will go away when adding featured images.
Edit: On the use of hugo for large galleries, I think it’s just fine. My old setup also took a lot of time to render, and as it was some interactive java thingy, it was a bit more painful since it had to run with the GUI open. I strongly prefer something that can be run with a command line, in the background even if it takes a long time (screen/byubo is really good for that). And it’s better just to render everything at once instead of trying to do it on-the-fly, slowing down the viewing process.
Yes, I also started to look a bit at the code and I agree that it’s then more tricky to set up. In my case, it would be really nice to be able to do this; I often have directories of selected files and then my visitors/customers/uses also have the option to look at “alternatives” in a subfolder that could still be of use (typically the “best” picture is in the root folder and then images with e.g. alternative facial expressions are in a subfolder).
One ide would be to either using a naming convention to hide images, e.g. if they start out with an underscore _ or are called featured_image.jpg or some such they would be hidden. It could also be an option when you define the featured_image (i.e. name and true/false to keep it in also, with default being to keep it in) or even a property you can set on a folder that either all images are included or none are (i.e. a “render the single page content anyway in this folder”).
This way all albums also display all of their images. Now to hide images (e.g. which should only be used as album thumbnails), you can move them to a subfolder (like images/) and reference them like featured_image: images/thumbnail.jpg. As images/ does not contain index.md nor _index.md it is not seen as page by Hugo but as part of the current page bundle.
However now listing empty albums gets more tricky: we cannot list all pages (because then, also real “pages” like “About” or “Imprint” get listed as empty albums). I cannot think of an elegant way to solve this – maybe this is the point where it would make sense to start using sections, which I always wanted in order to avoid complexity…
I think this would work in my case (and I also tried to do something similarly overriding lists and single and also refactoring into a gallery.html file as a partial, but it’s better not having to override and keep track of changes, of course)! I’ll pull the latest version from the main branch, it looks, and add the line to list.html. Thanks a lot!
As for listing empty albums, one idea could perhaps be to include albums that either contains images themselves OR have subdirectories that aggregated also hold images. This way, the about.md etc would not be listed as an album page whereas those that truly hold images do?
OK, so I worked a bit more on this. One problem I had was that images in a subdirectory of a non-leaf node are NOT part of the resources belonging to that node, so I wasn’t able to access featured images in non-leaf nodes. Also, the count was somewhat off.
I ended up cloning the repo and created a new branch that is controlled by two parameters that can be defined pr site (in the params part of hugo.toml) or for each node. These are nodeGallery and hideFeatured.
If nodeGallery is true, then non-leaf (~section) nodes also include their images – if not, the behaviour is as before.
If hideFeatured is set to “always”, the featured image will be excluded from the gallery. If set to “never” it will be included. If set to “auto” (recommended) then non-leaf nodes with only one (featured) image will not show the featured image, but leaf nodes and non-leaf nodes with multiple images will show all of them.
I’ll create a PR and you can the decide if this perhaps should be merged back into the main branch or if you consider this too exotic for more general use Most changes are minor; one file look like it’s changed a lot but most of this is due to changed indentation caused by a higher-level conditional. There is also a little bit of re-factoring to avoid replicated code in one place.
Just to report back after more trial and error: The README/documentation is missing steps. I would recommend the following!
1.) Eliminate the bit about using it " As a Hugo Module" or “As Git Submodule” – or at least add explanation and context around each one. What commands are necessary for each case? What should the directory structure all the way to the top look like, in each case? Beginners don’t know the difference between the two, and neither one is a clear analog to the Ananke theme used in the standard Hugo tutorial: Quick start | Hugo. In the absence of this kind of similarity, it’s best to explain all the steps from the start, or just omit the choice altogether. It just creates confusion, and makes me try both approaches half-heartedly!
2.) Starting by building with the exampleSite is great, but it’s nested inside your theme GitHub. it should be a separate GitHub project to make it a true analog to the site that people adopting the theme want to build. The README inside the exampleSite subfolder should be the main README and the best way is to uplift this into its own GitHub project/repo so that people don’t try running all these steps at the theme level: https://github.com/nicokaiser/hugo-theme-gallery/tree/main/exampleSite
3.) if you try running hugo server -D from the top level, it works to some degree but shows a white page, or just the header hamburger menu. Treating the theme like the site is a common enough mistake that your documentation should include a troubleshooting section that addresses what people should do if they don’t see the Gallery site, but instead a blank page, or a 404, or the number of other things you see beginners like me and others get into on StackOverflow, these forums, etc.
4.) If you keep exampleSite nested inside the theme project, add cd exampleSite into the README before running hugo server -D to make it explicitly clear that people should be running hugo on the site, not the theme.
Just some suggestions! Documentation right now could save people hours of their lives if it contained more of a beginner-friendly explicit start-from-scratch guide instead of assuming a bunch of knowledge or steps heading into it.
Another issue – if i add my own folders of JPG images, the albums show up in the site, but the count is 0 images. Going into each album doesn’t show any images at all.
It’s not clear from the documentation what kinds of images they need to be.
If they’re already JPG, do we need to do anything to those images?
There’s so much focus on EXIF in the hugo.toml, but I just have images. Not a photographer, and it’d be helpful to have some comment or mention in the documentation about images that just don’t work.
I thought this is pretty clear in the Readme documentation that „branch bundles“ (directories with sub-directories and an _index.md file) only display the album list and no photos. Albums (leaves, with an index.md) display all photos.
But I will try to enhance the docs about how this works.
really nice! but would be really helpful if it had some design variations such as I am trying to make a grid with 1 image to get 1 column and then 4 images to get 1/4 size of the main image in the second column and display the total amount of images on the last image this is for the single page. Something like this:
Any idea on how to quickly achieve this with your provided repo? how can I keep the image opening as you have but change just the layout from single image to 5 and show the rest on click with photoswip
For simplicity reasony this theme only includes the standard Flickr algorithm for creating a justified gallery. This is done by instantiating the fjGallery object in main.js. In order to create a different layout, you might need to change the library used to create the gallery, but I have no idea which one could be helpful for your layout.
I know there are quite some libraries for nice gallery layouts (although presumably for React or Vue.js), but I did not further investigate into this.
I ran into this issue at the very beginning with hugo server,
Error: add site dependencies: load resources: loading templates: “/home/user/dev/cwestfotography.com/themes/gallery/layouts/partials/menu.html:11:1”: parse failed: template: partials/menu.html:11: function “page” not defined
Do you think you would be able to render and play GIFs? I have always love story telling with galleries similarly to this person: http://jack.ventures/
The gallery you mentioned contains videos, not GIFs, or am I missing something?
I’m not sure if Hugo is the right platform for this. Delivering videos needs a different approach and inftastructure… (Correct me if I’m wrong, but I don’t have any experience with delivering videos from Hugo).
Most changes are minor; one file look like it’s changed a lot but most of this is due to changed indentation caused by a higher-level conditional. There is also a little bit of re-factoring to avoid replicated code in one place.
