About the author

Author Name is someone.
E-mail me Send mail

Recent posts

Recent comments

Don't show

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2010

Adding a Flash header to the Suffusion WordPress template

I've been doing some web design work for a charity recently using Sayontan Sinha's brilliant Suffusion WordPress template.

 The template isn't designed to support Flash so a little digging was required to integrate a Flash header into the site.

 The header is generated by a function called suffusion_display_header whch you can find in a file called actions.php.

function suffusion_display_header() {
 global $suf_sub_header_vertical_alignment, $suf_header_fg_image_type, $suf_header_fg_image; ?>
    <div id="header" class="fix">
 <?php $header = $suf_header_fg_image_type == 'image' ? "<img src='$suf_header_fg_image' alt='".get_bloginfo('name')."'/>" : get_bloginfo('name');
 if ($suf_sub_header_vertical_alignment == "above") { ?>
     <div class="description"><?php echo bloginfo('description');?></div>
     <div class="blogtitle"><a href="<?php echo get_option('home');?>"><?php echo $header;?></a></div>
 <?php
 }
 else { ?>
     <div class="blogtitle"><a href="<?php echo get_option('home');?>"><?php echo $header;?></a></div>
     <div class="description"><?php echo bloginfo('description');?></div>
<?php
 } ?>
    </div><!-- /header -->
<?php
}

The bit that generates the header is inside the <div class="blogtitle"></div> section. Adding Flash simply requires replacing the current contents with the appropriate Flash tags.

<div class="blogtitle">
<object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" id="header1" width="1000" height="125">
        <param name="movie" value="header1.swf">
        <param name="bgcolor" value="#FFFFFF">
        <param name="quality" value="high">
        <param name="allowscriptaccess" value="samedomain">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.macromedia.com/go/getflashplayer"
          name="header1"
          width="1000" height="125"
          src="header1.swf"
          bgcolor="#FFFFFF"
          quality="high"
          swliveconnect="true"
          allowscriptaccess="samedomain">
          <noembed>
          </noembed>
        </embed>
</object>
</div>

and now you have a Flash header Smile

In my case I had to modify the div in the else branch to get the header to appear.

NOTES:

  1. this is very simplistic but it works.
  2. making this work across all browsers and degrade nicely when Flash is turned off also requires more work. Luckily that work has already been done by others and it just needs to be incorporated here.
  3. true Flash integration (adding menus to the config UI etc.) would require much more work.
  4. this may not work for all configurations of the template.

For now we have a working solution, if I get some more time I'll work on cleaning this up.

 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Categories: WordPress | Suffusion
Posted by tb on Tuesday, June 01, 2010 8:58 PM
Permalink | Comments (0) | Post RSSRSS comment feed