Download & process remote images

support
1

Is it possible to have Hugo download remote images and serve them as a static file when the site is built?

I have a data/people/ directory which contains one file for each person I want to display, for example:

nickname: copygirl
buttons:
  - website: https://example.net/
  - twitter: koppeh
  - github: copygirl
about: "Just an example"

I’m displaying these somewhat like so:

<ul class="boxes">
  {{ range $name, $person := .Site.Data.people }}{{ with $person }}
    <li><div>
      <h3 class="nickname">{{ .nickname }}<h3>
      <img class="picture" src="/images/people/avatars/default.png" />
      [...]
    </div></li>
  {{ end }}{{ end }}
</ul>

If /images/people/avatars/{{ $name }}.png doesn’t exist already, but the twitter field does, I would like to download it from https://twitter.com/{{ .twitter }}/profile_image?size=original each time the site is built, without being cached in-between separate site builds (or at least not for long). I could then also set up the site to rebuild periodically (as well as from a git push) to get the most recent avatar for each person.

Is there any way to do this with Hugo? If not directly possible, where could I hook an external script into to generate / output additional resources?

edit: Forgot to mention: Additionally, it would be nice to be able to resize the image so I can have an icon-sized version of the avatar.

Thanks for your time!

2

Not that I know of, sorry. Hopefully I’m mistaken. :slight_smile:

3

You’re not mistaken.

4

Then would I just run a separate script that takes care of this task before I run Hugo, or is there something that would hook into Hugo so that I could run only one command?

5

One approach would be to use a scraper and store those images locally in your Hugo project and then reference these from the templates for resizing.

6

For reference since this page is ranked on search engines, it is now possible as stated in documentation: