Mosaico Template Editor Integration

Has anybody looked into providing a plugin for www.mosaico.io ?
The editor looks extremely promising and compared to “Content Areas” we could gain a lot of flexibility, when it comes to working with responsive templates.
I haven’t found a way to implement all of the needed features in a “Content Areas”-Template and keep it simple, so less tech-savy collegues could work with it (the problem starts for instance with responsive images, that also should have an editable link, but also changing the order of building blocks would be appreciated).

Or are there any profound reasons for not integrating it?
I imagine there could be a similar integration-plugin as for CKEditor?

Thanks for the marvelous piece of software!

@stefanmessner Mosaic does indeed look good and we’ve been tracking it’s progress for some time. No attempt to integrate it into phpList has been made yet as far as I know. For reference, the GitHub repo is https://github.com/voidlabs/mosaico

Can you explain these problems in more detail? Possibly the plugin can be enhanced.

And there is also an example php-backend: https://github.com/ainterpreting/mosaico-php-backend

1 Like

Thanks for your reply and all the great work, duncan!

To illustrate my problem with Content Areas and my template, i post a code-snippet:

<div data-edit="image-item">
<a href="https://www.example.com"><img src="https://www.example.com/test.jpg" width="250" class="flexibleImage" style="max-width:600px;" /></a>
</div>

I need to make the href of the link, and the picture editable, and keep the users from editing the styles.
The only solution that is possible so far, is having a “textarea” and fill it with a dummy-img, where the picture needs to be replaced in ckeditor without breaking the styles.
Of Course this problem could be solved with adding a link field to the “image”-content area.

The second described scenario is a more global issue:
Its great that there are data-repeatable and data-hideable attributes, but what would change the whole game a lot, would be, if there is another attribute called data-block (or whatever). My whole template is organised in module-rows and it would be amazing, if you could establish a mechanism like in data-repeatable, where you can change the order of the provided blocks, duplicate blocks or hide a block like in data-hideable.
This would give the whole project more versatility.
And basically thats why I kind of envied Mailtrain for mosaico-integration. Because this drag-n-drop-interface is exactly what solves this issue.

@stefanmessner Thanks for the explanation. The way you handle the first one is what I would have expected, but I can look into some way of the plugin supporting it.

Possibly a new type that is a compound of an <a> element and a nested <img> element that lets you edit the href parameter in addition to selecting the image.
Another way is for the plugin to support nesting but that will require me to figure out what the problems were in allowing that.

The second problem is more complex but might be solved by a “choice” type that allows one of several elements to be chosen and the remaining elements to be hidden in some way. The difficulty might be in how to present this as it could take up a large amount of space

<div data-type="choice" data-name="variable-row">
<div> <!-- html for the first choice --></div>
<div> <!-- html for the second choice --></div>
<div> <!-- html for the third choice --></div>
</div>

@stefanmessner Here is a screenshot of the edit popup for an image content area when its parent element is an <a> element. The href attribute in the <a> element can be edited
image

Earlier you said that you don’t want the user to be able to change the styling. You must be using an old release of the plugin as editing the style, width, height etc was added last April.

@stefanmessner The plugin now supports this sort of html, removing the need for the outer <div> that you had. The dialogue box to edit the image now includes the URL of the <a> href attribute.

<a href="https://www.example.com">
<img data-edit="image-item" src="https://www.example.com/test.jpg" width="250" class="flexibleImage" style="max-width:600px;" />
</a>

To allow only the src attribute of the img element to be edited you can add data-type=“basicimage”

<a href="https://www.example.com">
<img data-edit="image-item" data-type="basicimage" src="https://www.example.com/test.jpg" width="250" class="flexibleImage" style="max-width:600px;" />
</a>

Upgrade to the new release on the Manage Plugins page in phplist.

1 Like

Thank you Duncan!
Please excuse my delayed reply, but i had to handle some other things and didn’t get it working right away.
After upgrading all of the required plugins to the newest versions, the linked image-items work like a charm now!

I was aware, that the style was editable before, but didn’t think it was that much of a problem. The other solution with handling images in a ckeditor field was the thing that frightened me. People might break style very easily. Deleting an image afterwards inserting a new one, not beeing aware of the style-informations attached to the first one. Anyway: thats a thing of the past!

Concerning the second problem i’m still trying to imagine a solution… It leeds me to another question: Why isn’t it possible to have an element hideable and repeatable at the same time?

but: they implement data-storage in 2 chunks: one holds the structure, the other one the content. Thats the reason it’s not as easily plugged-in like for instance ckeditor…

@stefanmessner Structure as in HTML?

First of all, like explained Replacing TinyMCE or CKEditor with Mosaico · voidlabs/mosaico Wiki · GitHub mosaico “save data” is currently composed by “2 objects” (metadata + content) than can be serialized to JSON. The output HTML is only an “export” and cannot be loaded back (just like when you save a webpage as PDF you can’t bring back the webpage html from the PDF).

Interesting; from the link

  • You need a master-template reference: you have to know what master-template in use.
  • Your real content will be a JSON structure saying how the master-template is configured, which blocks are used and what are their contents.
  • Given the master-template and the JSON structure, Mosaico will also be able to produce an output html that will be eventually sent.

Therefore it does not look like this could be integrated with phpList 3 as a regular plugin, as the stored message content would not be readable by any other editor or as raw HTML.

You don’t really need this because a repeatable can have zero instances. Originally there had to be at least one instance and the plugin didn’t allow you to delete that, but that was changed a while ago.

But when you delete the single instance it still looks like there is an empty instance. That is just a default instance that won’t actually be included if you preview.

This is a bit confusing so I will try to improve the presentation. One way I have just tried is to display the repeatable item literally without any of the edit buttons, except for a plus button which would create a new instance of the repeatable item that can be edited.

Ok, Duncan.
The new version with better display of a repeatable area with zero instances clearifiies that issue. Thanks!