Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Content Editor Discussions /

Forum for content editors and CMS users.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

How to apply CSS class to inserted image?


Go to End


3 Posts   68611 Views

Avatar
dewoob

Community Member, 10 Posts

25 February 2009 at 5:26am

Hi,

I'm still using SS 2.2.2. When I insert an image into an HTMLText field, the resulting HTML does not contain any CSS class information. When I try to align the image, no class attribute is added, either. All the editor does is generate align, hspace and vspace attributes. Apart from the fact that those have been deprecated for decades, they don't even work. I have reset margins and paddings globally using something like

* {
margin:0;
padding: 0;
}

These CSS settings seem to override hspace and vspace.

I've found some "img.left" and "img.right" class definitions in typography.css, so it seems like CSS support for editor-added images is built-in - but those classes are just not used.

Are those classes supposed to be used automatically?
If so, why is it not working? If not, how can I do it manually without editing the source code?

Thank you in advance.

Avatar
grilldan

Community Member, 135 Posts

26 February 2009 at 2:11pm

I don't think you can do it without editing the source code. It's not hard to edit the source code, just find the "img" tag and add a 'class="class_name" ' to it.

start : <img src="assets/uploads/me.jpg" />
finish: <img src="assets/uploads/me.jpg" class="me" />

Avatar
dewoob

Community Member, 10 Posts

26 February 2009 at 8:56pm

Thank you for your answer. I know how to do it manually - I just thought I could either install a new version of the editor or make some config settings in order to change the editor's behaviour. I would want it to use CSS instead of deprecated HTML attributes for the aligning and positioning of images. I don't need a rich-text editor to hack HTML code...