Adding classes to images in "body text" area

[SoccerGuy3]

I am trying to figure out how to add a class to an image. The image would be uploaded into the image field on a page and then placed into the "body text" of the page (ckeditor). I dont' see any place to add class tags to an image. Am I missing it somewhere? Module not installed correctly?

[mr-fan]

You have to search for CKEEditor using own styles so you can set the CSS classes in your mystyles.js needed and use it via the RTE field after inserting a image:

example:

CKEDITOR.stylesSet.add( 'mystyles', [

	//images
    { name : 'Image left'        , element : 'img',  attributes : { 'class' : 'thumbnail align_left' }  },
    { name : 'Image right'        , element : 'img',  attributes : { 'class' : 'thumbnail align_right' }  },

or you chould search for a module that is named ImageInterceptor so you have control over inserted images and not the user.

regards mr-fan

[SoccerGuy3]

You have to search for CKEEditor using own styles so you can set the CSS classes in your mystyles.js needed and use it via the RTE field after inserting a image:

example:

CKEDITOR.stylesSet.add( 'mystyles', [

	//images
    { name : 'Image left'        , element : 'img',  attributes : { 'class' : 'thumbnail align_left' }  },
    { name : 'Image right'        , element : 'img',  attributes : { 'class' : 'thumbnail align_right' }  },

or you chould search for a module that is named ImageInterceptor so you have control over inserted images and not the user.

regards mr-fan

Most of that I didn't understand   , but the module looks like it solves the problem! Thanks.

[Martijn Geerts]

Can I ask you the reason you want to add a class to images ?

[SoccerGuy3]

Can I ask you the reason you want to add a class to images ?

Mainly to make images responsive when used as a banner image on a page. I want to add the responsive (bootstrap) class to them. For example:

[gebeer]

You could also accomplish this with pure CSS.

Lets say your CKEditor content gets ouput in your template inside a <div class="maincontent">CKEditor content with <img> tags</div>

If you are using SASS version of Bootstrap, in your scss you can do

.maincontent img {
  @extend .img-responsive
}

If you are using plain CSS (taken from the img-responsive class)

.maincontent img {
  display: block;
  max-width: 100%;
  height: auto;
}

[SoccerGuy3]

You could also accomplish this with pure CSS.

Lets say your CKEditor content gets ouput in your template inside a <div class="maincontent">CKEditor content with <img> tags</div>

If you are using SASS version of Bootstrap, in your scss you can do

.maincontent img {
  @extend .img-responsive
}

If you are using plain CSS (taken from the img-responsive class)

.maincontent img {
  display: block;
  max-width: 100%;
  height: auto;
}

  Thanks Gebeer! That's actually what I ended up doing as a stop-gap until I could fix it properly. So that it didn't apply to every img inside the main content I added an extra level and put those banner pics inside a <h6>.

.main h6 img {
	display: block;
	max-width: 100%;
	height: auto;
}

[mr-fan]

Most of that I didn't understand   , but the module looks like it solves the problem! Thanks.

You could take my advice to search for those terms and get a other solution to "teach" your CKEEditor field to have some extra CSS classes on several HTML tags like ul, img and so on...http://bfy.tw/2X2g

so no need for extra CSS element dependancy just use the plain HTML tag and add a class...

(understanding is no problem - mostly it is searching and reading with all this technical things - not meant as criticism to you or your question)