Jump to content

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


The G
 Share

Recommended Posts

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 😀

Link to comment
Share on other sites

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 by The G
Adding details
Link to comment
Share on other sites

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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)

2019-11-25-140327.png.e3aca5decedfa3e01a80d98988097882.png

 

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

 

2019-11-25-133255.jpg.4c15a5be90da7eb76c94750edaa9ac5b.jpg

2019-11-25-133719.jpg.c1433b58e1b07d53966184909d196c05.jpg

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...