a picture my son drew of a wave on a beach

Image ­Processing

tagged with: #meta #pelican

As part of my usual life displacement activity I am again tinkering with the configuration of this blog. I tag all these posts #meta as a way to help avoid/find them later.

My intention has been to use the HTML attribute srcset to serve Responsive Images. I had hoped it would be pretty easy to throw something together but then I got side tracked by experimenting with image carousel’s. After the previous post I went down a rabbit hole of pulling apart the HTML/CSS used in Instagram to see how they did it. This bought me full circle to realising I needed to use srcset to finish the responsive images. The slideshow/carousel will have to come later.

I had previously looked at some Pelican Plugins and decided instead to build my own scripts to Keep It Simple… Ha.

I'm not a smart man

My scripts rebuild all the images into multiple sizes from thumb-sized to large and converts them all into the webp format. I have also been rewriting all the <img> tags in my posts. I keep moving the goalposts which means I have to keep going back over all my old posts. I really need a better solution. So, here it is:

TL:DR - Replace my hacky scripts with Image Process

  • sanitize all existing <img> references in my posts
  • use Image Process to:
    • process the existing and future images into sizes/resolutions
    • process the existing and future <img> tags referenced in my posts according to defined classes
  • go back to building a horizontal carousel for when I want to post multiple images
  • consider also throwing video into the mix… (formats? CDNs?)

er… and that’s it for now. The summer sun has risen here in Broken Hill, so my brain will be cooked until it cools down.
Meanwhile, back to my day job tomorrow.

Read or add a comment.