Images and js

By: Dave Walsh

   2017-08-23      hugo · images · static content      hugo · images, js, static content      hugo zero to hero

Estimated reading time: 2 minutes

Using Images and Javascript - Basically any static content.

Nearly all content is enhanced when accompanied by informative or supportive images, videos or animations. There can be added easily to any page:

Where to store them

You store all of your static content such as images, css, js, videos etc in the static folder.

How to use them.

They can be used in the content files by:

1. create a folder in the static directory to contain all of that type of content e.g. an img folder for all images or a js folder for javascript files. (we will use an image as it is easier to see the results).
2. Add your image to the folder (using your file manager of your machine)
3. In your content page in the position you want to include the image, provide the path to the image using ![image alt text](/img/my_img1.jpg).

The image path needs to be relevant to the outputted path and not the development path, so if you added your image and it has a path of /static/img/img1.jpg in the dev then you would use a pth of /img/img1.jhpg in your content page as hugo will copy this image to public/img/img1.jpg which makes sense although the actual path is static/img/img1.jpg.

NOTE The markdown preview won’t be able to show the image!

• an alternative method is to add images using the html img tag

<img class="can-add-class" src="/img/img1.jpg" />

The bonus to this method is that you have the full control so you can resize etc.

<img src="/img/img1.jpg" width="200px" height="auto" />

Note that these static files can be added to other pages other than just content pages. so if you want images, js or css files linked to the header then the process is exactly the same.

---