Hugo

All media files are located in static/img folder of the repository. In markdown text link on the image would be: /img/YourImage. Inserting image in markdown have only 2 params image src and alt as:

!['my alt text']('/img/YourImage.png')

If you need some other params like dimensions of picture, you can insert html tags or use Hugo shortcodes. Hugo has some default shortcodes. figure is default shortcode for pictures. For example:

{{<figure src="/img/logo1.png" alt="logo image" height="200" width="200">}}

can bring picture in this format:

logo

For custom shortcodes, put them in repository folder layout/shortcodes and Hugo reads them from there.

Here is Hugo documentation about shortcodes and figure:

https://gohugo.io/content-management/shortcodes/#figure

Custom shortcodes
  {{< box type="warning" title="Warning" >}} message {{< /box >}}

Warning

message

it is custom shortcode. its variable “type” values:[“warning”,“info”,“note”,“hint”]. default value is “hint”;

info

message

note

message

If you need markdown in this box messages change symbols [“<“,”>“] with “%”:

  {{% box %}} `_message_` {{% /box %}}

hint

message

Netlify

In netlifyCMS you can upload images by clicking on media tab:

Netlify Insert image

You can also upload image while inserting image in body of post in Rich text mode. For insert image click on + symbol and then Image. Section with Image and alt text will appear:

netlify add image dialog

Click on Choose an image and you can upload the image from there.