Hugo - Medias

All right, now that we have the text part completed, it's time to move on to media work stuff like picture, song, file and video. Based on specifications here and here, we can do it in 2 ways:

Static files - which is to create the necessary folders and place them insides, just like what we did for CSS and JS in Static Files checkpoint.
Page Resources - which is to serve the media files as a page resources

In this checkpoint, we'll explore both ways, #2 first since we already covered Static Files.

Objectives

Host the media (image, sound, video, file) using Page Resources path.
Host the media (image, sound, video, file) using Static Files path.

Prepare the Media Files

For this checkpoint, you can download any (free) media files from the following link, minimum 1 for each:

Music - https://www.youtube.com/audiolibrary/music
Picture - https://www.pexels.com/
Video - https://videos.pexels.com/
File - any files that is not the above.

Page Resources: Create a media folder inside Content

Let's create a content folder called medias and place all the files inside there. You can organize accordingly.

$ mkdir -p content/medias/images

$ mkdir -p content/medias/videos

$ mkdir -p content/medias/audios

$ mkdir -p content/medias/files

Place them correctly inside each folders. In this example, I copy a photo.jpeg, video.mp4, song.mp3, and file.bash from my desktop into the respective folders.

Page Resources: Verify The Resources

Now visit the pages to review your resources. It must contain the file name. These should be the sites:

http://localhost:8080/content/medias/images/<filename>

http://localhost:8080/content/medias/videos/<filename>

http://localhost:8080/content/medias/audios/<filename>

http://localhost:8080/content/medias/files/<filename>

From my example (it may not work properly since you may have different filenames), my links are:

http://localhost:8080/medias/images/photo.jpeg

http://localhost:8080/medias/videos/video.mp4

http://localhost:8080/medias/audios/song.mp3

http://localhost:8080/medias/files/file.bash

You should be able to view all the files (or probably being prompted to download them) depending on the browser.

Page Resources: Use Them

Now that you have the the URL, you can use the relative path to use the page resources. One good example in Markdown is:

![image-alt-text](/medias/images/photo.jpeg)

For normal linking, it is:

[file.bash](/medias/images/file.bash)

If you can use them, you're doing it correctly. Keep in mind that for video and audio media files, Markdown does not support them. You'll need to revert back to HTML5 media player to display them.

Another way is hosting the audios and videos on Vimeo or Youtube and then use the built-in shortcodes to present them.

If you're able to display image or link to your file, you're done with the Page Resources.

Static Files: Create Media Resources

Now that we completed our exploration with Page Resources. It's time to explore the Static Files path. Move the medias folder from contents static folder. You can use the following command: