Jekyll/Github Pages: Thumbnail images

I’m currently helping a friend of mine to setup their own homepage. In the beginning I thought it is a good idea to save on money for hosting and use github pages. The consequence is, that we need to setup the base on our own and once that is set, she can write the posts and the content with markdown.

Long story short: That’s not how it works. Setting up a proper Template is not as straight forward as I thought and I’m a PHP backend guy, so changing stuff in the frontend, especially in times were we talk about mobile first, responsive, etc. is hard for me.

All that said, I enjoy the time with her building the site, but for the next page I recommend definitely a website builder like Jimdo or Wix, easier for everyone and a lot better maintainable, especially without me and with 11-13€ /month hopefully affordable.

We want to talk about thumbnail images

She is an illustrator and has therefore a ton of images on her page. To not do all the work on her own, I thought it would be a good idea to create the thumbnails automatically.

Because we are using github pages which underneath uses jekyll which is written in Ruby, there is another thing I’m bad with.

But how hard can it be?

As with many tutorials and blogposts for programmers, many lack contexts for beginners. Searching for thumbnail generators for jekyll brought up two plugins:

• https://github.com/superterran/jekyll-thumbnail
• https://github.com/abpaudel/jekyll-thumbnail-img

I tried them both and they work great … once they work. I’m currently using the second, because the first generates a complete <img> which lacks an alt-text. The second generates only the url, so I can write the <img> on my own and decide what to put in.

But both lack(ed) the info to add them to the _config.yaml – and that was the part I stopped few weeks ago, because I just didn’t get them to work.

How to add a plugin to jekyll

Add it to your Gemfile

gem 'jekyll-thumbnail'
# or
gem 'jekyll-thumbnail-img'

I’m not sure how the normal dependency resolution process is – I guess if I don’t change the Gemfile by hand but with some Ruby tool, everything is automagically taken care of – in my case I needed to add the dependency on mini_magick as well.

gem "mini_magick"
gem 'jekyll-thumbnail-img'

And then the addition to _config.yml

plugins:
  - jekyll-thumbnail-img

And once everything is setup, you can do something like this:

{% for image in site.posts %}
<div class="item features-image сol-12 col-lg-6">
    <div class="item-wrapper">
        <div class="item-img">
            <a href="{{ image.url }}">
                <img src="{% thumbnail_img image.thumbnail 500 %}" alt="{{ image.alt }}">
            </a>
        </div>
    </div>
    <h5 class="item-title display-7 image-title">
        <a href="{{ image.url }}"><strong>{{ image.title }}</strong></a>
    </h5>
</div>
{% endfor %}

Jekyll 4

And to be able to do all this we need jekyll 4. How to run your github action with Jekyll 4? torrocus can tell you.

TL;DR:

name: Deploy Github Page

on:
  push

jobs:
  jekyll:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      # Use GitHub Actions' cache to shorten build times and decrease load on servers
      - uses: actions/cache@v2
        with:
          path: vendor/bundle
          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
          restore-keys: |
            ${{ runner.os }}-gems-

      # Specify the target branch (optional)
      - uses: helaili/jekyll-action@v2
        with:
          token: ${{ secrets.GITHUB_TOKEN }}

And make sure, that your github action is allowed to read and write, because the workflow publishes the rendered page to a branch, by default gh-pages.

Check if “Read and write permissions” are enabled in Settings -> Actions -> General -> Workflow permissions:

yu xiangxiang