Forum

Thread tagged as: Question, Configuration, Redactor

Adding an image class via the editor

I am working on a new site. I can manually set a scalable class to an image by using code view in the editor (using Redactor at present) but I cannot expect the client to do that once I hand it over. Is there any automatic way to set an image class within a Perch area? Or to add a class selector to any of the editors? Thanks

James Loudon 0 points

5 years ago

Mike Harrison 37 points

5 years ago

Hi James,

With Markitup you can add an imageclasses attribute to provide a list of classes an editor can add to an image - add them as a comma separated list. An example would be:

<perch:content id="text" type="textarea" label="Text" markdown="true" editor="markitup" imagewidth="640" imageheight="480" size="s" imageclasses="class,anotherclass,thing" />

I am not sure about Redactor I haven't used it

Jasper Snaith 0 points

4 years ago

Hi James,

Sorry I'm a bit late to the party here, but we've been rolling out Redactor II across our site and tweaking various settings. Just spotted your question and thought I might be able to offer some advice, may be of use to others doing the same.

As Mike suggests, the imageclasses attribute allows that function for Markitup, but the attribute is not usable on any other editors.

In our case, we wanted all images uploaded into Redactor to have the Bootstrap class img-responsive applied. This function is referenced in the Redactor documentation under Image Callbacks. You need to jam a bit of code into the Redactor settings in _config.inc.

callbacks: {
    imageUpload: function(image, json)
    {
        $(image).attr('class', 'img-responsive');
    }
}

Hope that helps someone!