Initial AD port

2021-04-26 18:26:42 +01:00
parent 6911ce346b
commit 7e7773258a
408 changed files with 17799 additions and 172 deletions
--- a/themes/after-dark/docs/content/feature/post-images.md
+++ b/themes/after-dark/docs/content/feature/post-images.md
@@ -0,0 +1,87 @@
+++
+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" >}}).