Execute JavaScript in tempate?

Is there any way to have a JavaScript file be executed (by node.js) from a template? I guess not, but maybe I’m missing something obvious here.
What I want to achieve: Get a “city” parameter from the current page, pass it to a geolocation function written in JavaScript and get back the coordinates for this city in my template. I’m aware that this sounds contrived, and I can of course store the coordinates in the page’s parameters, too. But that would be a manual process, thus error prone.
From all my searching here and on the net, I only got information on how to transform JavaScript (using Babel) or concatenate or minify it…

1 Like

It’s not possible to load and execute javascript components while parsing the template.

But you should look into frontmatter parameters and then use getCSV to retrieve whatever you need and work with it in the template.

Thanks for confirming my suspicion. It would be “cool” though if there’d be a possibility to execute an external program at all during parsing and use the output of this in the template. But may be it’s too diffidult, too contrived or not useful enough. Possible applications

  • extract meta data from JPEGs and use them for title/alt/caption in figure elements. DRY-like, if the JPEGs contain the information needed in their IPTC data
  • get geolocations for a map at parse-time. One could of course do that also at runtime, but it takes considerable time and makes the page appear slower.

Frontmatter is of course possible at least for the geolocation part, also it also goes a bit against my idea of DRY - I already provide the name of the city, let the computer do the rest.

1 Like

Both ideas are doable with the EXIF functionality of Hugo and with frontmatter (for the map, see link before).

EXIF does not provide for keywords, title, author or description. It is limited mostly to the physical parameters of the image (aperture, camera model, flash, exposure time etc.). That’s why I was mentioning IPTC data – it is meant to store meta data like the above mentioned.

Imagine a gallery: you put all your pictures in a page bundle and use a list template to display them. IF (yes, a big if) the pictures already contain titles and descriptions, you could use those to properly label them in the figure elements making up the gallery. Since Hugo does not provide functionality to extract IPTC data, one way to achieve this would be JavaScript. It would preferable read the IPTC data from the files on disk, i.e. during the parse process. Of course, one can delay that to display time (using appropriate event handlers and so on). In my mind, this is an unnecessary performance burden.
Also, EXIF data is not preserved by Hugo’s image processing. So it would work only on the originals.

Yes. I know. It’s just not elegant to have the name of a location and its coordinates in the frontmatter, when the latter can easily be derived by the former. Adding coordinates to the frontmatter manually is a boring, tedious and error prone. Getting them at parse or run time is none of that.

Also: You can tell Hugo what EXIF data to keep and AFTER Hugo is done with processing the images the EXIF data would not be needed anymore. The original file stays unchanged and the image for the gallery is created new.

Hugo is for creating websites. That’s why you can put all metadata into the markdown file. A website should be fast. That’s why you don’t put lot’s of non-image data into images. With the features of Hugo you can find a way to accomplish what you want. If that’s too hard then you might want to find a more suited solution like a photography database that can export a website for you.

Thanks again for pointing that out. I’m aware that I can find “a way”. I was thinking about a better way (at least, for me). But apparently Hugo is already perfect, so there’s no need to even think about any other way of doing things.
Sarcasm aside: Hugo is easier to understand and use (for me) then for example Gatsby. But does that mean it can’t get better (i.e. even easier to understand and use) anymore?

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.