"Hero Images" on website's front page only (with carousell - rotates several images)

Using Themes
1

(I looked at an older thread about website “Hero Images”, but it’s 6 years old now, and I’m pretty sure it’s out of date.)

I’ve installed Hugo 0.165.0, current Ananke theme.

I want some custom front page behaviour, to show a unique, static page (showing images, text), but still have it be all styled up in the ananke theme’s CSS.

My understanding is that I can override the default front page behaviour my making a file “layouts/home.html”:

I can add some basic content there, but it’s not home.md! home.html is honored (has no theme CSS styling in the body), but home.md is ignored (.md files gain the styling).

Is there some magic way to bestow the styling?

2

I’ve discovered:

3

The front matter “featured_image” var mentioned here:

…doesn’t seem to work. I’m putting the images in /static/images, then referencing them with a pathname as follows in the front matter of a given /content/some_file.md:

featured_image = "/images/hero_test.jpg"

The image isn’t found. If I put the images in /assets/images, the image isn’t found there either.

4

I’m skeptical that this documentation is up to date:

…when it comes to a given page’s front matter setting the vars “images” (an array of images), or “featured_image” (a single image, isn’t an array)

No image is ever found/displayed, which is specified for either of these vars

5

The example site shows some images, did not find a source here at a one shot view. but it’s generated with 161, so your hugo version should not be the issue.

Ananke Repo: has an issue tracker, you can check and add to Issues · gohugo-ananke/ananke · GitHub or the to the discussion.

Following Requesting Help I would say this is a typical thing where a link to your repo will be best. Post a link to the repo and the affected page where you expect something that’s not showing up.

whats the carousell in your posts title.? a third party library?

6

I was hoping/expecting that this front-matter “images” var (which is an array with multiple images) would show the images in a carousell-like manner. I would prefer it’s implemented with CSS or HTML, eschewing Javascript if possible, and especially eschewing node.js