WP Garage » shadow http://wpgarage.com wordpress tricks, hacks, and tips Wed, 16 Nov 2011 14:36:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Add SWFir to WordPress for nice rounded corners, shadows and other effects http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/ http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/#comments Sun, 14 Feb 2010 09:42:16 +0000 Rebecca Markowitz ?p=623 While 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 [...]

This post was originally published at Add SWFir to WordPress for nice rounded corners, shadows and other effects on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

While 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.

  1. Download SWFir
  2. Upload swfir.js and swfir.swf into a folder called swfir into  your theme directory
  3. Include the swfIR JavaScript file in the <head> of your document like this:
    <script type="text/javascript" src="swfir.js"></script>
  4. 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
  5. 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 } ?>

  6. 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.

This post was originally published at Add SWFir to WordPress for nice rounded corners, shadows and other effects on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/feed/ 0