Edit htmleditor image template

Silverstripe Version: 5.2.0

Question: How do I edit the default template for images in the htmleditor

I’m currently trying to add a css class to all images in all HTMLEditorFields on the site. My other theme files such as Page.ss are loading properly. I tried overriding mytheme/templates/SilverStripe/Assets/Shortcodes/ImageShortcodeProvider_Image.ss, mytheme/templates/DBFile_image.ss and mytheme/templates/DBFile_image.ss but nothing worked. I also tried building and flushing all templates but that did not help.

You say “in all HTMLEditorFields” - do you mean when it is inside the WYSIWYG in the CMS specifically, or do you mean on the front-end?

The SilverStripe/Assets/Shortcodes/ImageShortcodeProvider_Image.ss template will be the correct template for these in CMS 5.3, but in 5.2 it doesn’t exist yet.

In Silverstripe CMS 5.2 the WYSIWYG images don’t use a template, instead the HTML markup is directly generated in the shortcode provider.

You’ll need to either override the shortcode provider with your own or else wait for CMS 5.3

1 Like

Yes, I meant on the front-end.

Your comment really helped me, thanks. Can you point me in the right direction for overriding the shortcode? I’d guess I’d do that with dependency injection but I never really did something that deep in the cms

In my response I linked to the relevant documentation, here it is again: https://docs.silverstripe.org/en/5/developer_guides/extending/shortcodes/#shortcodes There’s a “Defining custom shortcodes” section on that page.

If you’re having trouble with anything specific in those docs I’ll be happy to help, but maybe give that a look first.

Oh, I didn’t think you can override existing shortcodes. I’ll create a pull request for that part of the documentation to clarify that. Thanks for your help