Styling content images in Joomla!
As you may well know, I work for a company who’s base CMS of choice is Joomla! While this is an extremely powerful platform for developing complete web-applications and packages, it is FAR from getting anywhere near standards-based.
I have spent the past 10 or so months working with this system, in particular learning how to beat it into submission. It still leaves a lot to be desired, but believe it or not I can ACTUALLY GET IT TO VALIDATE among other things. I will endeavor to share my experience and hacks with you over the coming weeks and months, but today I want to quickly share my technique of styling content images.
JCE, mosCE, TinyMCE; which ever “Content Editor” you plug into Joomla! they all do a horrible job of keeping the HTML clean. IMG (image) tags in-particular often come out looking like they just redeemed a $500 gift voucher at Crazy Clarks (or any other “$2 shop”).
Your typical IMG tag will look something like this:
<img width="100" vspace="5" hspace="5" height="100" border="0" align="left" alt="thumb_24324.preview_sub" title="thumb_24324.preview_sub" src="my/image/path.jpg" />
Critique? Well, basically most of the attributes could be scrapped if it just put a class in each image that we can use in CSS. If this were the case, we could lose border, hspace, vspace and align. But, what really urks me the most is the use of hspace and vspace. Both of these attributes are Microsoft proprietry (surprise surprise) and useless outside of IE.
If you’re not familiar with these attributes basically they just put spacing around the image (relative only to text). So, for instance if the image is aligned left and the hspace attribute is set to 5, it will put a 5 pixel margin on the right hand-side between the image and the text.
Seeing as none of the mentioned editors will put a class on all our images, we need to be able to emulate this behaviour in all our standards-based browsers. Now, we could get smart with JavaScript, but we don’t have to seeing as CSS gives us so much power already.
So, what can we do? Well, if you’ve been a good little web-developer and you’ve read up on your CSS 2 selectors, you’ll know that we can use the attribute selectors to detect the value of the “align” attribute and style accordingly.
For Joomla! Specifically, we don’t want to style ALL images on a page; Just the one’s inside our content area. Thankfully Joomla! wraps all our content in an element (a table God-forbid) with the class “contentpane” or “contentpaneopen”. Obviously, we can use this class as a handle for our styling:
.contentpane img,
.contentpaneopen img {
border: 1px solid #CC0038;
}But, what about our margins James??? Well, like I was saying earlier we can use attribute selectors that detect the alignment of the image and apply margins appropriately:
.contentpane img[align="left"],
.contentpaneopen img[align="left"] {
margin: 0 .5em .5em 0;
}
.contentpane img[align="right"],
.contentpaneopen img[align="right"] {
margin: 0 0 .5em .5em;
}How ya like dem apples??? A simple fix to simulate hspace and vspace in “REAL” browsers.
