Escape('css') converts special characters?

Kirby 4 Issues 🪲
,
1

I’m trying to add the possibility to add inline CSS to images. For that reason I’ve created a text field in the blueprint but echoing its value in the template with $field->styles()->escape('css') (as suggested at $field->escape() | Kirby CMS) converts e. g. “width: 400px” to “width\3A \20 400px“. What am I misunderstanding here?

Edit: I see that the example in the reference has the property already defined and just the value is escaped. What’s the solution for complete CSS property/value pairs then? No escaping at all?

2

See the examples in the reference, the method accepts a context param: $field->escape() | Kirby CMS

3

Hmm, thinking about this again, do I understand it correctly that, since the inline styles are printed as attribute value, it would be best to do escape('attr') then?

4

:woman_shrugging: attr or css, that’s the questions…

5

Sorry, in the template:

<img … style="<?= $file->styles()->escape('attr') ?>">

?

6

Maybe it helps if you read the comment here: kirby/src/Toolkit/Escape.php at main · getkirby/kirby · GitHub

7

OK, that means it’s not recommended to put entire CSS rules in text fields to output as inline styles? Or what’s the best way to deal with this?
I remember that TinyMCE has an image toolbar button that would bring up an overlay with image properties where you could enter inline styles just like that. It’s sanitizing the input, too, somehow.