Adding Styling to Images Drag'n'Dropped by Redactor

We use the drag and drop facility in Redactor to place the bulk of our images because it allows non-technical writers to place images in their stories without requiring any technical knowledge.

A limitation we find is that some images are too small to read easily, and, in the past, these we have dealt with by manually adding a scaling class to the image after the story is finished, using Redactor's code option. Obviously this isn't something that a non-tech writer could do, so it presents an overhead for our Admins.

We searched for a Redactor JavaScript plug-in (invoked from the Redactor menu) to scale the image after it gets dragged in but eventually gave up because we didn't have the skills to complete the plug-in in the Perch environment.

We eventually discovered a remarkably simple solution which may be useful to others.

We simply add scaling CSS to the head of our template, and define it by

img:active (or img:hover), thus:

<style> img:active { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); } </style>

An example is

https://aircrewremembered.com/ludwigmeister-norbertvollmann.html

Click the image bottom right to read it more easily.

I hadn't known about img:active previously and it never came up in a month of searching around for a solution, so I thought this technique may be useful to others. Clearly the effect gets applied to every image, but we think that's a small price to pay for the reward