How to Fix Image Rename after processing?

I am doing webp image processing but image rename ugly. I want the exact file name or the resize dimensions only.

Original Name:

Processed Name:

How to Fix this?

There is currently no simple way of doing that (I have mentioned in another thread a workaround using resources.Concat, which I guess would work in this case to), but it’s on the road map (but no-one have implemented it) to add a simple “rename” function.

yup I’ve seen in this thread. but didn’t understand.

Can you please elaborate. How to fix and do this

So I found this old thread looking for a way to rename images, it sounds like resources.Copy introduced in Hugo v0.100.0 might be the rename function that we have access to now @bep?

No need to ping the project maintainer for simple questions. I imagine they have enough on their plate already.


└── images/
    └── white-kitten.jpg


{{ with resources.Get "images/white-kitten.jpg" }}
  {{ with .Resize "200x" }}
    {{ with . | resources.Copy "img/white-kitten.jpg" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Key | path.BaseName | humanize }}">
    {{ end }}
  {{ end }}
{{ end }}

rendered img element

<img src="/img/white-kitten.jpg" width="200" height="133" alt="White kitten">

Note that the resource is copied to the desired path—it is not renamed.

└── white-kitten_hu4cf93b69df91308fdf11e4cd6cd70889_17959_200x0_resize_q75_box.jpg
└── white-kitten.jpg

Fair, thank you for the clarification, I wasn’t sure anyone would see the thread otherwise. Thank you for that caveat about the copy not rename. That’s still useful.

I’ve switched recently to use the .RelPermalink of the original resource (like the “images/white-kitten.jpg” here) to achieve the same goal as you are doing here with the .Key. I had no problems with .Key, but it is not in the docs as far as I know. Because there are other use cases, where I’ve been using .Key and switched to .RelPermalink successfully, I would really like to understand, what the difference between .RelPermalink and .Key actually is.

Thanks, Georg


First, note that I have edited the code snippet above to avoid this issue.

Second, the .Key and .RelPermalink can be different depending on the baseURL.

Take this example:

{{ with resources.Get "images/white-kitten.jpg" }}
  {{ .Key }}
  {{ .RelPermalink }}
{{ end }}
baseURL .Key .RelPermalink /images/white-kitten.jpg /images/white-kitten.jpg images/white-kitten.jpg /foo/images/white-kitten.jpg

If you are just going to pass it through path.BaseName to get the filename then I suppose it doesn’t matter which one you use.


Thanks a lot for this clarification!