Hugo image processing resources.GetRemote

[jeyiloh]

Hello,

In Hugo I am using the google places api to fetch reviews like this:

{{ $googleReviews := .Site.Params.widget.reviews.google }}
{{ $apikey := $googleReviews.api_key }} 
{{ $place_id := $googleReviews.place_id }} 
{{ $url := printf "https://maps.googleapis.com/maps/api/place/details/json?placeid=%s&key=%s" $place_id $apikey }} 
{{ $data := getJSON $url }} 
{{ with index $data "result" }}
{{ range .reviews }}
<img src="{{.profile_photo_url}}" alt="{{ .author_name }}">

This works perfectly fine, but I want Hugo to get the {{.profile_photo_url}} and process this to produce 1 .png and 1 .webp image. The main reasons to do this are 2:

1. better performance
2. stop google from tracking users

Google load image from a CDN “https://lh3.googleusercontent.com/” where it track users and collect personal data such as ip and I dont know what else. how can I process this image in Hugo so the images are served directly from Hugo site instead of a 3rd party google cdn.

where I am struggling is with using resources.GetRemote and then have the {{.profile_photo_url}}

Thanks

[jmooring]

See the first example here:
https://gohugo.io/functions/resources/getremote/

And use the Process method to convert to other formats:
https://gohugo.io/methods/resource/process/

For example:

{{ $url := "https://www.veriphor.com/shared/images/kitten-a.jpg" }}
{{ with resources.GetRemote $url }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ with .Process "png" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
    {{ with .Process "webp" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource %q" $url }}
{{ end }}

If you want to wrap the images within a picture element, falling back to PNG if the browser doesn’t support WebP:

{{ $url := "https://www.veriphor.com/shared/images/kitten-a.jpg" }}
{{ with resources.GetRemote $url }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    <picture>
      {{ with .Process "webp" }}
        <source srcset="{{ .RelPermalink }}" type="{{ .MediaType.Type }}">
      {{ end }}
      {{ with .Process "png" }}
        <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
      {{ end }}
    </picture>
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource %q" $url }}
{{ end }}

Also note that getJSON has been deprecated and will be removed in a future release. Use resources.GetRemote instead.

[jeyiloh]

Thank @jmooring

the issue is that I do not have the exact url of the image, I am getting the url from the api call which I am currently using like this <img src="{{.profile_photo_url}}" alt="{{ .author_name }}">

The .profile_photo_url is coming from the json response, if I try to use it similar to your example it doesn’t work.

{{ $url := ".profile_photo_url" }}
{{ with resources.GetRemote $url }}

I do not have a static url to use, so how can I get an image from json response and process that in Hugo?

[jmooring]

You’ve assigned the data to $data.

So isn’t the URL just $data.profile_photo_url or $data.result.profile_photo_url? (I don’t know what the JSON looks like).

{{ $url := $data.profile_photo_url }}

or

{{ $url := $data.result.profile_photo_url }}