2

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");    
    }   
  };
};
3

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($('<img src="'+url+'" />')[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'}) }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.