88 lines
3.1 KiB
Markdown
88 lines
3.1 KiB
Markdown
+++
|
|
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](../lazy-loading) to provide fully automatic, lazy-loaded responsive images with <abbr title="Low-Quality Image Placeholders">LQIP</abbr> 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`:
|
|
|
|
```toml
|
|
[[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:
|
|
|
|
```toml
|
|
[[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:
|
|
|
|
```toml
|
|
[[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:
|
|
|
|
```toml
|
|
[[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" >}}).
|