$15
Animated graphics header: is possible?

To link: http://classic.g0su.it you can see that the header of the site consists of an image.JPG. I have heard that you can put an animated gif or flash animation of images scroll instead of a single static image. Even the new Artister 2.3 talk about it but I could not figure out how to do. For everyone: I am not an expert on WP, I might respond slowly during the day because I'm in the office and I have to work. If you need an account on the blog, let me know. Regards and thanks for your help!

mothernatur3s0n | 02/10/10 at 3:57am | Edit

(4) Possible Answers Submitted...

Last edited:
02/10/10
12:05pm
Jeff Owens says:
Open the file "style.css" which is in your /wp-content/themes/classic2010 folder. You can open it in Notepad or a similar text editor.

Look for a section that looks like this:
```
div.Header-jpeg

{

	position: absolute;

	z-index:-1;

	top: 0;

	left: 0;

	width: 1260px;

	height: 225px;

	background-image: url('images/Header.jpg');


	background-repeat: no-repeat;

	background-position: center center;

}
```
You'll need to put the animated gif file into /wp-content/themes/classic2010/images/ folder and the image should be 1260px wide by 225px in height. Name the picture whatever you want, but replace the:
```
background-image: url('images/Header.jpg');
```
section with your new name. So if your file was named "new_header.gif", you would enter:
```
background-image: url('images/new_header.gif');
```
Save the file and you should be good to go!
- 02/10/10 5:24am
  
  mothernatur3s0n says:
  Ok thanks, i will try but for flash file? because the gif have a low resolution and i want use a flash file that incorporate high resultion images.
- 02/10/10 5:56am
  
  mothernatur3s0n says:
  I have finded style.css and style.ie6.css and style.ie7.css. I must change all this css file or only style.css?
- 02/10/10 6:29am
  
  mothernatur3s0n says:
  Your solution work fine, atm im thinking if choice gif solution or swf solution.
Last edited:
02/10/10
12:05pm
Ali Hussain says:
Download the plugin here. To use this plugin, upload it to your plugins directory and activate it from plugins menu. Then go to your header.php file in themes directory and replace the header code with the following code –
```
 [kml_flashembed movie="/path/to/your/movie.swf" height="value" width="value" /]
```
Of course, replace the values with the actual height and width, and the path to the URL where you've saved the swf file.

BTW, this code can be used any place, header/sidebar/footer etc

Also you can use gif, like mentioned above.

Previous versions of this answer: 02/10/10 at 5:37am | 02/10/10 at 5:39am
- 02/10/10 6:09am
  
  mothernatur3s0n says:
  Thanks for your asnwer i will see if i can able this features without any plugin firstly.
- 02/10/10 6:50am
  
  mothernatur3s0n says:
  Exactly when you talk to header code what you mean? Im not expert, where i must repalce the original code with your "[kml_flashembed movie="/path/to/your/movie.swf" height="value" width="value" /]"?
- 02/10/10 6:57am
  
  mothernatur3s0n says:
  You must try to writing more simple cause im a newbie. Thanks
Last edited:
02/10/10
12:05pm
Dan Fraticiu says:
If you want a gif file, see Jeff's answer , but really an anymated gif that size is a REALLY, REALLY, BAD IDEEA.

For flash: get your flash file, put it in your theme folder and rename it to header.swf.

Now go to your header.php files in the theme folder, find this line:
```
<div class="Header-jpeg"></div>
```
An put this between the <div > tags:
```
<div class="Header-jpeg">

	

		<object type="application/x-shockwave-flash" data="<?php echo get_bloginfo('template_url').'/header.swf'; ?>" width="1260px" height="225">

	

	

			<param name="loop" value="true" />

			<param name="menu" value="false" />

			<p>This is <b>alternative</b> content.</p>

		</object>

	

</div>
```
Previous versions of this answer: 02/10/10 at 6:02am | 02/10/10 at 6:44am | 02/10/10 at 6:47am
- 02/10/10 6:12am
  
  mothernatur3s0n says:
  If you want a gif file, see Jeff's answer , but really an anymated gif that size is a REALLY, REALLY, BAD IDEEA.
  
  Why bad idea? I just edited the header with Jeff info's and all works perfectly: maybe you mean that one gif with 450kb of size is too big? The swf file is 2mb, so what the difference? I will try your solution just now.
- 02/10/10 6:23am
  
  Dan Fraticiu says:
  Yeah the size is just half the story, gifs can have only 256 colors and at that size it will show.
  
  It's more of an estetic problem than a tachnical one, but that is not the point of this question.
- 02/10/10 6:27am
  
  mothernatur3s0n says:
  I tryed to modify the h eader.php how u writed up:
```
<div class="Header-jpeg">



<object type="application/x-shockwave-flash"



  data="<?php echo TEMPLATEPATH.'/header.swf'; ?>" width="1260px" height="225">















  <param name="loop" value="true" />



  <param name="menu" value="false" />







  <p>This is <b>alternative</b> content.</p>



</object>







</div>
```
  But apparentyl this solution dont works fine, look the ss file that i have attached. On Firefox the header is static and on left side up appears this write: "This is alternative content." On IE 8.0 the header appears white without any image.
  
  Attached Image
- 02/10/10 6:47am
  
  Dan Fraticiu says:
  Try is:
```
<div class="Header-jpeg">

	

		<object type="application/x-shockwave-flash" data="<?php echo get_bloginfo('template_url').'/header.swf'; ?>" width="1260px" height="225">

	

	

			<param name="loop" value="true" />

			<param name="menu" value="false" />

			<p>This is <b>alternative</b> content.</p>

		</object>

	

</div>
```
- 02/10/10 6:55am
  
  mothernatur3s0n says:
  Nothing to do, same problem!
- 02/10/10 6:59am
  
  mothernatur3s0n says:
  Excuse me but perhaps i must complete some parameters in this your code?, example: templatepatch or i just must copy and paste it how original?
- 02/10/10 7:00am
  
  Dan Fraticiu says:
  Then check if you have put the swf file in the theme folder and it's named header.swf. I tried the solution localy and it works fine. The problem is that it doesn't find the file, or the path is generated wrong.
  
  If that the file is where it should be, please upload the changes or give me some kind of access to your blog.
- 02/10/10 7:02am
  
  Dan Fraticiu says:
  This code should work just fine, if the file is in the theme folder (wp-content/themes/[theme_name]/header.swf).
```
<div class="Header-jpeg">



	



		<object type="application/x-shockwave-flash" data="<?php echo get_bloginfo('template_url').'/header.swf'; ?>" width="1260px" height="225">



	



	



			<param name="loop" value="true" />



			<param name="menu" value="false" />



			<p>This is <b>alternative</b> content.</p>



		</object>



	



</div>
```
- 02/10/10 9:11am
  
  mothernatur3s0n says:
  How must are the path? I pref if you can use different color where i must change the path with my path. Atm the swf file is located in /web/wp-content/themes/classic2010/header.swf. So i n eed get this patch where? Im sorry im very newbie
- 02/10/10 10:01am
  
  Dan Fraticiu says:
  I don't know, it should work then. Try replacing this:
```
<?php echo get_bloginfo('template_url').'/header.swf'; ?>
```
  with the path to your swf file, some thing like this:
```
http://classic.g0su.it/wp-content/themes/classic2010/header.swf
```
- 02/10/10 10:58am
  
  mothernatur3s0n says:
  Ok now work fine. The loading time is higher respect to the "header animated GIF" format. And a white board accompanies the image rotation, that does not appear with the gif version. The images are all the same size. Any suggestions? We are near to the complete solution i think!
- 02/10/10 11:43am
  
  Dan Fraticiu says:
  If by "white board" you mean the white before the image loads, it's from the flash file, I can't help you with that, you could make the flash file background black, I think this might help: http://kb2.adobe.com/cps/159/tn_15944.html or try using a preloader (http://www.google.ro/search?aq=0&oq=flash+pre&sourceid=chrome&ie=UTF-8&q=flash+preloader) I don't know Flash so I am just guessing.
Last edited:
02/10/10
7:18am
Julio Protzek says:
If you need any help I can log in and solve it :)