Post Images

Add large hero images without touching an image editor.
Map image
Sample image placement. Not the real deal.

Add visual appeal to your posts with post images. Post images appear above post content and leverage Hugo Image Processing and Lazy Loading to provide fully automatic, lazy-loaded responsive images with LQIP and built-in art direction.

Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:

  1. Group image and content in a Page Bundle as shown below.
  2. Update post Front Matter as described below.

An example page bundle might look like:

├── archetypes
├── content
│   └── post
│       └── secure-your-digital-life
│           ├── images
│           │   └── florian-klauer-119557-unsplash.jpg
│           └── index.md
├── layouts

With a header image specified in index.md:

[[resources]]
  src = "images/*119557*"
  name = "header"
Tip: Orientation is not significant. For optimal display use larger images.

Add an image caption showing the image title:

[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening" # adds image caption

Add Structured Data using Resources Metadata to improve accessibility:

[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening"
  [resources.params.meta]
    description = "Light trails depicting speed" # adds alt text and image meta
    creator = "Marc-Olivier Jodoin" # updates caption and adds image meta

Continue adding metadata to improve accessibility:

[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening"
  [resources.params.meta]
    description = "Light trails depicting speed"
    creator = "Marc-Olivier Jodoin"
    sameAs = "https://unsplash.com/photos/NqOInJ-ttqM/" # also updates caption
    license = "https://unsplash.com/license" # attribution not required
    contentLocation = "Ottawa, Canada"
    keywords = ["light trail", "building", "speed", "night"]

Supported metadata in examples above. Adjust display using Custom Styles.