Adding Detailed Zoom Images

Remember the time I added Medium Zoom? Well as it turns out, as I was reading through Zoom’s documentation, that you can specify a separate URL to load when the image zooms in. I like this, because I crop all my images to be (for landscape oriented) 1000 pixels wide, just slightly over the size of the content area that they go into. This is a serious reduction in size from the resolution they’re taken at. I do this just to improve load times, even with WebP and compression, extra pixels (that get resized to nothingness) are extra data that needs to be sent. And since it’s literally too big to be shown like that, I crop them so that pages load nearly instantly. The problem is that when you click on an image to see it, you get… basically nothing. I (because reasons) don’t have any old images so they’ll stay the same. But from now on, any images that are added in will have a detailed version that loads when you click to zoom.

Check it out!

For the record, the version you see right now is 542,724 bytes, but the zoomed in image is 62,435,951 bytes. (Even worse still, from my phone, that was a 9248x6936 pixel image, 192,757,254 bytes, my laptop spent an hour and a half finding optimal compression for it. WebP versions are a lot smaller.)

Anyways, this is me here, so we all know that I’m going to get into what I did.

This is another shortcode, a little piece that I can add to a page that Hugo will replace with a specially marked up HTML file. I’ve called this one detailed-img, and this is the code for it (edited for clarity):

<center>
    <img class="lazyload"
         data-zoom-src="https://teknikaldomain.me/cdn?fetch={{ .Get 1 }}_detailed.png"
         data-src="https://teknikaldomain.me/cdn?fetch={{ .Get 1 }}.png"
         alt="{{ .Get 0 }}"
         data-zoomable="true"
    />
</center>

This is pretty much identical to the standard image template that I have, with the addition of the attribute data-zoom-src. This is the URL that gets swapped in. In my case, since I know I’ll CDN any images like that, I can just hard code that path once and let everything else handle itself.

As a result, the code {{< detailed-img "Some image" post/some-img.png >}} will fill in the blanks (or, the {{ .Get }}s) up there with the values, and the final result means that zooming in on images finally means something more than just “center this please.”

PS: I know that the use of <center> tags is deprecated in HTML5. I don’t currently have any easier way to do that (I’ve not touched the theme CSS), and most browsers will still support it for backwards-compatibility reasons. So, for now, it works.