Flash movie in header WordPress
- REFUNDED
I'm pretty new to WordPress. I want to put an endlessly looping SWF in the header area of the blog I'm designing. I've installed the Kimili Flash Embed plugin, but frankly I can't figure out where to put the embedding code, despite the plugin's FAQ.
If you go here: [[LINK href="http://www.motionart.org"]]MotionArt.org[[/LINK]] you'll see the static "space-y" image at the top, above the logo. It's that image that I want to replace with the SWF.
If you inspect the page with Firebug, you'll see that that image is in a <div> called "top", and here's the CSS for it:
#top {
background: url(images/reactor.jpg);
display: block;
float: left;
clear: right;
width: 670px;
height: 207px;
padding-top: 15px;
color: white;
text-align: right;
}
Here's the relevant (I hope) code for the header.php:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
</head>
<body>
<div id="container">
<div id="wrapper">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="687" height="225" id="myFlashContent">
<param name="movie" value="images/dome_animation.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/dome_animation.swf" width="687" height="225">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
This is a template that I'm modifying, and in actuality, although it's in the CSS, I can't find a <div> called "top" actually called for. I've tried to place a <div id="top"> around the embedding code, but it breaks everything, and additionally places everything above the image I want to replace instead of in place of it. Finally, the SWF is exactly the same size as the JPG.
The code about the SWF object is generated by the Kimili plugin. If you have a better way, I'm happy to use it instead.
Within the code about the SWF I'm also not sure what the syntax should be for finding where the file is. Right now it's in the "images" folder within the theme.
Answers (2)
Utkarsh Kukreti answers:
Try looking for div#top in sidebar.php, and insert the code in it.
Modify the code to this, in order to load the swf from theme directory.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="687" height="225" id="myFlashContent">
<param name="movie" value="<?php template_url(); ?>/images/dome_animation.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="<?php template_url(); ?>/images/dome_animation.swf" width="687" height="225">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Buzu B answers:
Hi. I went to your link, tried to find the #top div, but it is not there. The image is in a div with no id. What theme are you using? that would be useful information. If you want, I can take a look at your files. PM me if you are interested and I'll send you my email.
Buzu B comments:
Ok, never mind. I found out about the theme and the correct link to your wordpress installation. So, what you have to do, is go to sidebar.php, and at the very top you will see this:
<div id="sidebar">
<ul>
<li id="sb_top">
<div class="sb_logo">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
<!-- The logo - Change it to be your own -->
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="Home" />
<!-- ...or you can remove the logo and add the line below -->
<!-- <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> -->
<!-- ... and now the slogan: -->
<br />
<?php bloginfo('description'); ?>
</a>
</div>
</li>
<!-- Navigation -->
Find this part:
<!-- The logo - Change it to be your own -->
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="Home" />
It's like the fifth or sixth line. Erase that part, and put your code there.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="687" height="225" id="myFlashContent">
<param name="movie" value="<?php template_url(); ?>/images/dome_animation.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="<?php template_url(); ?>/images/dome_animation.swf" width="687" height="225">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
That above is what you would put instead of the
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="Home" />
That should solve the problem.