Embedding Images in Hugo Blox

Images are essential for creating engaging, visually appealing content on your Hugo Blox site. Whether you’re embedding images in blog posts, adding banners to pages, or setting cover images for social media, Hugo Blox provides versatile tools to enhance your content. This guide explains how to effectively incorporate images into your site to boost engagement and improve the user experience.


Embedding Images in Content

Embedding images directly in your Markdown files is a simple way to add visual elements like illustrations, diagrams, or screenshots to your content.

Markdown Syntax for Embedding Images

Hugo Blox supports standard Markdown syntax for embedding images:

![Alt text](https://example.com/path/to/image.jpg)

renders as:

Example Image

Alt text

Always include alt text for accessibility and SEO.

Image source

Use a valid URL or local file path.

This syntax will display the image from the specified URL with an optional alt text, which is essential for accessibility and SEO. For more advanced options, refer to the Hugo Blox Docs.


Image galleries are a great way to showcase multiple images in an organized and visually appealing format. Hugo Blox allows you to create galleries using shortcodes.

To create an image gallery, you need to use the galleries shortcode. First, ensure the gallery shortcode is available in your Hugo project. If not, you can create it by adding the necessary code to layouts/shortcodes/galleries.html. This shortcode uses the Nanogallery library to handle the gallery functionality.

Once the shortcode is set up, you can add images to your gallery using the following syntax:

{{% galleries %}}
{{% gallery src="/path/to/image1.jpg" title="Image Title 1" %}}
{{% gallery src="/path/to/image2.jpg" title="Image Title 2" %}}
{{% gallery src="/path/to/image3.jpg" title="Image Title 3" %}}
{{% /galleries %}}
  • src: The path to the image file.
  • title: A descriptive title for the image.

Output Example

The gallery will display all the images in a grid format, with titles shown below each image. This is perfect for portfolios, blog posts, or any content requiring multiple images.

For more details, refer to the Hugo Shortcodes Guide by Atharva Shah.


Setting Page Cover Images

Cover images (or featured images) are used to represent the entire page and are often displayed as thumbnails or previews when the page is shared on social media or listed in search results. An example of a cover image is the large image at the top of a blog post or the thumbnail image for a portfolio item.

How to Add a Cover Image

To add a cover image, specify the cover image parameter(s) in the front matter of your Markdown file.

If your page does not have its own folder (page bundle) within its section folder, you can refactor a page named NAME.md to NAME/index.md, creating the folder NAME. There is a tool to help automate this process available.

The parameters below can be added to the bottom of your page front matter to customize the appearance of the image. The caption supports Markdown and can be used to write an image caption or credit. The focal point ensures that the image subject is in view when the image is resized.

# Cover image
# To use, place an image named `featured.jpg/png` in your page's folder.
# Otherwise, specify the `filename` option to load an image from your `assets/media/` folder.
# Placement options: 1 = Full column width, 2 = Out-set, 3 = Screen-width
# Focal point options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
# Set `preview_only` to `true` to just use the image for thumbnails.
image:
  placement: 1
  caption: 'Photo by [Burke](https://github.com/burkebrunson/)'
  focal_point: 'Center'
  preview_only: false
  alt_text: An optional description of the image for screen readers.
  # filename: my-image.jpg  # Uncomment to load an image from `assets/media/` instead.
For the Book layout (i.e. docs pages), just the filename, caption, and alt_text options apply.

Use Cases for Cover Images

Social Media Previews

Ensure your content looks attractive when shared on platforms like Facebook or Twitter.

Thumbnails

Use cover images to create eye-catching thumbnails for blog posts, portfolios, or page overviews.

For more details, refer to the Hugo Blox Docs on Cover Images.


Adding Banner Images

Banner images are used to create a strong visual impact at the top of your pages. They span the width of the page and are typically used to set the tone or provide context for the content.

How to Add a Banner Image

To add a banner image, specify the banner parameter in the front matter of your Markdown file:

banner:
  image: 'header.png'
  caption: 'Image credit: [**Burke**](https://github.com/burkebrunson/)'

This configuration will display the specified image as the banner for that page (Hugo Blox Docs).

Use Cases for Banner Images

Index Pages

Use banner images to tie together the theme of your page group, like blog posts or docs.

Course Pages

Use banner images on course overview pages to capture attention and set the mood for the learning material.


Enhancing Engagement with Images

Images are more than decorative—they make your content engaging, accessible, and impactful.

Visual Appeal

High-quality images break up text, illustrate ideas, and create emotional connections, making your content more appealing and easier to digest.

SEO and Accessibility

Alt Text: Improves accessibility for visually impaired users. Captions: Enhance SEO and provide additional context.

Social Media Impact

Compelling images, such as cover images, can significantly boost click-through rates and engagement when your content is shared on social media.


By effectively using images in Hugo Blox, you can create visually stunning, engaging content that resonates with your audience and leaves a lasting impression.