Last post

I finished off the last post with a big lie. I said that I was going to run another audit and check on our progress. However, I posted the last article live and took a look through this series. I noticed that the uk-img attribute wasn’t getting applied to <img> attributes. That didn’t make me happy, so I checked how I implemented images and sure enough, I messed it up.

The uk-img attribute

If you’re not familiar with UI Kit, it’s a small, fast CSS framework that I like to use on my sites. It feels faster and more intuitive than Bootstrap has ever felt and I like that it makes sites look just a little different than the norm. I’m not a very good designer so if you see design flaws on my site, it’s my fault, not UI Kit. Or maybe I have a really bad eye for design and you shouldn’t trust anything I say about CSS frameworks?

The uk-img attribute does some really helpful things to improve page speed. When you use the attribute, it helps with these things:

  1. When a user loads a page, it only loads the images that are in the viewport.
  2. The rest of the images are lazy loaded as the user scrolls to them.
  3. It generates an empty placeholder image to prevent the content from jumping around as you load the image.

You can also choose to change the background colour or load an animation while your images are loading but that’s not very useful for my website. I did not implement those options with this shortcode!

By default, Hugo ships with a figure shortcode for adding images. It’s good but not quite suited for UI Kit. I did a quick Google search, didn’t find anything that jumped out and quickly wrote my own.

That’s my favourite thing about Hugo. It’s all Go and Go is incredibly intuitive. For the most part, if it makes sense in English, it’s Go. This makes banging out really quick markdown shortcodes a real joy.

The shortcode

I saved this shortcode as uk-img.html. Here is the shortcode:

<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
    {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
        <img data-src="{{ .Get "src" }}" height={{ .Get "height" }} width={{ .Get "width"}}
        {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}
        {{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} uk-img>
    {{ if .Get "link" }}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
    <figcaption>{{ if isset .Params "title" }}
        <h4>{{ .Get "title" }}</h4>{{ end }}
        {{ if or (.Get "caption") (.Get "attr") }}<p>
        {{ .Get "caption" }}
        {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink" }}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>

It uses figure so it preserves all of my site specific styles for images. But it implements the uk-img attribute and really improves my site’s user experience. Please adapt it to your own cases or share it. It’s here for stealing.

Next post

Now I’m really going to run a SiteImp audit and check my results. I know I said that last time, but this time I promise.

  1. Improving hluska.ca’s performance with a Siteimp audit
  2. Eliminating render blocking resources part 1 - rel preload
  3. Thinking through css on hluska.ca
  4. Checking in on those changes
  5. Investigating Font Awesome on my contact page
  6. Minifying my site with Hugo on DigitalOcean App Platform - last post
  7. Writing a Hugo shortcode to optimize my images with UI Kit - this post
  8. Final results from my site improvement program - next post

Return to top.