Game Screenshots
In previous posts I showed you my Pelican static site generator configuration and had ChatGPT write a function to optimize images. Now what if we implement that function into Pelican as a plugin to optimize all the images that I’m about to show you in this post at generation time?
Since setting up my Retroarch installation and beginning my rom collection, I’ve amassed a folder full of game screen shots. Why not use those.
Writing the Plugin
It’s actually really simple. All we do is put this into plugins/optimize_images.py:
from pelican import signals
def optimize_images():
# The code from the "ChatGPT write a function to optimize images" article
def register():
signals.generator_init.connect(optimize_images)
You can check the full code for the plugin on github.
What that’s going to do is, at generation initialization (when I do make html) it’s going to look in the content/images directories for png/jpg files to make webp versions of.
Generating Markdown Links
So I copy my retroarch screenshots into a new folder at content/images/vg-screenshots and I go in there and open a python terminal
>>> pngs = Path.cwd().glob('*.png')
>>> for p in pngs:
... print(f"[![{p.stem}]("+\
f"{{static}}/images/vg-screenshots/{p.stem}.webp)]"+\
f"({{static}}/images/vg-screenshots/{p.name})")
That gives me this massive list markdown links to images. Here’s what one of them might look like.
[]({static}/images/vg-screenshots/S.png)
Behold, Optimized Images
Here’s what all of them look like. Notice that you can click on them for full resolution image but only a smaller resolution version loads on this page, making it easier to load all of these at once.
