Post Images

Add graphics to posts without touching an image editor.

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.

Be Creative. Photo:
Be Creative. Photo: AK¥N Cakiner on Unsplash

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. Bundle image and content in a directory 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.

That’s it! After Dark does the rest.

For help understanding bundles see Page Bundles in Hugo.