Get Redactor to display a thumbnail of an image linked to the full version, when using the "Insert Image" button

Permalink 1 user found helpful
Posting in the Building subforum, since it seems like stock Redactor can't do that at all.

Here's the thing: I have a table in a Content block. The cells in some columns need to have image thumbnails leading to the full image. I can use the "Insert Image" feature of the Redactor editor, but it inserts the image at its full size. I can then resize it to thumbnail-size with CSS, but the file size stays the same - I can't have the page contain ~50 MB of photos resized to tiny thumbnails load at once.

A rough workaround would be to make a thumbnail of each photo by hand, then insert the thumbnail, then jump into the HTML view of Redactor to manually link each thumbnail to its full sized counterpart. But that's a hassle.

Can I modify Concrete5's Redactor in some way that would automatize it? Perhaps create my own button "Insert image thumb" which would get ImageHelper to generate a thumbnail and link it to the full size automatically?

View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
Are you using tables as a way to make a gallery?

If so, I recommend one of the gallery blocks or making a custom block.

Using Redactor for what you describe doesn't seem like the best option.
OrionFOTL replied on at Permalink Reply
Thanks for taking interest and replying.

See for yourself, if you'd like:

I will need to do it in a similar fashion on pages with a lot bigger tables, like here:, - the tables aren't an image gallery, but the photo thumbnail is just another attribute of the product.

I can also insert the photos as plain textlinks, but I'd like to try out the thumbnails first.
MrKDilkington replied on at Permalink Best Answer Reply
Here is an option to open your full size images in a lightbox instead of a new tab:
- batch process your thumbnails to avoid making them individually
- make sure you add a clear suffix to the original filename when batching them like _thumb, _small, or thumbnail_50px so you can quickly find the thumbnail
- when you upload them, adding them to a new or existing file set can make it easier to keep them organized
- in Redactor, Insert Image and add your thumbnail
- click on the image thumbnail that you added and select Edit
- in the Link input, select the file icon and choose the large version of your image
- in the Open Link select drop down, choose Open link in Lightbox
- in the Link Type select drop down, choose Image
- save
OrionFOTL replied on at Permalink Reply
Yes, I will probably have to do that. Thanks for your help.