Hugo Ananke theme how to add hero images and custom CSS

Using Themes
1

Hi I’m using Ananke theme and having trouble with changing the hero image of the site and adding custom CSS.
It seems like Hugo just had some updates and the Ananke have not updated the instructions accordingly. Like for example, they says: " You’ll find a file called config.toml" but nowhere do I find that file, only hugo.toml, and I suppose it’s a replacement for config.toml.
And when I write, for example, in the hugo.toml (note that I have created the assets/ananke/css/custom.css as instructed):
[params]
custom_css = [“custom.css”]
It just does not work. The CSS in the custom file does not override the default
Also, how can I add a featured image in the main page? So far I can only add the featured image in individual post

2

For versions v0.109.0 and earlier, the site configuration file was named config. While you can still use this name, it’s recommended to switch to the newer naming convention, hugo (e.g., hugo.toml, hugo.yaml).

That works fine for me. Check the bottom of the published CSS file to see if your custom rules are present.

Per the theme’s documentation, the simplest approach is to place a file named “feature” or “cover” in the root of the content directory (e.g., feature.jpg, cover.png).

For additional questions about the Ananke theme, please visit:
https://github.com/theNewDynamic/gohugo-theme-ananke/discussions

3

This might be one of the “did you restart” things… If you start hugo server, then add the file, it will reload, but not find the file. Restart the server and see if that fixes the issue. The feature itself works. Your [params] section (table in toml) might not be in the proper place in the configuration. Show your full configuration.

“The CSS in the custom file does not override the default.” - CSS has something called “specificity”. It could be that your override is not specific enough to override already established rules.

That’s three possible reasons of why it won’t work. With more information we can dive deeper.

The sample homepage has this frontmatter:

---
cascade:
  featured_image: '/images/gohugo-default-sample-hero-image.jpg'
---

Which sets the featured_image for all subsequent pages. This will probably be changed in the future because Hugo now suggests to do this (which is identical, but more verbose), so try this first:

---
cascade:
  params:
    featured_image: '/images/gohugo-default-sample-hero-image.jpg'
---

Then in each subsequent content file you can set an individual featured_image per file in their respective frontmatters. The path is absolute from the website root, so putting it into static/images/gohugo-default-sample-hero-image.jpg will do the trick.

The way GoHugo is configured is not theme specific. I suggest you read into the topic at Introduction - especially the parts about configuration file and/or configuration directory. It’s very powerful in the ways you can configure various environments, but the result of that is that you can configure the same thing in different places.