Links, images, captions, quotes and iframes in a hugo blog

This blog is built with hugo#

I like hugo, its easy to work with and blazing fast!

This post is just to document a few changes I recently did with my website and some notes for myself. Kind of a meta post really.

Improve iframe loading for faster page load#

For a static site, almost instant page load is expected, and should be verified by lighthouse as such. I attached an iframe to share code/result for one of the blog posts and that was slowing down the page load significantly. It pulls in stuff from the third party and it loads the amount of code it needs to load.

The cause was simple to diagnose really. Page was not loaded till I fetched all that extra js stuff. The fix was pretty simple as well. I added loading="lazy" to the iframe.

Nothing new, just that I basically forgot to add that there in the first place.

Style your quote and text blocks#

Since I use a theme, the standard quote looks hella fancy!

> This is a standard quote

appears to be

This is a standard quote

But this is not enough! I added block styling that could render a standard set of text blocks like below -

Add custom styling for the .block class .

$baseColor: #fafafa;
$baseColorDark: #9b9b9b;
$infoColor: #00bcd4;
$warningColor: #ff9800;
$errorColor: #f44336;

.block {
  margin: 1.5em 10px;
  padding: 0.25em 10px;
  p {
    margin: 0.1rem;
    font-style: italic;
  }
  &.info {
    border-left: 5px solid $infoColor;
    background-color: lighten($infoColor, 50%);
  }

  &.warning {
    border-left: 5px solid $warningColor;
    background-color: lighten($warningColor, 30%);
  }

  &.error {
    border-left: 5px solid $errorColor;
    background-color: lighten($errorColor, 30%);
  }

  &.normal {
    border-left: 5px solid $baseColorDark;
    background-color: lighten($baseColorDark, 30%);
  }
}

and it looks like -

cool stuff innit ? Perhaps I will also add some icons to spice it up even more.

Something called Markdown Render Hooks#

Hugo has a “new” functionality called markdown render hooks since v0.62 which says

Render Hooks allow custom templates to override markdown rendering functionality. Hugo docs¹

Let’s take a peek under the hood.

Image handling and adding a caption#

I render a gif for one of my blog posts , and I wanted to figure out how to add caption to it, and to images in general. I have render-image.html set up as a standard code.

// /layouts/_default/_markup/render-image.html
{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ if .Title }}
<figure>
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
  <figcaption>{{ .Title }}</figcaption>
</figure>
{{ else }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
{{ end }}

It just added a different flavor and allowed me to learn a few new image related html components like <figure> and <figcaption> that I didn’t know existed before.

Here, the figcaption element handles caption for the rendered image.

Handling both local and remote link rendering#

Along with images, we also have a render-link.html in our code.

// /layouts/_default/_markup/render-link.html
{{ $link := .Destination }}
{{ $isRemote := strings.HasPrefix $link "http" }}
{{- if not $isRemote -}}
{{ $url := urls.Parse .Destination }}
{{- if $url.Path -}}
{{ $fragment := "" }}
{{- with $url.Fragment }}{{ $fragment = printf "#%s" . }}{{ end -}}
{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
{{- end -}}
<a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }} target="_blank">{{ .Text | safeHTML }}</a>

and then I can write something like

[markdown render hooks](https://gohugo.io/templates/render-hooks/ 'Link to render hooks documentation')

and get result like markdown render hooks .