There are two types of Posts, with and without images. The cleanest
way to have them is to create a directory for those posts that have
images, and put all post’s images in that directory.
Adding posts without images
A post without a cover image should be created with the slug as the
filename inside the directory you want, for example, to create the
you should create the file /content/foo-first-level-section/foo-second-level/page-at-foo-second-level.md
slug will be obtained from post’s filename
title: "Post example without images"
Here I don't use any image!
Adding posts with images
Posts with images can have two types of images:
Displayed at the top section of the post
Used in Facebook’s OpenGraph / Twitter cards metadata (a.k.a.
image that will be displayed when sharing the post in those Social
Should be defined at post’s frontmatter.
Images used along the post content
For example, to create the post
you should create the directory with the slug name and content
inside the directory as an index.md file
All images used by this post goes inside the above directory (/content/foo-first-level-section/foo-second-level/page-at-foo-second-level/)
And slug will be obtained from post’s directory name.
To add the cover image, so it can be displayed by OpenGraph and
Twitter, add the metadata to the resources frontmatter section and
put the image in the newly created directory
The featured image resource name must be cover so it will be
used as the featured image of the article.
Rest of images should be configured in an images array in front
matter, being the first one the featured image. This will be used in
Facebook’s OpenGraph metadata and Twitter Cards image section, so it
is displayed when sharing them.
In images array, the full path after content directory preppended
to image name should be used, as Hugo loads them preppending the
Then other images in same directory and used in content /content/foo-first-level-section/foo-second-level/page-at-foo-second-level/dcu_models.jpg
title: "Post example with images in cover and content"
- name: cover # this should be the name if you want it to appear as article's featured image and used by OpenGraph and Twitter cards
title: "Portrait photograph of Victor Hugo"
params: #can be ommited
license: "Public Domain"
Hey! I have an image that it is not featured, look:
<img class="img-fluid" alt="model diagram" src="dcu_models.jpg" />
Tree directory structure of
would look like: