Hugo + netlifyCms image Handling and Shortcodes

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:

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 >}}

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

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

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

Netlify

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

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:

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