Add text over image

I want to add text over my image, and I saw this text filter image: Image Filters | Hugo

This is in my layout folder original code:

<figure class="mr4-ns ma0 mb2 mb0-l w-100 w-40-ns">
      <a href="{{ .Permalink }}" class="db">{{ with $.Param "images" }}{{ range first 1 .}}<img src="{{ . | absURL }}" class="db ma0" alt="">{{ end }}{{ end }}</a>
    </figure>

I am not very sure how to get it working… I just want the blog title to be on it:

    <figure class="mr4-ns ma0 mb2 mb0-l w-100 w-40-ns">
      <a href="{{ .Permalink }}" class="db">{{ with $.Param "images" }}{{ range first 1 .}}
        {{ $img := resources.Get  (. | absURL) }}
        {{ $img = $img.Filter (images.Text "Hugo rocks!" (dict
        "color" "#ffffff"
        "size" 60
        "linespacing" 2
        "x" 10
        "y" 20
        ))}}
        <img src="{{ $img }}" class="db ma0" alt="">{{ end }}{{ end }}</a>
    </figure>
1 Like

Are you saying it’s not working, is it throwing errors?

Overlay is described here:

Yes it is giving me errors. Not sure what I am doing wrong. New to this…

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Specifically, we need to see front matter. I have no idea where the image(s) are located.

I will try to have an example in, but in the meantime this is the frontmatter example:

---
title: "Test"
subtitle: ""
excerpt: ""
date: 2021-11-03T21:56:31+01:00
lastmod: 2021-11-06T14:00:15+01:00
author: "me"
draft: true
images:
- https://picsum.photos/seed/test/1280/720
-  # url to thumbnail image
-  # url to feature image
series:
tags:
categories:
layout: single-sidebar # single or single-sidebar
mermaid: true
---

The code in my first post is from “layouts/blog/summary,html”. Basically I am trying to get the text on the thumbnail (preferably as image rather than html text over it). I will try to have sample uploaded somewhere when I can

Is this a remote image, or is it a local file?

Will your image always be remote, or will you have local files as well?

If you will have local files, will they be page resources (i.e., within a page bundle), global resources (i.e., within the assets directory), or static resources (i.e., in the static directory)?