Chose Img Class

[atar]

Hi, it's me again

1) I want to use processwire in combination with bootstrap and there is a class for images in bootstrap, called img-responsive.

2) I would prefer to use the WYSIWYG editor to write my text.

If I upload an Image and insert it to the text (body), can I then tell the editor (or the image module) anyhow that

this image is from a specific CSS class?

Edited December 31, 2015 by atar

[Martijn Geerts]

I don't understand your question, maybe same goes for other people.

[kongondo]

What @Martijn said....but I'll attempt a guess
 
 If you are talking about a HTML class to add to your uploaded images (uploaded in a page edit session) to target with your CSS, ProcessWire doesn't output markup so you will have to add those on your own at runtime, e.g.

$out = '';
if(count($page->images)) {
   foreach($page->images as $image) $out.= '<img src="' . $image->url . '" class="myImageClass">';
}
echo $out;

If you are talking about images you insert in the RTE, you can use the RTE to add your classes

Welcome to PW and the forums

[atar]

Sorry for my bad english, i tried to make it a bit more clear (see above). I will read your answers tomorrow - thank you so far!

[rick]

Hello atar, and welcome to the forums!

-- Don't worry about your English. Ask any questions you want and everyone will jump in to help.

Edit: Misunderstood the question.

[Robin S]

If you are talking about images you insert in the RTE, you can use the RTE to add your classes

Just to expand on this a bit: unlike the standard CKEditor image plugin, the PW image plugin does not provide a text field where you can type in a class for the image. So you would need to add "img-responsive" to a custom JS styles set and apply the class to the image using the styles dropdown. Info on how to load a custom style set is here.

If you want the "img-responsive" class to be applied to every image in your CKEditor field (so you don't have to manually add it to every inserted image) there are a couple of options:

1. Add the class client-side with jQuery. This is a nice easy option. For example if your body text is inside a div with the class "body"...

$(".body img").addClass("img-responsive");

2. A little more challenging but no big deal if you're comfortable with PHP... create your own text formatter module that adds the class at runtime.

[atar]

Thank you very much Cerulean (and the others too), the custom JS styles are exactly what I was looking for!