This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
For some time it has been bugging me that I couldn’t add optimised images to Kirby’s textarea markdown. There’s been many times I wished that I could optimise those images to my liking.
At some point I added image resizing and optimisation to the file.create:before hook, but that only allowed to have one size and one setting for image compression. Because of the strict limitations, I didn’t like it much and removed it again.
I wanted some more flexibility and created a little KirbyTag plugin that extends the default image KirbyTag by a few options so it does what I want. It’s been a rather quick and dirty job, but does its job. I also added support for the new loading attribute that allows for native lazy-loading of images.
The plugin supports resizing by either width, height or both, an image compression and lazy-loading. Now I can simply add images with additional preferred options directly in the markdown field:
optimage: biarritz.jpg width: 1200 quality: 65 loading: lazyWill output something like:
<img src=“source-img-1200x-q65.jpg” width="1200" loading=“lazy”>The code can be found in this Gist on Github. If you like it or find it useful, feel free to use it and let me know what you think.
Also, if you are looking for a solution to add lazy-loading to your WordPress site, have a look at Tom Arnold’s approach, based on the initial snippet from CSS-Tricks.
This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
foobartel.com :: Stream | Sciencx (2019-08-22T22:00:00+00:00) Optimised Kirby Content Images. Retrieved from https://www.scien.cx/2019/08/22/optimised-kirby-content-images-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.