CKEditor PWImage: can I add a class to its wrapping figure element?

[The G]

Hi,

I'm working on a Bulma based site. I'd like to have an experience that's closer to WYSIWYG, so I added some of Bulma classes into mystyles.js and in contents.css.

And it works, except when I'm trying to float an image inside CKEditor, using the PWImage plugin. I tried adding

    { name: 'Image Float Left', element: 'figure', attributes: { 'class': 'is-pulled-left' } },
    { name: 'Image Float Right', element: 'figure', attributes: { 'class': 'is-pulled-right' } },

into mystyles.js, but it just ignores me, no class is added to the default "image" class of the wrapping figure element.

 

What am I missing?

 

Thank you ?

[Robin S]

See the module config for Page Edit Image (which is the Process module used by the PWImage plugin):

[The G]

Thank you for taking the time to answer, Robin.

That setting is changing the class of the image inside the figure element, unfortunately. This is the code generated for a right aligned image:

<figure class="image">
  <img class="align_right" src="/path/to/image/" width="160" />
</figure>

I'd like to change the class of the most outer (is that an expression?) container, so I can move it as a block.

 

Edited November 22, 2019 by The G
Adding details

[Robin S]

10 hours ago, The G said:

That setting is changing the class of the image inside the figure element, unfortunately. This is the code generated for a right aligned image

I can't reproduce that here.

If you insert an image without the caption checkbox checked then the plugin inserts an image with the class applied and doesn't insert a wrapping figure element.

<p><img alt="" class="align_right" src="/site/assets/files/1/colin-watts-1141600-unsplash.300x0-is.jpg" width="300" />Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>

If you insert an image with the caption checkbox checked then the plugin inserts a figure + img + figcaption with the class applied to the figure element.

<figure class="align_right"><img alt="" src="/site/assets/files/1/colin-watts-1141600-unsplash.300x0-is.jpg" width="300" />
<figcaption>Your caption text here</figcaption>
</figure>

<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>

Something to be aware of is that if you change the alignment classes for Page Edit Image from their defaults you need to allow those classes in the Extra Allowed Content setting for the CKEditor field.

img figure(is-pulled-left,is-pulled-right)

It would be better if the class names configured in Page Edit Image were automatically allowed - there's an open issue about this: https://github.com/processwire/processwire-issues/issues/800

[The G]

Thank you! Dude, you really have patience ?

The source of the problem was the Media Widget plugin , which wraps another figure element on the image element, although now there is an outer figure has the correct class ?‍♂️. I could swear it wasn't there before... Oh well...
Didn't need the plugin, so I uninstalled it.

To summarize, to have it noted down and to pick the brains of the experts, this is what I did to get the styles working:

1. created /site/assets/css/ckeditor_contents.css (my choice of path) containing some of the framework's styles, like

.has-text-danger {
    color: hsl(348, 100%, 61%);
}
.is-pulled-left {
    float: left;
}

2. created /site/assets/css/admin.css containing my custom admin styles like

/* custom CKEditor styles to have in PW admin interface */
@import url("../../assets/css/ckeditor_contents.css");

/* force a min width for CKEditor combo, so I can read the text */
.cke_combopanel {
    min-width: 25rem;
}

3. imported the same /site/assets/css/ckeditor_contents.css on top of /site/modules/InputfieldCKEditor/contents.css

/* custom CKEditor styles to have in PW admin interface */
@import url("../../assets/css/ckeditor_contents.css");

4. linked /site/assets/css/admin.css on top of /site/templates/admin.php, right at the beginning of the file, before the line requiring the controller

$config->styles->add($config->urls->assets.'css/admin.css');

5. changed classes in the Page Edit Image module settings (the link is /ADMIN_FOLDER/module/edit?name=ProcessPageEditImageSelect)

 

aaaand... I got this (with Bulma classes) ?

 

As you see, I have even the kitchen sink in there, it's because of my condition called what-if-I-ever-need-it-osis ?

 

Thank you!