Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-26T17:20:28.670Z
Answers.LastActivityDate: 2021-08-26T17:20:28.670Z
Answers.UserDisplayName: stevecomrie
Body: <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>
  
Tags: <craft3><redactor><plugin-redactorstyles>
Title: How to add a class to an image figure in redactor?
ThreadText: # 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": "<span class='fas fa-images'></span>",
        "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.
  
  
  ---
  
  