How to embed a slideshow linked to your SmugMug photo gallery

If you are reading this then you probably have noticed the flash slideshow I have running above this post. I have tried different ways of linking and or embeding photos from various sources such as Gallery2 and Adobe Flash Gallery that I have used to display photos on this blog.

What I really wanted to do was to have one gallery SmugMug for showing and selling photos. I wanted to link to or embed photos that I have in my SmugMug galleries to my WordPress blog. Sure you could load the image into your post or page and do a url link manually to the image in your gallery but this is a real pain. Well some of the code wizards at SmugMug have made it possible to embed a flash slideshow gallery into your site.

I must admit I had problems at first trying to configure this and nearly gave up. But finally I managed to get it working correctly. I wanted to pass on this information so that if you would like to do this in your site you will have fewer problems.

I have had a photo gallery with SmugMug for a few years now, I signed on soon after they launched. I have been very satisified with their service. Their system is fast, reliable and you can even customize the theme of your site. I have to say that SmugMug rocks. The help and support they provide to help you customize your site is excellant. If you need a gallery for your photos to show your friends or if you would like to sell your photos, then you should check out SmugMug.

Now that you have made the decision that you want to add the slideshow to your site you must first decide where and how you want to display the slideshow. If you have a blog like WordPress then you have several options. You can put the code in a post, a standard page, a permenent static page or add it permanently to your index.php file as I did.

If you want to put it in a page it won’t be displayed at all unless someone clicks on the page menu link to go to that page. In a post it scrolls down and out of sight as you post more posts. Plus you will need a plugin like Exec-php to be able to run the code in a post or a page.

I tried this and it works great but you do have to disable the wysiwyg editor everytime for that post or page. To me the decision was easy I wanted to permanently display it on my home page so I decided at least for now to embed it in my index.php file which is what you see above in this page.

To embed the code into your index.php file you need to open it with your choice of html editor or notepad.

This describes how I modified my index.php for WordPress. Create a new div id just below the sidebar code. and before the content id.

My additional code is in orange below:

To modify for your SmugMug gallery all you need is to change fmathers (leave the #46; they replace the periods) to your domain name and the albumid to your own and the clickUrl to the gallery and albumid where you want to send them. I have mine set to the album I’m showing as you can set the slideshow to only one of your albums. To find out your albumid navigate to that gallery in SmugMug and make note of the url. Mine was http://frankmathers.smugmug.com/gallery/691719_uDW2F#30075151_uvige change only the numbers in red this is your albumid number.

There are many parameters such as size, border, border thickness, or whether or not you want the bottom thumbnail scroll bar, to name a few, that you can change to suit your needs.

For more information check out the SmugMug wiki.

<?php get_header(); ?>

<?php get_sidebar(); ?>

<div id=”intro”>

<object align=”middle” height=”400″ width=”600″>
<param name=”movie” value=”http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=691719&transparent=true&crossFadeSpeed=500&clickUrl=http://www#46;fmathers#46;com/gallery/691719“>
<param name=”wmode” value=”transparent”>
<param name=”bgcolor” value=”000000″>
<param name=”allowNetworking” value=”all”>
<param name=”allowScriptAccess” value=”always”>
<embed src=http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=691719&showThumbs=false&transparent=true&borderThickness=0&borderColor=9B9F8B&showLogo=false

&crossFadeSpeed=500&clickUrl=http://www#46;fmathers#46;com/gallery/691719 wmode=”transparent”

type=”application/x-shockwave-flash” allowScriptAccess=”always” allowNetworking=”all” height=”400″ width=”600″>

</embed></object>

</div>

<div id=”content”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”post”>
<h1><a href=”<?php the_permalink() ?>” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h1>
<h4>by <?php the_author(); ?> – <?php the_time(‘F j, Y’); ?></h4>
<?php the_content(‘Read the rest of this entry »’); ?>
<div class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> – <?php comments_popup_link(‘Be the first to comment »’, ’1 Comment »’, ‘% Comments »’); ?><br/> <?php edit_post_link(‘edit this post’, ”, ”); ?></div>
</div>
<?php endwhile; ?>

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘« Previous Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Next Entries »’) ?></div>
</div>

<?php else : ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
</div>

<?php get_footer(); ?>

You may have to modify your style.css file for the new div. Here is my addition to my style.css in blue text below.

#intro {
float: right;
width: 738px;
height: auto;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
border-top: 1px solid #9B9F8B;
border-right: 1px solid #9B9F8B;
border-left: 1px solid #9B9F8B;
border-bottom: 1px solid #9B9F8B;
background: #E4E7D9;
text-align: center;
}

#intro h1 {
font-family: Arial, sans-serif;
font-size: 15pt;
color: #4B4B4B;
letter-spacing: -1px;
font-weight: normal;
margin-bottom: 8px;
margin-top: 2px;
padding-top: 10px;
padding-bottom: 0px;
height: 24px;
text-align: center;
}

Well I hope this helps. Now show off your photos!