Image handling module now has LQIP without needing JavaScript

Thanks to @vassap, @bwintx, a hint from @jmooring, and myself (@cshoredaniel)

My image handling module now has a choice of two methods of generating LQIP images, without requiring JavaScript.

The documentation of this feature is not yet in the repo (and I still think I should rebuild the thing, better, but … time. Web development is something I putter at, not my career), but I thought I would let folks know it exists.

2 Likes

Congratulations! And thanks for the undeserved shoutout. :slight_smile:

1 Like

Installing this is too complicated for me, my home-made theme is much simpler.
Could you provide an sample of the code it generates, regards to LQIP images ?
Thanks

  1. I do plan to improve the documentation RSN[1], and have created an issue to track that effort.
  2. In answering this question, I discovered and squashed a couple of bugs.
    1. Preface: (from the demo site for the module:
      NOTE: This site isn’t meant to look pretty, it’s meant to show the behaviours of the image handling module and various CSS.
    2. Having said that, here is the (unminified) code for one of demo pages.
Source
---
title: "Markdown or shortcode crop and rotate"
date: 2023-03-28T21:43:42Z
publishDate: 2023-03-28T21:43:42Z
author: Daniel F. Dickinson
tags:
    - images
imageMarkdownAddWrapper: true
imageAddWrapper: span
imageMarkdownClass: markdown-image-wrapper-no-style
imageLinkFull: true
---

## Cropped and rotated image (Markdown)

\```markdown
![Photo of a rock garden with tulips and rust-coloured plants, cropped and rotated]\(backgarden-tulips+rocks.png?m=Crop&r=335&w=600&h=480&a=center)
\```

!\[Photo of a rock garden with tulips and rust-coloured plants, cropped and rotated](backgarden-tulips+rocks.png?m=Crop&r=335&w=600&h=480&a=center)

## Cropped and rotated image (shortcode)

\```go
{{</* figure singlesize=true imageConvertMethod=Crop width=600 height=480 anchor=center rotation=335 title="Figure 1: Differences between markdown figures and figure shortcode" src="backgarden-tulips+rocks.png" alt="Photo of a rock garden with tulips and rust-coloured plants" */>}}
\```

\{{< figure singlesize=true imageConvertMethod=Crop width=600 height=480 anchor=center rotation=335 title="Figure 1: Differences between markdown figures and figure shortcode" src="backgarden-tulips+rocks.png" alt="Photo of a rock garden with tulips and rust-coloured plants" >}}

## Original image

![Photo of a rock garden with tulips and rust-coloured plants](backgarden-tulips+rocks.png)
HTML output snippet from `head` (using local server)
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Markdown or shortcode crop and rotate</title>
	<meta name="robots" content="noindex, nofollow">
	<!-- link rel="alternate" data="will-not-be-canonical" href="http://localhost:1313/post/markdown-crop-and-rotate/" -->
	<link rel="stylesheet" href="http://localhost:1313/css/img-bg-style-a01ef47aeb932559a13ea25cdedd4217.css" type="text/css" media="screen">
	<link rel="stylesheet" href="http://localhost:1313/css/minimal-test-hugo-dfd.css">
	<meta name="generator" content="Hugo 0.111.3">
	<meta name="description" content="Cropped and rotated image (Markdown) ![Photo of a rock garden with tulips and rust-coloured plants, cropped and rotated](backgarden-tulips&#43;rocks.png?m=Crop&amp;amp;r=335&amp;amp;w=600&amp;amp;h=480&amp;amp;a=center) Cropped and rotated image (shortcode) {{&amp;lt; figure singlesize=true imageConvertMethod=Crop width=600 height=480 anchor=center rotation=335 title=&amp;quot;Figure 1: Differences between markdown figures and figure shortcode&amp;quot; src=&amp;quot;backgarden-tulips&#43;rocks.">
CSS for the LQIP image (webp low quality image)
.imgLQIP-ccd6ee520fafc8e71cdbe8f97f30b0f9 {background: url(data: image/webp;base64,UklGRsQAAABXRUJQVlA4ILgAAACQBACdASoUABAAPqU8lkQjIaEYBAAzCkT2AE6ZQIo+K8D28FCG1DVE599Hv7gA/d+iBnWNIVVyiMtEcvN5ilFst8RFDXyHOFJLqwcCRVpZIT/2XdlRyden0Knfg+c6rEgCZ2a8GVGkgNRLgyhRXYEZKmn6ZIEEpw1LrF5ImM/xGDRM1WLPwa5E3IvjvxUVAe6MOkznFNeCwNNSNsmNJIuAiq2Vd707O0MpCf6iT6wcR79YF5VTeWAA); background-size: cover; background-repeat: no-repeat;}
OR, CSS: a colour gradient version
.imgGIP-a0a0e06093eafd5097eb6462d319e745 { background: linear-gradient#535933, #afa99f, #979660, #728941, #896d53, #808080); background-size: cover; background-repeat: no-repeat; }
.imgGIP-af39e0db786fd81d1616cf49ca13bd93 { background: linear-gradient#bab1a6, #65603d, #a69f61, #8a6a51, #778846, #808080); background-size: cover; background-repeat: no-repeat; }
.imgGIP-de22d7669cc54d0555ad088b02f299c1 { background: linear-gradient#b9b1a6, #65603e, #a59f61, #8a6a51, #778846, #808080); background-size: cover; background-repeat: no-repeat; }
HTML for one of the images generated by the above 'Source' Markdown
<span class="markdown-image-wrapper-no-style">
  <a href="/post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_2576x0_resize_q90_h2_box_3.webp" rel="noopener noreferrer">
    <img class="imgGIP-a0a0e06093eafd5097eb6462d319e745" loading="lazy" srcset="/post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_91924e5d8c380ebe8acdfef211a83f5f.webp 480w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_76a55029c5232c5ca81a757125926c18.webp 720w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_9139b9b304309c04acb49b82b3f78da4.webp 1080w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_f073fd1f29498cafbb3985992bdb7750.webp 1280w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_7139082ac98407bcf8588a823e11436e.webp 1600w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_60672075f346d2a17e9d4e43f7ae5899.webp 2048w, /post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_2576x0_resize_q90_h2_box_3.webp 2576w" sizes="80vw" src="/post/markdown-crop-and-rotate/backgarden-tulips&#43;rocks_huf83e27a5e24d24bf2814d5e92069ea63_8523448_2576x0_resize_q90_h2_box_3.webp" alt="Photo of a rock garden with tulips and rust-coloured plants" width="2576" height="1920">
  </a>
</span>

[1] ‘Real Soon Now’ (an ironic phrase used by Jerry Pournelle while writing ‘Chaos Manor’ for BYTE in the 80’s, to indicate something that may (or may not) occur in an unknown time period, but which was promised ‘Real Soon Now’).

1 Like