Summary Images

Each post can have a cover image associated with it. This image is used in the summary view of the post. You can also display it on the single post page by setting the showSummaryCoverInPost parameter to true.


---
cover: /img/build-a-chrome-extension-with-figwheel-main.png
---

Tip

For a better visualization, it’s recommended to set a cover image for each post (although it’s not mandatory). I personally go to Unsplash or Pexels to select covers (choose the small size).

If you don’t specify a cover image, Dream will use one of the predefined images as a placeholder in the summary card. To disable this behavior, set noDefaultSummaryCover to true.

Image Optimization

Important

Hugo >= 0.97.0 is required.

Dream will transform summary images to webp format automatically if you are using page bundles to organize your posts. This will make the first load of your site faster.

The way it works is that Dream will look for the presence of the specified cover image in the page resources . If it exists, the image is processed.

For example, you can organize your posts like this:


content
├── posts
│   ├── post-1
│   │   ├── index.md
│   │   └── cover.jpg

Then in the front matter of index.md:


---
cover: cover.jpg
images:
  - cover.jpg
---