Developing a new Slot via plugin

Development
1

Hi there.

Let’s see if this time i have more luck.
I am trying (again) to do a new slot for mautic via a plugin. So far i have managed to get the new slot added via the builder and many parts of the slot changed.
But i am facing an issue with an image and i cannot manage to get the image of the new slot selected and being able to change it.

The new slot is kindoff similar to the imagecard, but adding an extra button to the bottom that can be altered (text and link). All works except for the image, that cannot be selected in the builder.

I can point to the code in GitHub in case anyone wants to take a look to the code and help a bit (the error may be in the js or similar)

The latest version of Mautic is installed in my server and all works fine.
Thnks!

1 Like
2

Hi @gorkaguerrero and welcome back to the forums!

It might be helpful if you could share a link to view the code in Github so that people can take a look and see if there’s anything that jumps out.

Can you specify what version of Mautic you’re using (a version number, rather than the latest version) and PHP, as well?

3

Hi,
Just in case some people are wondering. You need to add the Froala editor yourself and also add some CSS (that last part took me a while to find).

  Mautic.builderContents.on('slot:init', function (event, slot) {
slot = mQuery(slot);
var type = slot.attr('data-slot');

// Initialize different slot types
if (type === 'yourcustompluginid') {
  var image = slot.find('img');
  // fix of badly destroyed image slot
  image.removeAttr('data-froala.editor');

  image.on('froalaEditor.click', function (e, editor) {
    slot.closest('[data-slot]').trigger('click');
  });

  // Init Froala editor
  var froalaOptions = mQuery.extend({}, Mautic.basicFroalaOptions, {
    linkList: [], // TODO push here the list of tokens from Mautic.getPredefinedLinks
    imageEditButtons: ['imageReplace', 'imageAlign', 'imageAlt', 'imageSize', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove'],
    useClasses: false,
    imageOutputSize: true
  }
  );
  image.froalaEditor(froalaOptions);
}

// Store the slot to a global var
Mautic.builderSlots.push({ slot: slot, type: type });

});

And the CSS:

		div[data-slot^="yourcustompluginid"] img {
				z-index: 2;
				position: relative;
		}