« Todays nifty toy | Main | Random images »
July 12, 2005
Category images (and wrapping text around them)
For some time, I'd noticed images for each category on Webkittyn Warbles, and been quite impressed by it. I also had absolutely no idea on how to do it.
The Warbler was very helpful, giving me the code snippet to insert, and several examples. The code, as it often is, was amazingly simple. And after the snippit is in, just upload an image to the server with the same name as the category. Thank you!
The image for "Observations on the news!" is observations_on_the_news.jpg
It also placed the images on the left, which I didn't want, and didn't wrap text around them, which I did. It also requires that all images are of the same type (either .jpg or .gif).
Editing the CSS and creating a new image class called floatright resolved the first two issues.
Image code for index.php (added inside <MTEntries>)
<img class="floatright" src="<$MTBlogURL$>images/<$MTEntryCategory dirify="1"$>.jpg" alt="<$MTEntryCategory remove_html="1"$>"/>
CSS Code, added after body{...}
img.floatright {
float: right;
clear: right;
margin : 0 0 0 0;
padding : 0 0 0 0;
width : auto;
}
The clear: right; ensures that images 'stack up' down the right hand side of the page. It's a matter of preference. Without it, you get a staggered effect if the images would overlap, with the top image being rightmost, and the next being shunted to the left.
I also have transparency settings in mine, but that's a different kettle of seal food.
Scrawled illegibly by Meathe at July 12, 2005 10:40 AM
Comments