Forum

Thread tagged as: Problem, Redactor

How to align images in built-in Redactor editor?

A year ago I asked about changing the cms:asset shortcode to pass on attributes such as align and style in this post: https://forum.grabaperch.com/forum/04-04-2017-perch3-blog-redactor-image-insert

This is still a simple but crucial issue for my clients. Is this a difficult thing to change?

Also, if the asset chooser could include some settings (width, alignment, etc) which automatically got added to the shortcode that would be a huge help for less savvy users.

Thanks for your help!

R T Partridge 0 points

2 years ago

Simon Clay 127 points

2 years ago

Hi, I worked with the excellent Hussein Al Hammad on a plugin that would restore the ability to see the image, rather than shortcodes in the Redactor editor.

You can find it here: https://grabapipit.com/pipits/other/redactor-inline-perch-assets

This opens the way to have the 'image alignment' feature again.

To get the align feature, add config.imagePosition = true; into the get function. So your perch/addons/plugins/editors/config.js, would be for eg:

Perch.UserConfig.redactor = function () {
  var get = function (profile, config, field) {
    // remove perchassets plugin
    config.plugins = config.plugins.filter(function (item) {
      return item !== 'perchassets'
    })

    // add inlineperchassets plugin
    if (config.plugins.indexOf('inlineperchassets') === -1) config.plugins.push('inlineperchassets');

    config.imagePosition = true;

    return config;
  };

  var load = function (cb) {
    // load inlineperchassets plugin
    jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/pipit_inlineperchassets/inlineperchassets.js', cb);
  };

  return {
    'get': get,
    'load': load
  }

}();

Massive thanks to Hussein Al Hammad who did all the clever stuff.

Clive Walker 22 points

2 years ago

Oooh! Nice work.