Apply CSS to image?

7 posts by 4 authors in: Forums > CMS Builder
Last Post: May 16, 2014   (RSS)

By lanesboroweb - May 13, 2014

I have added this css entry to wysiwyg_custom.css:

.responsive-image {
height:auto;
width:80%;
}

Obviously, this is for mobile use. I can't seem to apply this to images. It gets applied to the <p> tag ahead of the <img> tag. Is there a way to apply it to the image itself and in a way that my client will be able to handle?

It could be operator error on my part.

I have added the 'styleselect" function to the wysiwyg.php file.

Thanks.

Dave

By Toledoh - May 14, 2014

I would try changing the css to 

p.responsive-image img {
height:auto;
width:80%;
}

Cheers,

Tim (toledoh.com.au)

By lanesboroweb - May 14, 2014

Thanks for the suggestion, but apparently that is not going to work either. When I make the change to wysiwyg_custom.css file by changing

.responsive-image {
height:auto;
width:80%;
}

to

p.responsive-image img {
height:auto;
width:80%;
}

I no longer see the style in the Styles dropdown in the editor.

There must be another way to apply a responsive image style directly to the image and not to the <p> tag ahead of it.

Thanks much.

Dave

By Toledoh - May 14, 2014

Sorry.

Have the original in the wysiwyg.css

.responsive-image {
height:auto;
width:80%;
}

But in you style for the website - use the second.

p.responsive-image img {
height:auto;
width:80%;
}

This way you can apply the style to the paragraph in the editor, and it is picked up in the website.

Ages ago I think I made a change to tnymce that gave a style select dropdown to the image window - but I can't remember where or what I did...

Cheers,

Tim (toledoh.com.au)

By gregThomas - May 16, 2014

It's possible to apply classes and ID's to images by installing the advanced image plugin for the WYSIWYG.

You can follow these steps to install it:

  1. Download the attached advimage.zip file.
  2. Extract the advimage directory into your cmsAdmin/3rdParty/tiny_mce/plugins/ directory.
  3. Edit the file wysiwyg.php file, or copy it and create a new version called wysiwyg_custom.php in /cmsAdmin/lib/.
  4. Modify the file to include the advanced images plugin, to do this modify line 19 to look like this:

     'plugins'   => 'inlinepopups,contextmenu,table,fullscreen,paste,media,spellchecker,loremipsum,advimage',

and modify line 69 to look like this:

    plugins: "inlinepopups,contextmenu,table,fullscreen,paste,media,spellchecker,advimage",

Now clear out any tiny mce cache files from your data directory (/cmsAdmin/data/), and refresh a CMS page with a WYSIWYG on it. Now when you click the add image button, you'll have a lot more image options, one of which includes the ability to add a class and ID to an image.

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com
Attachments:

advimage.zip 11K

By lanesboroweb - May 16, 2014

Exactly what I was looking for. Enabled and working. Thanks!

Dave