fr1nge.xyz/themes/after-dark/docs/content/feature/post-images.md

+++ title = "Post Images" description = "Add large hero images without touching an image editor." categories = ["experience"] tags = ["performance", "imaging", "graphics", "posts"] features = ["code highlighter", "snippets", "related content"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

{{< figure src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" alt="Map image" lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" caption="Sample image placement. Not the real deal."

}}

Add visual appeal to your posts with post images. Post images appear above post content and leverage {{< external href="https://gohugo.io/content-management/image-processing/" text="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 {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundle" />}} as shown below.
2. Update post {{< external href="https://gohugo.io/content-management/front-matter/" text="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"

{{% hackcss-alert type="info" %}}Tip: Orientation is not significant. For optimal display use larger images.{{% /hackcss-alert %}}

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]({{< relref "structured-data" >}}) using {{< external "https://gohugo.io/content-management/page-resources/#page-resources-metadata" "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]({{< relref "custom-styles" >}}).