Use Content Adapters to get several images

support
4

I would approach this by organizing images by SKU, eliminating the need to specify image paths in front matter. I think this would be much easier to maintain.

structure 
assets/
├── images/
│   └── products/
│       ├── skuwf/
│       │   ├── 01.jpg
│       │   ├── 02.jpg
│       │   └── featured.jpg
│       └── skuwp/
│           ├── 01.jpg
│           ├── 02.jpg
│           └── featured.jpg
└── sass/
    └── main.scss
content/
├── products/
│   ├── _content.gotmpl
│   └── _index.md
└── _index.md

data/products.json 
[
  {
    "sku": "skuwp",
    "name": "Window Pane",
    "description": "The best **window pane** in town.",
    "price": 99,
    "categories": [
      "Windows"
    ]
  },
  {
    "sku": "skuwf",
    "name": "Window Frame",
    "description": "The best **window frame** in town.",
    "price": 42,
    "categories": [
      "Windows"
    ]
  }
]

content/products/_content.gotmpl 
{{ range site.Data.products }}
  {{ $content := dict "mediaType" "text/markdown" "value" .description }}
  {{ $params := dict "sku" .sku "categories" .categories "price" .price }}
  {{ $page := dict
    "content" $content
    "kind" "page"
    "params" $params
    "path" .name
    "title" .name
  }}
  {{ $.AddPage $page }}
{{ end }}

layouts/products/single.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>

  {{ with resources.GetMatch (printf "images/%s/%s/featured.*" .Section .Params.sku) }}
    {{ with .Resize "300x" }}
      <div class="image image-featured">
        <img src="{{ .RelPermalink }}" alt="{{ $.Title }} featured image">
      </div>
    {{ end }}
  {{ end }}

  {{ range resources.Match (printf "images/%s/%s/*.*" .Section .Params.sku) }}
    {{ if not (in .Name "featured") }}
      {{ with .Resize "300x" }}
        <div class="image">
          <img src="{{ .RelPermalink }}" alt="{{ $.Title }}">
        </div>
      {{ end }}
    {{ end }}
  {{ end }}

  {{ .Content }}
{{ end }}

Notes:

  1. In your data file, use an array for your categories, even if there’s only one category.
  2. Always use lower case when naming directories and files.
  3. The non-featured images will be ordered by filename. You can name them however you’d like, but I would prefix with something like “01” to control the rendering order.

Try it:

git clone --single-branch -b hugo-forum-topic-51724 https://github.com/jmooring/hugo-testing hugo-forum-topic-51724
cd hugo-forum-topic-51724
hugo server

Remember that you can include markdown files in the products directory, and they will be merged with the pages created by the content adapter to form the page collection. This could be used to temporarily add a product to the site until you have time to update the data file.

3 Likes