Creating Jekyll Plugins (and modern image formats)

When I first started in web design (in the late 90’s), there was a lot of emphasis on learning about file formats, file naming conventions, and other technical aspects that don’t seem to be talked about these days. It’s easy to feel like you’ve fallen behind on the latest developments. For example, I was talking about images on social media recently and someone mentioned WebP files.

I was still in the mindset of using JPGs and PNGs, so I had to do some research. I had some awareness of WebP as an image file format, but I thought it required fallbacks and additional effort to implement. However, it turns out that WebP is supported by basically everything now, so you can use it as a replacement for JPG and PNGs. So I made the decision to switch over to using WebP images everywhere.

Photo editors don’t commonly offer WebP export, but that doesn’t affect me. I use Sketch for a lot of my design, and for photos, I’ve automated the resizing using a Jekyll plugin. Since most of my sites are built with Jekyll, I have started building a collection of custom plugins for tasks where there aren’t good alternatives available, and the first one I made is an image resizer.

My plugin is based on Jekyll Resize by Michael Currin (which is a fork of Jekyll Resize by CloudCannon). This plugin generates resized images in different dimensions, but with one modification - it converts all generated images to WebP format.

Writing Jekyll plugins requires knowledge of Ruby, a programming language I have no experience in. While I can read the code and make tweaks, writing Ruby from scratch is a bit beyond me. That’s where my coding buddy ChatGPT comes in handy.

Creating a Jekyll plugin with ChatGPT is surprisingly easy. You tell it the language/framework, define inputs and outputs, and it does a remarkably good job of making the thing work.

Below are a few tips for successful ChatGPT programming:

  • Be specific with your instructions.
  • Be prepared to go through multiple code and test iterations.
  • If you change the code, then give ChatGPT the updated code so you’re working from the same base.
  • Do some research and find code snippets/open source projects that do roughly what you want and ask it to adjust them.
  • Stick to small(ish) focused tasks.
  • If you want changes, then ask for one at a time.
  • If it writes code and stops writing, then it’s run out of “API Tokens”. You can tell it to continue, and it will keep on writing the code.

To successfully work with ChatGPT or any AI assistant for coding tasks like this, it helps a lot if you already have some programming experience since you know how to ask and talk about your request and have a better idea of what to ask for. Researching and understanding exactly what you want your plugin to do and how it should work is also crucial.

Now that I’ve created half a dozen plugins, I’m considering documenting them and sharing them on GitHub. This way, others can benefit from my work and contribute to making the Jekyll ecosystem even better.

Now that I have a working plugin, I am using it on multiple websites, and it’s sped up my time to publish new content. I can now upload a single image and have it automatically resized and converted to WebP format. Resizing images was probably the thing I liked least about Jekyll, so it’s great to have a solution.

Frequently Asked Questions

What is WebP and how does it relate to image file formats like JPG and PNG?

WebP is a modern image file format that offers high-quality compression and is supported by most web browsers. It can be used as a replacement for JPG and PNG formats, providing smaller file sizes and faster load times for web images.

What is the benefit of using WebP images on websites?

Using WebP images can significantly improve website performance by reducing image file sizes, leading to faster page load times and better user experiences. This format is also supported by most modern browsers.

How can I automate image resizing and conversion to WebP in a Jekyll-based website?

You can create a Jekyll plugin to automate image resizing and conversion to WebP. Several open-source plugins and resources are available to help with this, and you can customize them to suit your needs.

What is Ruby, and why is it important for creating Jekyll plugins?

Ruby is a programming language that’s commonly used for Jekyll plugins. While you don’t need to be an expert in Ruby to create plugins, having some knowledge of the language can be helpful for understanding and customizing the code.

How can I use ChatGPT to help me with coding tasks like creating a Jekyll plugin?

You can use ChatGPT to assist with coding tasks by providing specific instructions, defining inputs and outputs, and collaborating through multiple code iterations. It’s helpful to have some programming experience and a clear understanding of what you want your plugin to achieve.

Are there any limitations to using ChatGPT for coding tasks?

ChatGPT has limitations, including a token limit and the need for clear and specific instructions. If it stops writing code, it may have run out of API tokens, but you can instruct it to continue. It’s essential to work within these limitations to achieve the desired results.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

Related Posts

23 Mar 2017

New Adventures in Jekyll

I use WordPress a lot, but a couple of weeks ago I decided to rebuild one of my older sites with Jekyll (a static site editor) so that I could host it on Github pages. As I have explained before...
28 Sep 2021

Creating Generative Art with PHP

These last few weeks I’ve been experimenting with Generative Art, using PHP. You can see the evolution of my latest series on Twitter. Generative Art is creating artworks through programming. Generative art has a few different names, Procedural art and...
06 Jul 2009

A Brief History of TimThumb

When we were building Mimbo Pro – Darren came up with the idea of automating the image thumbnail resizing – and this was the idea that sparked the development of TimThumb.This was all part of making the theme site as...
12 Aug 2010

Using TimThumb Part 2: External Websites

Of all the TimThumb feature requests the most popular are being able to crop an image from a specified location, and being able to load images from external websites. Resizing images from external images was added at the start of...
01 Jul 2014

I No Longer Use TimThumb – Here’s What I do Instead

Last week there was a second exploit found in TimThumb. Thankfully it was no-where near as bad as the first one – but it raised an interesting question of whether TimThumb is even needed anymore.TimThumb was made to be useful...