wu-lee
commented
2 years ago I've just deployed an update on the site which adds this.
Usage: all images which are uploaded to the site and used in article content are potentially magnifiable. To make any particular image magnifable, put the keyword (magnified) - with brackets - into the image title.
You can do this in the Forestry UI by clicking the image in the content editor pane, which pops up a dialog that allows a title to be set. Note, if the image is linked this dialog then shows the title of the link, not the image, which can catch you out.
You can also do (or check) this in the raw markdown editor view. An example of a markdown image with a keyword in the title is:
A linked image looks like this, note it can have its own title:
[](https://example.com "This is the link title")I've done it like this as there isn't an obvious way to make this visible in the Forestry UI. However, it does mean you can have several magnified images in one article. I've added the keyword to the image in "The DIY House" and both images in "Six Tricky Problems".
Note, it doesn't work on images which link to other sites, currently (such as those in "Renting in Oxford Doesn't Add Up").
Magnifier functionality was fiddly to add.
Picking a library was a problem. The available Javascript plugins implementing magnifiers are typically not React based, and/or use another framework like jQuery. These seemed unlikely to work with a React-based site, as React controls the page update/render process using a "virtual DOM", and doesn't play nicely with code using their own DOM-manipulating mechanisms.
At least at first look - on more searching, the React-based magnifier plug-in also seemed hard to integrate, as it isn't obvious how to insert the code to add the functionality to images in a markdown page generated internally within the gatsby-remark-images plug-in, which does something non-trivial to images already in order to make them load responsively.
Investigating the gatsby-remark-images-zoom plugin, I find this works quite simply, by invoking the medium-zoom library post-facto, in the browser using a Gatsby callback invoked on page load. So the modifications to the Gatsby build pipeline is avoided.
https://github.com/premieroctet/gatsby-remark-images-zoom/blob/master/gatsby-browser.js
In fact it looks like all of the off-the-shelf libraries available are either very old and unmaintained, or use jQuery, and moreover, seem unlikely to work in the context of a Homemaker article with images inside scrolling elements.
Looking for code to implement the magnifier, I find a fairly simple example, which doesn't use a library.
https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp
So I decided to adapt this to work with the method used by gatsby-remark-images-zoom plugin. This proved to work in the end, but required a lot of experimentation to get the maths calculating where to put the magnifier <div> element and how to position the background image working, as it didn't work right as-is. The end result is significantly modified.
Allow selected images in articles, such as the one in the "DIY House" article, to have a magnifying glass which zooms in on selected parts of the image as the cursor moves over them