88x31 Button List in Hugo

I wanted to have an 88x31 button list on the home page of this blog but didn’t want to have to manually add in each button in the home.html file. So the natural solution was to implement a partial which generated the buttons from a list, saving me having to work with HTML more than I needed to.

I’m not really gonna explain any of this, if you look at the code it should explain itself.

What to do

In your sites home directory create the file /data/buttons.yaml. It’s contents should look like this:

# - link: "link"
#   img: "img"
#   alt: "alt"

- link: "https://blog.laven.dev"
  img: "/images/88x31.gif"
  alt: "blog.laven.dev"

In the partials folder of your theme create the file that generates the buttons from the YAML file. The path will be something like /theme/layouts/_partials/buttons.html. This is what I’m using on my blog:

<div class="88x31" style="margin-bottom: 1rem;">
<h4>The 88x31 Pile</h4>
{{ range .Site.Data.buttons }}
{{ if .link }}
<a
    href="{{ .link }}"
    target="_blank">
    <img
        src="{{ .img }}"
        alt="{{ .alt }}"
        width="88" height="31"
        style="
            float: left;
            image-rendering: auto;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
            image-rendering: -webkit-optimize-contrast;"></a>
{{ else }}
<img
    src="{{ .img }}" 
    alt="{{ .alt }}"
    width="88"
    height="31"
    style="
        float: left;
        image-rendering: auto;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -webkit-optimize-contrast;">
{{ end }}
{{ end }}
</div>

And finally in any HTML file you want to put this in this line. I have this within my home.html file.

{{ partial "buttons.html" . }}

When that’s all done you should end up with something like this:

Things will probably need tweaking to get it looking nice on your own site, but as this is a very bare-bones implementation it should be customizable to your hearts content.

And that’s it! I know it’s a really small post, It was a small problem with a small solution, sue me.