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%;
}
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...
Tim (toledoh.com.au)
By mizrahi - May 16, 2014
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.
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:
- Download the attached advimage.zip file.
- Extract the advimage directory into your cmsAdmin/3rdParty/tiny_mce/plugins/ directory.
- Edit the file wysiwyg.php file, or copy it and create a new version called wysiwyg_custom.php in /cmsAdmin/lib/.
- 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
PHP Programmer - interactivetools.com