Blau's Blog

A furry blog covering various topics including gaming, Second Life, and misc tech.

Links and Buttons are here!

Date: []
Categories: [Site Updates], [Computers], [How I Did It]
Tags: [buttons], [88x31], [jekyll], [yaml]

This post is migrated from my old blog. It's not super relevant to this one, as this blog runs on Grav instead of Jekyll; I copied it over here for completeness. I'll put a new post up with how I accomplish this in Grav.

A little late, but I did finally get the Links and Buttons page up and running! And, as promised, I'll explain how I did it.

Of course, it starts with YAML

I build this site using Jekyll. One of the things you can do with Jekyll is have a _data folder with YAML files in it that hold information that you can grab from elsewhere in the site, e.g. author names, titles, bio blurbs, etc. YAML is typically structured like this:

 nav:

  - name: Links
    link: /links.html

  - name: Credits
    link: /credits.html

In that example, from my site's navigation data file, nav is the name for the section of code - this can be omitted if you've only got one kind of info being stored in the file - the dashes denote new entries, and name and link are fields you can fill in.

For the links page, I went with this:

  - name: Midnight Reading
    link: https://renkotsuban.com/
    button: /assets/img_web/buttons/renkonbutton.gif
    button-static: 
    alt:

name and link are self-explanatory - the name and URL for the site. button is the default image link. button-static is for reduced motion support - currently empty, as I'll explain in a bit. alt is for alt text, but I'm not entirely sure how I want to approach this, so it's empty for now, with name being used in its place. (That's how I see some folks doing the alt text for buttons, so I figured it's probably an acceptable way to do it, for now at least. If you have any insight please poke me on Mastodon)!

Now for the Liquid

The Liquid code for this ended up being a lot more simple than I thought it would be. Probably because I'm used to dealing with the behemoth that is the Liquid code for the index and category / tag archives pages on here (that I still gotta make a post about sometime). It ended up coming out to this:

{% raw %} 
<p class="buttonwall">
    {% assign sorted_links = site.data.links | sort_natural: "name" %}
    {% for link in sorted_links %}
    <a href="{{ link.link }}">
        <img src="{{ link.button }}" 
        width="88" height="31" 
        alt="{{ link.name }}">
    </a>
    {% endfor %}
</p>

First, the wrapping p tag is so I can containerize and style the entire button area; right now I'm just using it to control how big or small it can get.

{% assign sorted_links = site.data.links | sort_natural: "name" %} is something else to look at. This line of code sorts the entries alphabetically, so it doesn't matter what order they are in my YAML file. Let's break it down:

assign sorted_links = site.data.links is telling the code that the information in the file links under _data belongs to the variable sorted_links after we sort it. sort_natural: "name" tells it to take those entries and sort them alphabetically by the Name field. sort_natural specifically ignores capitalization; regular sort will put lower-case after upper-case.

{% for link in sorted_links %} is the start of a for loop. It basically means "for every item, now named link, in the list of items named sorted_links, do the following". The loop stops at the {% endfor %} tag, so everything between these two loops is run for each item in the list.

The a tag's link target is {{ link.link }}, which looks very silly, but it's filling in the href with the current item's link field from earlier. Similarly, img src is pulling from the button field, and alt is pulling from the name field (for now). The width and height are telling the browser that the image is specifically this size, don't resize it.

As mentioned earlier, I want to utilize button-static for reduced motion support. That's the one thing I need to add to this code. I also need to modify some of the buttons to be single-frame. I'll update this post once I've done that.

{% endraw %}

That wasn't so heck

I was putting this off honestly because I thought it was going to be much more annoying to implement than it was. I'm glad it wasn't anywhere near as complicated as I thought it was going to be!

I've replaced the Furrcard and Ko-fi links with the Links page, as I've included some of my personal links at the top. I've also got my blog's buttons at the bottom, underneath the button wall.

I'll be adding more to the wall as time goes on, and there are a few non-website buttons I want to add, but haven't quite decided where to do so yet.

I've also done a few miscellaneous updates alongside this: