Task 4 - Images & Relative Paths Links

Image Storage

  • Optimal: Use Page Bundles (see previous task)
  • Acceptable: Store images in a common directory and reference them with relative paths (use this if an image is used in multiple places)
  • Not Recommended: Store images in the “static” directory and reference them with absolute paths (e.g., /images/foo.png)

Using Images in Markdown

  • Optimal: Use the Hugo figure shortcode to include images with optional attributes like alt text, title, width, and height.
    {{< figure src="image.png" alt="Description" title="Image Title" width="600" height="400" class="zoomable">}}
  • Acceptable: Use standard Markdown image syntax for simple images without additional attributes.
    ![Description](image.png)
    Note

    Markdown Image syntax results in images that are clickable and open the image file in the browser. This is often not the desired behavior. Use the `figure` shortcode instead and include class="zoomable" if you need to zoom in on a detailed image

If you need to link to different parts of your site, you can use relative paths with Page Bundles.

  • Example: This page bundle is at content/02Hugo/4_images/index.md and you want to link to another page somewhere else in the site, you can reference it’s page bundle path