Add SWFir to WordPress for nice rounded corners, shadows and other effects
Sunday, February 14th, 2010While collaborating with our colleagues at Red Door on a project, we came across SWFir, an amazing way to add some nice subtle effects to WordPress site images. SWFir automatically adds a flash layer on top of images that can round the corners, add a shadow, rotate, or add a border. I found the directions on their site a little skimpy for WordPress users so I thought I’d share how to integrate SWFir for WordPress users.
CSS3 is also great for rounded corners and shadows, but unfortunately we still need to keep in mind people using all different versions of Internet Explorer.
- Download SWFir
- Upload
swfir.jsandswfir.swfinto a folder called swfir into your theme directory - Include the swfIR JavaScript file in the
<head>of your document like this:
<script type="text/javascript" src="swfir.js"></script> - Add this to footer.php just before the closing body tag<script type=”text/javascript”>
// swfIR
window.onload = function() {
var sir = new swfir();
sir.specify(“border-radius”, “15″);
sir.specify(“src”, “<?php bloginfo(’stylesheet_directory’); ?>/swfir/swfir.swf”);
sir.swap(“.latest-posts-center img”);
sir.swap(“.latest-posts-center a img”);
sir.swap(“img.rounded”);
</script>You may choose from any of these parameters:
- border-radius
- border-width
- border-color
- shadow-offset
- shadow-angle
- shadow-alpha
- shadow-blur
- shadow-blur-x
- shadow-blur-y
- shadow-strength
- shadow-color
- shadow-quality
- shadow-inner
- shadow-knockout
- shadow-hide
- rotate
- overflow
- link
- elasticity
- Add this in the loop somewhere Note: this is assuming that your images are not organized by month and day under Settings > Miscellaneous – the box is unchecked.
Also, you can change the width to whatever you want and it will resize automatically<?php if ( get_post_meta($post->ID, ’rounded_img’, true) ) {
$postimg = get_post_meta($post->ID, ’rounded_img’, $single = true);
if((stristr($postimg,’http’)===FALSE) && (stristr($postimg,’wp-content’)===FALSE)) {
$postimg = get_bloginfo(’siteurl’).”/wp-content/uploads/”.$postimg;
} ?>
<div>
<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
<img src=”<?php echo $postimg; ?>” alt=”" width=”140″ /></a>
</div>
<?php } ?> - When you create a post, upload an image and copy the Link URL. Create a custom fields key rounded_img and paste the Link URL in the Value Box.
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
