Hopefully you will find enough information about how to set images in your blog here. This is an example of a post which includes a feature image specified in the front matter of the post. The feature image spans the full-width of the page, and is shown with the title on permalink pages:

feature-img: "assets/img/feature-img/desk-messy.jpeg"
thumbnail: "assets/img/thumbnails/feature-img/desk-messy.jpeg"

You can also use a thumbnail, a smaller version of the same image to improve loading of the page. The thumbnail will also be used when you share your article on other platform (linkedin, whatsapp, facebook, …).

  • And now it is working

You can also add images aligned in your post using the aligner include. Make sure to separate all of the image path from in a string separated with ,. It by default look into assets/img/ so give the path from there, example:

{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" %}
book-glass.jpeg
desk-messy.jpeg

Here you have two images side by side, but you can set more and set the amount per columns (by specifying the number of columns or let it be automatic using "auto"):

{% include aligner.html images="portfolio/cabin.png,portfolio/cake.png,portfolio/circus.png" column=3 %}
cabin.png
cake.png
circus.png

it also works with only one images, it is made to display it smaller than normally. However you can just use the Markdown way of doing it to get the image normal sized and centered.

# Markdown way (bigger)
![Travel]({{ "/assets/img/pexels/computer.jpeg" | relative_url}})
# Aligner with only One (50% of width)
{% include aligner.html images="pexels/computer.jpeg" %}
computer.jpeg