Modify 'Folder-based gallery' by Thomas Sarmis

support
1

Background

I’m very new to Hugo.FWIW I’ve done some HTML by hand,.net, node, wordpress and I’ve experimented with Hexo.Seems like every question I have is breeding more questions… In this question I’d like to ask for assistance to modify my forked gist of the Folder based gallery

I have a Hugo site based on Mainroad theme mostly full of Ipsum except it’s Sandbox which is setup as a leaf page bundle at Homeamation.net

hugo version

Hugo Static Site Generator v0.55.6/extended windows/amd64 BuildDate: unknown

I used the extended version because I was experimenting with academic theme.

Question

my sandbox is setup as;
content/posts/sandbox/index.md
content/posts/sandbox/*.images

The way the original ‘Folder-based gallery’ shortcode is setup depends on a sub directory of ‘imgs’ as my images are in the root of the leaf not only are the images picked up but any other file in that directory such as the index.md. I would like some help modifying the shortcode or it’s definition to pickup the images in the page resources of the ‘sandbox’ using some kind of syntax like;

{{ with .Resources.ByType “image” }}

Is there a way for me to put the .js and .css in the front matter of the page? I currently have it set in the index.md I don’t think it’s a great idea to put it in a page template as it would load unnecessary .js on pages that aren’t using the gallery. tanget alertI I don’t like messing with files in the theme anyway (or perhaps I don’t understand) as it would make updates to the theme difficult overwriting modifications. I would hope that files with the same name could be placed outside of the theme. var and methods with the same name would overide the theme resource or if unmatched name append to the themes resource. But I digress that’s for another thread.

Standards and the future

What gallery projects might be considered a Hugo standard? and/or which are more popular and useful? Might a Hugo core shortcodes one day include a gallery shortcode?

  • hugo-easy-gallery looks pretty good to me, the author is asking for help “looking for people to help maintain this project”… easy gallery looks like it might help out with single images and responsive sizing - a question for another thread…

  • Other galleries and/or blog posts I might find useful?

  • Once I get rolling in production how do I efficiently add images to the posts as I create content with MarkDownMonster, Open Live Writer or probably just vs code ? Is there some kind of build I can kick off that might smush images and/or create thumbnails and such? What might I search on or read up on?

2

Nothing will be considered “standard” until Hugo has a 1 in front of the version number. It’s still 0 — a baby.

On the other side: All you need to do is to manage to update possible changes to a HTML template when something changes in Hugo. All gallery scripts base on a markup that has to come out at the end.

Using Bootstrap 4 it’s as easy as this in a shortcode, when all gallery images are added to the page ressource frontmatter:

{{ $galleryid := .Get "id" }}

<div id="{{ $galleryid }}" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    {{ with .Page.Resources.ByType "image" }}
      {{ range $index, $element := . }}
        <li data-target="#{{ $galleryid }}" data-slide-to="{{ $index }}" {{ if (eq $index 0) }} class="active"{{ end }}></li>
      {{ end }}
    {{ end }}
  </ol>
  <div class="carousel-inner">
    {{ with .Page.Resources.ByType "image" }}
      {{ range $index, $element := . }}
        <div class="carousel-item {{ if (eq $index 0) }}active{{ end }}">
          <img class="d-block w-100" src="{{ $element.RelPermalink }}" alt="{{ $element.Title }}">
        </div>
      {{ end }}
    {{ end }}
  </div>
  <a class="carousel-control-prev" href="#{{ $galleryid }}" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#{{ $galleryid }}" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

But probably I am reading your question wrong.

3

“So many reads, so little comprehension.” - Raising Arizona.

This functionality I wished for already thankfully exists. See; Hugo’s Lookup Order That third read was the charmer.

4

Hugo may be a baby, but it’s a pretty smart / cool baby.

I was actually asking how to adapt a simple gallery to use Page Bundle resources. I’ve subsequently moved on to a bit more in depth project, liwenyip/ hugo-easy-gallery

I particularly like the EasyGallery override of the figure shortcode.It’s also easy to change the behavior of the gallery with a simple shortcode allowing for ‘swipe’ using PhotoSwipe and jQuery.

The author is asking for assistance; " 2019-01-20: I’m looking for people to help maintain this project - e.g. review and approve pull requests, which I no longer have time to do. Please contact me if you are interested. Thanks!" Hopefully the project will survive. I find it useful and well documented.

There is an issue with an as yet un-merged pull request that adds support for Page Bundles. See issue #46

Meanwhile it’s working on my machine. FWIW my testing / sandbox site; homeamation.net