Is it Possible to Specify Featured Image in Markdown Files and Use a Centralized Image Location?

[Armoghan-ul-Mohmin]

I have a question regarding the handling of featured images in the Blowfish Hugo theme. Currently, it appears that the featured image must be saved in the same directory as the markdown file. I’m wondering if there is a way to specify the featured image directly within the markdown file and place the images in a centralized location, such as a general uploads directory.

Specific Questions:

Featured Image URL

Is it possible to specify the URL of the featured image within the markdown file, rather than requiring the image to be in the same directory?

Example Markdown File (content/posts/example-post.md):

---
title: "Example Post"
date: 2024-08-08
image: "/uploads/featured-image.png"
description: "This is an example post."
---

## Content goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Centralized Image Storage

Can the theme be configured to use a general image directory (e.g., static/uploads/) for featured images instead of requiring them to be in the same directory as the markdown files?

Example Image Location:

static/uploads/featured-image.png

Template Modifications

If this feature is not currently supported, what changes would be needed to the Hugo templates to accommodate this approach?

Context

The goal is to streamline image management by keeping all images in a centralized location, making it easier to organize and manage content without cluttering the markdown directories with images.

Any guidance or suggestions on how to achieve this would be greatly appreciated!

[f-hollow]

I am implementing exactly this in my PR.

First fo all, the file themes/blowfish/layouts/partials/hero/basic.html contains the following code (the comments are mine):

# This looks for an image with the substring `feature` in its name in your article's folder.
# If no luck, it tries the substrings `cover` and `thumbnail`.
{{- $images := .Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
# If still no luck, it checks if the front matter parameter `featureimage` is declared.
# It defines a URL of an image and is documented in `https://blowfish.page/docs/front-matter/`.
# Usage example: `featureimage: "https://raw.githubusercontent.com/nunocoracao/blowfish/main/images/screenshot.png"
{{ if .Params.featureimage }}
{{- $url:= .Params.featureimage -}}
{{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}}
{{ end }}

But I still needed a way to include generic featured images. The steps to do it are as follows:

• Copy the file themes/blowfish/layouts/partials/hero/basic.html to layouts/partials/hero/basic.html to override the theme's standard file.
• Right after the code mentioned above, add the following:

  # This specifies the front matter parameter `featureAsset`,
  # which includes an image with a given name from Hugo's `assets/` folder.
  # Usage example: `featureAsset: "image.png"`
  {{ if .Params.featureAsset }}
      {{- $genericImage := .Params.featureAsset -}}
      {{- if not $featured }}{{ $featured = resources.Get $genericImage }}{{ end -}}
  {{ end }}

The priorities for finding an image from highest to lowest are (1) image in article's folder, (2) featureimage, (3) featureAsset.

Relevant resources:

• Integrating DecapCMS with Hugo and Blowfish Theme