You can change the appearance of an image when you choose to edit the underlying HTML of an Article.
You may for example want to convert a square image into a round one, or perhaps square off or round the corners of another image.
But not everyone wants to have to edit the underlying HTML.
It is good to know then that the image editor included with the JCE Content Editor extension, enables you to make such changes without editing the HTML.
It is first however necessary to create some Custom Styles, ouch!
No worries, WYNCHCO website designs include the following Custom Image Styles to help you.
Custom Image Styles
Use these Custom Styles to locally change the appearance of an image.
Local style will override any globally assigned Custom Style.
Use this style to make a square image perfectly round.
Or to make a rectangular image oval.
Use this style to make the corners of an image round (radius 5 px).
Use this style to make the corners of an image round (radius 10 px).
Use this style to make the corners of an image round (radius 15 px).
Use this style to make the corners of an image square.
Add a Custom Style to an Image using JCE Content Editor
After signing into your website, select an Article to edit.
Select an image.
Select the Image Editor icon from the panel at the top of the Content Editor.
Look under the Advanced tab in the Image Editor pop up window.
See image below.
Enter name of Custom Style in field labelled Classes.
Result: square image displayed as a circle.
Note: If we had applied the Custom Style to a rectangular image the result would be an oval.
Personal Joomla! CMS Help & Support
We coach, help and support managers with responsibility for Joomla! websites in organisations across Cheshire, Manchester, Merseyside, North West England & the UK.