Writing an extension to add a class to an image

hindsight

Hi - I'm trying to write an extension at the moment, and I'm seeing some behaviour that I don't understand and am hoping that someone can help explain...

Helped by some example code, I have the following extend.php:

`<?php

use Flarum\Extend;
use Flarum\Locale\Translator;
use Flarum\Post\Post;
use Illuminate\Support\Arr;
use s9e\TextFormatter\Utils;

return [

(new Extend\Formatter())
    ->render(function ($renderer, $context, $xml) {
        return Utils::replaceAttributes($xml, 'IMG', function (array $attributes) use ($context): array {

            $attributes['title'] = 'image_title';
            $attributes['alt'] = 'image_alt';
            $attributes['class'] = 'image_class';

            return $attributes;
        });
    }),

];
I can see that this is partly working - it generates images in posts, looking like this:<img src="http://somewhere.com/11f079522d2ac963197d7b46afabb703.jpg" title="image_title" alt="image_alt">`

The trouble I have though - why doesn't this set a class attribute in the img HTML tag? - if replaceAttributes doesn't allow class to be set - is there any other way that I can force an image to have a class?

Thanks,
Mike

luceos

hindsight perhaps that attribute isn't yet allowed in textformatter: https://s9etextformatter.readthedocs.io/Plugins/HTMLElements/Synopsis/#allowing-some-safe-html

clarkwinkelmann

Utils::replaceAttributes doesn't modify an HTML node. It modified an XML node in TextFormatter's internal formatting of a post.

What causes an attribute in the XML to appear in the HTML is because it's mapped in the TextFormatter template for that XML tag. Many tags use names that are the same between the internal definition and the HTML attribute, but it doesn't have to be. HTML attributes can also be dynamically added in the template itself through logic expressions rather than having to use a Flarum extender to decide when to apply the content. I don't have any example to link to right now, but there are methods to extend a template or completely override it with your own.

hindsight

@clarkwinkelmann , @luceos - thanks for both of your replies.

For the moment, I've worked around this by using javascript to directly update the HTML in the browser, which feels a bit dirty, but it works for the moment.

As an aside, it feels like there is an opportunity for flarum and for fof/upload to assign default class types to objects (such as images), so that styles might be customised.