Wordpress post image customization

Question

Hello, I just started creating my first WP theme after doing the HTML/CSS. All good so far! Almost done in fact. One problem though:

I want each post image to have a surround around them. I could include it in the image, but I'd rather that when I post an image, it sits inside the surround.

I thought of offsetting a BG image on each post and having the first img of every post sit in that area. Anyone here know a better way to do this?

Thanks

Answer 1

Using CSS2, that sounds like the best idea. Though, I'm not sure if you need to use an offset. Just set up something like (assuming images will be of uniform size):

.imgbackground {
height: 23px;
width: 23px;
padding: 3px;
background: url(image.png);
}

Then just have the html like so:

<div class="imgbackground">
<img src="img.png">
</div>

CSS3, however, allows you to have an image as a border. As per this link: http://www.css3.info/preview/border-image/

Could be useful if you're not overly concerned about full cross-browser compatibility.

Answer 2

All good, in the meantime I found WP3 has a featured image you can add now through functions.php:

add_theme_support( 'post-thumbnails' );

Then you just use:

<?php the_post_thumbnail();?>

To pull it into the post. Which is good because you can then style that, and only that (without using an image selector that affects all images, or using JQ to select the first image) which seems like a perfect solution!

Thanks