U4-5060 - Allow default class to be set on RTE images

Created by Geoff Beaumont 06 Jun 2014, 09:41:27 Updated by Geoff Beaumont 06 Jun 2014, 12:19:37

Relates to: U4-4967

The ability to set a default and/or mandatory class to be applied to all RTE images would be extremely useful. This would, for example, allow the class "slimmage" to be added for responsive image scaling.

While this could be achieved by making an editor style available for use on images, we'd then be reliant on content editors to remember to apply something which is arguably a system function from their point of view.


Sebastiaan Janssen 06 Jun 2014, 09:55:15

I'd recommend you set a class on the page where you render the rich text editor and use that as a selector for slimmage.

Geoff Beaumont 06 Jun 2014, 10:07:52

Hi Sebastiaan,

Did you actually look at slimmage? That's not how it works: https://github.com/imazen/slimmage. It requires specific markup - the only practical way to achieve this from the RTE is to use slimresponse (https://github.com/imazen/slimresponse), which is an httpmodule which processes all img tags with either the class "slimmage" or slimmage=true on the querystring (which would be an alternative approach, but one less flexible for other uses, IMO).

Sebastiaan Janssen 06 Jun 2014, 10:26:41

Well.. then that's stupid and they should change it. =)

Feel free to investigate how to do this, it's very low priority for us to go and figure it out (TinyMCE is pretty hairy to deal with).

Geoff Beaumont 06 Jun 2014, 10:40:17

Actually, it's not stupid at all - it's technically necessary. Just using a selector and then modifying the image source would result in two image requests.

I get that this isn't likely to be top of the core team's priorities though!

Geoff Beaumont 06 Jun 2014, 12:19:27

Hmm, after a bit of playing, however, my idea of setting the class by default ''is'' stupid, at least for most use cases.

The problem is that slimmage will resize the image to occupy the maximum width that the CSS allows (most likely 100% container width), which isn't always what you want (for example if you have a small image floated within your content). So, a global class really doesn't work and this needs to be set on a case by case by the editor.

As a side issue, slimmage doesn't play nicely with the explicitly set height and width on the querystring, but that could be got round by only outputting width (which is all that ImageProcessor requires, as we only allow resizing not cropping or changing aspect ratio in the editor), and is also something the slimmage developer is possibly changing anyway.

Priority: Normal

Type: Feature (request)

State: Closed


Difficulty: Normal

Category: Editor

Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version:


Story Points: