Apply CSS to image?

I would try changing the css to 

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

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

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...

This is an interesting question, and I did some digging around to see if there is an answer. Unfortunately I haven't found anything yet.

A few discoveries:

You can apply an inline class to a hyperlink

You can select some text within a block element an apply a class to it

If you click on a image that's within a paragraph along with some other text, when you apply the style, it is applied to the image and not the paragraph

But if the image is the only element inside of a paragraph, the style is applied to the paragraph.

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

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

Dave