HUGO

Specify meta data (e.g. image) in Category list pages

support
,
#1

Hello, so in baseof.html file i have a code

<div class="page-image-holder" style="background:url('{{.Params.image | relURL}}') center center; background-size:cover;"> </div>

this code takes image param from page md file.

This code also works for category page as i have category index.md file, the issue arises when i go to http://localhost:1313/categories/business/ page. Since this page doesn’t have index.md file from where can i get the image or from where can add image path to it ?

#2

Simply replicate the taxonomy PATH and create an _index.md with the needed parameters, in this case under /content/categories/business/_index.md.

#3

but for every category will have to create _index.md. Since user can add as many categories so it won’t be feasible to create every category’s page.

Any other optimum solution ?

#4

The _index.md is the only documented way to enter custom metadata on Taxonomy lists.

It all depends on your project’s setup.

For example another way would be to specify the image on the main taxonomy list page template by checking the URL.

For example
{{ if eq .RelPermalink "some-category" }}<img src="...." alt="...">{{ end }}

OR

If the image is meant to be extracted and used from the most recent content file of your taxonomy list you can check for its existence and render it with something like:

{{ range first 1 .Pages.ByDate }}
{{ with .Params.image }}...{{ end }}
{{ end }}

The above can also be adapted for Page Bundles and the related Page Resources methods to render an image.

1 Like