<p>I've never had a lot of luck using the custom styles drop down to do things like this, so I created a <a href="https://github.com/simplicate-web/redactor-image-class" rel="nofollow noreferrer">Redactor plugin that inserts a class name drop down</a> directly to the image edit modal.</p>
<p><a href="https://i.sstatic.net/TGUh5.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TGUh5.png" alt="enter image description here" /></a></p>
<p>Full code and documentation is here:</p>
<p><a href="https://github.com/simplicate-web/redactor-image-class" rel="nofollow noreferrer">https://github.com/simplicate-web/redactor-image-class</a></p>
<p>When I saw your question I realized I could whip this up pretty quickly by basing it off of another plugin I wrote for managing <a href="https://github.com/simplicate-web/redactor-link-styles" rel="nofollow noreferrer">class names on links</a>.</p>
<p>So if you notice any bugs, shoot me a message and I'll try to get them cleared up for you.</p>

CC BY-SA 4.0
2021-08-26T17:20:28.670Z
2021-08-26T17:20:28.670Z
stevecomrie
<p>Using Redactor Custom Styles plugin we're adding a button with options to toggle classes on figures. It mostly works except for images. Here's an entry in our redactor config.</p>
<pre><code>&quot;customStyles&quot;: {
  &quot;figureStyles&quot;: {
      &quot;icon&quot;: &quot;&lt;span class='fas fa-images'&gt;&lt;/span&gt;&quot;,
      &quot;dropdown&quot;: {
        &quot;Center Max 70%&quot;: {
          &quot;api&quot;: &quot;module.block.format&quot;,
          &quot;args&quot;: {
            &quot;tag&quot;: &quot;figure&quot;,
            &quot;class&quot;: &quot;image-center-max-70&quot;,
            &quot;type&quot;: &quot;toggle&quot;
          }
        }
</code></pre>

<craft3><redactor><plugin-redactorstyles>
How to add a class to an image figure in redactor?
# How to add a class to an image figure in redactor?

(Asked by: username_0 on 2021-08-26)

Using Redactor Custom Styles plugin we're adding a button with options to toggle classes on figures. It mostly works except for images. Here's an entry in our redactor config.
"customStyles": {
  "figureStyles": {
      "icon": "",
      "dropdown": {
        "Center Max 70%": {
          "api": "module.block.format",
          "args": {
            "tag": "figure",
            "class": "image-center-max-70",
            "type": "toggle"
          }
        }

**Tags:** craft3, redactor, plugin-redactorstyles


---

## 1 answers

### Answer by username_1 on 2021-08-26. Score: 2

I've never had a lot of luck using the custom styles drop down to do things like this, so I created a [Redactor plugin that inserts a class name drop down](https://github.com/simplicate-web/redactor-image-class) directly to the image edit modal.

[![enter image description here](https://i.sstatic.net/TGUh5.png)](https://i.sstatic.net/TGUh5.png)

Full code and documentation is here:

<https://github.com/simplicate-web/redactor-image-class>

When I saw your question I realized I could whip this up pretty quickly by basing it off of another plugin I wrote for managing [class names on links](https://github.com/simplicate-web/redactor-link-styles).

So if you notice any bugs, shoot me a message and I'll try to get them cleared up for you.


---

