Automatically Using Reduced Size Photos

[dunn]

I’ve been posting photos by using the “Copy HTML” option and pasting into a new post, but that results in the img tag using the original/full image size (and a heavy page with images being 1-2MB each). I started going back and adding the “-m” to the photo URL, but of course that’s a manual process. Is there a best practice or automated way to default to the medium size?

I saw this suggestion, but it predates the newer way images are resized with -m and -s in the filename.

Thanks,
Mike

[manton]

Good question, we may want to update the default “Copy HTML” behavior to use the medium-sized image when it’s available. We could also use srcset to include both sizes, but that also makes the HTML a lot more verbose and clunky to copy/paste.

Thoughts from other folks welcome.

[sod]

I still think Hugo’s render hooks are nifty. We could use them to automatically generate srcset and other enhancements without adding extra verbosity when using Markdown syntax.

Do Sunlit images resize?

For bloggers that use the Markdown syntax for images, Hugo’s render hooks are pretty cool. You get complete control over how to render the img tag. So, for example, Micro.blog could have a default that uses the image cache for large photos, sets width and height correctly, and maybe sets loading to lazy (which will defer downloading of images until they are shown in view). Power users can override the default and render images their way. For example, maybe they want all images to be zoomable …

[jsonbecker]

I use a render hook to auto-glightbox stuff. Big fan.

[manton]

I have to admit… I’ve never looked closely at this. Sounds like it has a lot of potential here.

[jsonbecker]

Here’s the simple one I include that auto-lightboxes the world. Now that Micro.blog has some lightbox support with collections, this would be an nice way to make that the default when using Markdown images. plugin-glightbox/layouts/_default/_markup/render-image.html at main · jsonbecker/plugin-glightbox · GitHub