<p>For those who find this, After some more digging into Redactor, looks like Craft overrides the original button to accommodate for sources and transforms in <code>RichTextInput.js</code> at  <code>onImageButtonClick</code> - line 261.</p>

<pre><code>onImageButtonClick: function()
{
    this.redactor.selection.save();

    if (typeof this.assetSelectionModal == 'undefined')
    {
        this.assetSelectionModal = Craft.createElementSelectorModal('Asset', {
            storageKey: 'RichTextFieldType.ChooseImage',
            multiSelect: true,
            sources: this.assetSources,
            criteria: { locale: this.elementLocale, kind: 'image' },
            onSelect: $.proxy(function(assets, transform)
            {
                if (assets.length)
                {
                    this.redactor.selection.restore();
                    for (var i = 0; i &lt; assets.length; i++)
                    {
                        var asset = assets[i],
                            url   = asset.url+'#asset:'+asset.id;

                        if (transform)
                        {
                            url += ':'+transform;
                        }

                        this.redactor.insert.node($('&lt;img src="'+url+'" /&gt;')[0]);
                        this.redactor.code.sync();
                    }
                    this.redactor.observe.images();
                }
            }, this),
            closeOtherModals: false,
            transforms: this.transforms
        });
    }
    else
    {
        this.assetSelectionModal.show();
    }
}
</code></pre>

<p>Ended up using <a href="https://github.com/mmikkel/RetconHTML-Craft" rel="nofollow">Retcon Twig filters plugin</a> to add the class: </p>

<pre><code>{{ entry.body|retconAttr('img', {class: 'img-responsive'}) }}
</code></pre>

CC BY-SA 3.0
2016-09-23T01:13:30.047Z
2016-09-23T05:28:13.543Z
2016-09-23T05:28:13.543Z
JMP
<p>Doing a quick redactor plugin to added a class to images after upload. Based on the docs, <code>imageUpload</code> should be the callback used.</p>

<p>The plugin loads, but am I doing this wrong:</p>

<pre><code>if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.responsiveimage = function () {
  return {
    init: function()
    {
      var that = this;
      console.log("loaded");
    },
    imageUpload: function(image, json){
      console.log(image);
      image.addClass("img-responsive");    
    }   
  };
};
</code></pre>

<plugins><redactor>
Redactor plugin for Bootstrap Responsive Image
# Redactor plugin for Bootstrap Responsive Image

(Asked by: username_0 on 2016-09-22)

Doing a quick redactor plugin to added a class to images after upload. Based on the docs, imageUpload should be the callback used.
The plugin loads, but am I doing this wrong:
if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.responsiveimage = function () {
  return {
    init: function()
    {
      var that = this;
      console.log("loaded");
    },
    imageUpload: function(image, json){
      console.log(image);
      image.addClass("img-responsive");    
    }   
  };
};

**Tags:** plugins, redactor

---

## 1 answers

### Answer by username_0 on 2016-09-23. Score: 3 | Accepted answer

For those who find this, After some more digging into Redactor, looks like Craft overrides the original button to accommodate for sources and transforms in RichTextInput.js at  onImageButtonClick - line 261.
onImageButtonClick: function()
{
    this.redactor.selection.save();

    if (typeof this.assetSelectionModal == 'undefined')
    {
        this.assetSelectionModal = Craft.createElementSelectorModal('Asset', {
            storageKey: 'RichTextFieldType.ChooseImage',
            multiSelect: true,
            sources: this.assetSources,
            criteria: { locale: this.elementLocale, kind: 'image' },
            onSelect: $.proxy(function(assets, transform)
            {
                if (assets.length)
                {
                    this.redactor.selection.restore();
                    for (var i = 0; i < assets.length; i++)
                    {
                        var asset = assets[i],
                            url   = asset.url+'#asset:'+asset.id;

                        if (transform)
                        {
                            url += ':'+transform;
                        }

                        this.redactor.insert.node($('')[0]);
                        this.redactor.code.sync();
                    }
                    this.redactor.observe.images();
                }
            }, this),
            closeOtherModals: false,
            transforms: this.transforms
        });
    }
    else
    {
        this.assetSelectionModal.show();
    }
}

Ended up using Retcon Twig filters plugin to add the class: 
{{ entry.body|retconAttr('img', {class: 'img-responsive'}) }}


---

