Jump to content

Adding classes to images in "body text" area


SoccerGuy3
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
}
  • Like 3
Link to comment
Share on other sites

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;
}

:rolleyes:  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;
}
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...