Skip to main content

Feature Images

View Source Edit this page (external link)
Published:

Feature images in Yore appear as hero banners, thumbnails, and social sharing metadata.

Automatic Detection Link to this heading

When using index.md inside a directory (creating a leaf bundle), Yore automatically detects images with the feature* prefix and uses them as the page's feature image.

For example, this structure:

content/
└── posts/
    └── my-article/
        ├── index.md
        └── feature.webp

will automatically use feature.webp as the hero image, thumbnail, and social sharing image.

Manual Configuration Link to this heading

You can explicitly specify a feature image using the pageFeatureImage parameter in front matter:

index.md
---
title: My Article
params:
  # Specifies the image in `assets/img/07.webp`
  pageFeatureImage: img/07.webp
---
Info

The params field contains theme-specific configuration, not Hugo core settings.

Fallback Link to this heading

The imageFeatured in hugo.yaml is used if the feature image does not exists. The imageSocial in hugo.yaml is a subdivision for meta tags used for social sharing image.

Hero Image Styles Link to this heading

The pageHeroStyle parameter controls how the hero image is displayed. It can be set globally in hugo.yaml or overridden per page in front matter.

index.md
---
title: My Article
params:
  pageHeroStyle: background
---
  • big: Large hero image at full content width
  • background: Full-width background image with text overlay
  • disable: No hero image display (image still used for metadata)

Article Connections

Accessibility settings

Font size