Automating inserting markdown of all images in a subfolder?

support
1

Hi guys, is there a way to automate inserting all images in a subfolder to a post? maybe using shortcode?

folder structure:
static/img/album1
static/img/album2
static/img/album3

so lets say in a post.md, instead of manually writing

![](/img/album1/001.jpg)

![](/img/album1/002.jpg)

![](/img/album1/003.jpg)

![](/img/album1/004.jpg)

we just write

{{< images in album1 >}}

and it automatically creates markdown for all the images in that folder.

is it possible?

2

Check out https://gohugo.io/content-management/page-bundles/ and https://gohugo.io/content-management/page-resources/. It isn’t a shortcode, per se, but you can do things like drop all the images in a folder and have a gallery created.

3

short sample

I use ./gallery for the pictures and use this in my single template

{{range .Resources.Match "gallery/*" }}
		<img src="{{ .RelPermalink }}"  /> 
{{ end }}
2 Likes
4

@ju52 thanks for example, but doesn’t work as shortcode.

I ended up writing it myself. here is it as a shortcode.

add these to album.html in the shortcode folder:

<!-- put bunch of photos in /static/img/albumName -->
<!-- and insert shortcode {{< album albumName >}} in blogpost.md -->
{{ $albumUrl := print "/static/img/" ($.Get 0) }}
{{ range readDir $albumUrl }}
    {{ $imgURL := print "img/" ($.Get 0) "/" .Name | absURL }}
    <p><img src="{{ $imgURL }}"/></p>
{{ end }}
5

@Hakxslo756 the reason @ju52’s shortcode didn’t work for you is because your images are under static/.

The disadvantage of keeping your images under static/ is that you cannot do image processing on them, e.g. Resize, Fit, Fill. (Obviously not everyone needs those features, though).

Using your shortcode as an example, let’s say you wanted to resize all images to 400px width, then link to the original. You could do this:

{{ $page := .Site.GetPage "/img" }}
{{ $images := $page.Resources.ByType "image" }}

{{ range $images }}
  {{ $original := . }}
  {{ $resized := .Resize "400x" }}
  <p>
    <a href="{{ $original.Permalink}}">
      <img src="{{ $resized.Permalink }}"/>
    </a>
  </p>
{{ end }}

This assumes your images could be under a page bundle at content/img, e.g.:

├───content
│   └───img
│           index.md
│           nasa-1.jpg
│           nasa-2.jpg
│           nasa-3.jpg
6

thanks. i understand the benefit of using resources as opposed to raw files now.
my original question was to insert all files in an arbitrary subfolder, which enables decoupling of post and its images.

so i can do hugo new blog/blog-name.md and then insert the shortcode {{< album albumName >}} after writing introductory texts.

I think yours and @ju52’s solution is great, but for a different usecase.

7

How can I ignore a file (e.g. “.DS_Store”) when using this shortcode?