Create a custom hugo pipe similar to PostCSS

support
1

Does anyone have any info on how to make a custom hugo pipe similar to postCSS. I looked online to find documentation or pre-made boiler plates but haven’t found anything. I want to pass image coordinates through a pipe and use javascript and google geocoding to return the city of the coordinate back to be used in the image alt attribute.

      {{range .Resources.ByType "image"}}
           {{$city . | imageLocation}} //custom pipe to return city from image geo cordinates
          <img src="{{$img.Permalink}}" alt="{{ $city}}" loading="lazy">
          <p> Image was taken in {{$city}} </p>

      {{end}}
2

Per the Exif docs, you can grab the Lat and Long of the image.

From there, like you mentioned, you’d need some JS to parse the coordinates and return a location.

3

Yes, I understand that. I want to create a npm module that can get the city and have the name integrated into a alt attribute during the site building process and not via js on the website.

Just not sure where to start. The documentation for npm integration with Hugo is not the best.

4

Hmm. I think I’m following your question now.

Though, as far as I know, what you’re asking isn’t possible.

Now, you could use node js to parse the generated site once it’s built, if that’s something you wanted to tackle.

Edit: Perhaps this is possible with some Post Processing? I’ve never tried it, so will defer to others who are more familiar.

5

RETURN TO BE USED is a trigger phrase that tells me that you don’t want POST processing, but PRE processing. Check out the new getRemote command to see if that might fit into your needs? You probably want to create an URL, then get that remote URL and then parse whatever you need into your page.