How to Fix Image Rename after processing?

support
#1

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

Original Name:
ethernet-cable-guide.jpeg

Processed Name:
ethernet-cable-guide_hu9060818fae01bcd920585b057a89a6ed_72700_1200x680_resize_q75_h2_box.webp

How to Fix this?

#2

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.

#3

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

Can you please elaborate. How to fix and do this

#4

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?

#5

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

structure

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

template

{{ 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.

public/images/
└── white-kitten_hu4cf93b69df91308fdf11e4cd6cd70889_17959_200x0_resize_q75_box.jpg
public/img/
└── white-kitten.jpg
2 Likes
#6

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.

#7

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

#8

@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
https://example.org/ /images/white-kitten.jpg /images/white-kitten.jpg
https://example.org/foo/ 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.

3 Likes
#9

Thanks a lot for this clarification!