Hugo theme Stack

Writing

Stack uses Hugo's Page Bundleopen in new window feature to manage post images and optimize them.

The featured image of each post must be placed under the same folder as the Markdown file, as the example below:

---
title: "Random post title"
description: "Lorem Ipsum"
date: "2020-08-10 01:00:00+0200"
slug: "example-post"
image: "cover.jpg"
---
1
2
3
4
5
6
7

image slug is used to specify the filename. The folder structure should be like:

+---Example post
|       cover.jpg
|       example_image.jpg
|       index.md
1
2
3
4

Although the featured image could be an external image, it's not recommended because Stack won't be able to get it's width and height attribute, nor generate appropriate thumbnails.

Insert image

It's recommended to insert post images in the same way, using the Page Bundle feature. By doing that, Stack can generate different image sizes and delivery the appropriate one using srcset feature from HTML5.

Also, the image's width and height attributes are added automatically to avoid the layout shift.

See /layouts/_default/_markup/render-image.html

For example:

+--- Example post
|       cover.jpg
|       Design-V1.jpg
|       Design-V2.jpg
|       index.md
1
2
3
4
5

[index.md](http://index.md) content:

---
title: "Example post"
description: "Page description"
date: "2020-08-10 01:00:00+0200"
slug: "example-post"
image: "cover.jpg"
categories:
    - Blog
tags:
    - Hugo
    - Stack
---

![Image 1](Design-V1.jpg)   

![Image 2](Design-V2.jpg)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

The synaxis used to insert gallery comes from Typelogopen in new window. Thanks to Leptureopen in new window for permission.

![Image 1](https://image/src1) ![Image 2](https://image/src2)
![Image 3](https://image/src3) ![Image 4](https://image/src4)
1
2