Joomla! Forum - community, help and support

I currently have a flash.swf header but have been told that it's better for SEO purposes to switch to a normal image. I wish therefore to change to a .gif image but unsure what requires to be changed to make this happen. I believe the index.php doc needs editing, but there is so much data relating to flash/adobe/flash container in this doc that I'm nervous about deleting in case it damages my site.

Appreciate any advice.

Thanks,
Dean

Hi Dean,

Do you have the flash movie in a module? If so then just remove that module and create a new custom HTML module with your image in, and place it in the position where the flash module was. You may need to use some CSS to get it looking perfect.

This is assuming a lot as there are a few different situations you could have, whether the flash movie is not in a module and is actually hard coded in the index.php for example.

Would be handy to see some code so we could advise further.

Hi Faldinio - Thinking about it, I don;t think that module relates to my header, i believe it's one that I may have created subsequently, but not activated. Sorry to confuse you!

Regards,
Dean

If you're removing the flash movie anyway, then you should be able to get rid of everything within the <object> tags. From the code you send me, it looks like you could remove everything between

<div class="art-header">

and the corresponding closing </div> tag (the last </div> tag your copied), then use CSS to style the div and add an image background, or put an img tag within the div itself. Back up your files before making any changes.

Dean, please can you post replies in the forum instead of sending private messages, so others can see.

You don't need any 'flash' information to add a gif, you only need the img tags. I suggest reading through W 3 Schools pages on how to use img tags.

http://www.w3schools.com/tags/tag_img.asp

Basically you can just replace all the flash info with

<img src="path_to_image/image.gif" alt="image_description" />

You can add other attributes as well if you wish. See the tutorials for guidance.

http://www.w3schools.com/tags/tag_img.asp

Thanks, I shall take a look at the tutorials and see how I get on. Apologies for sending PMs - thought I was replying in the forum - oops!

Hi

I can't see evidence of my latest message to you on here, so will re-send:

I am happy with the format of the new image tag which I've created, but unsure whereabouts within the index.php doc I should place the script. Also if I need to update any other doc on my site?


Below is the script within the index/php doc relevant to the current flash header, would appreciate your advice on where the new image tag should be placed and what existing data can be deleted. Many thanks!

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/swfobject.js"></script>
<div id="art-flash-area">
<div id="art-flash-container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1013" height="202" id="art-flash-object">
<param name="movie" value="<?php echo $templateUrl; ?>/container.swf" />
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&clip=<?php echo $templateUrl; ?>/images/flash.swf&radius=15&clipx=0&clipy=0&initalclipw=1013&initalcliph=202&clipw=1013&cliph=202&width=1013&height=202&textblock_width=0&textblock_align=no" />
<param name="swfliveconnect" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="<?php echo $templateUrl; ?>/container.swf" width="1013" height="202">
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&clip=<?php echo $templateUrl; ?>/images/flash.swf&radius=15&clipx=0&clipy=0&initalclipw=1013&initalcliph=202&clipw=1013&cliph=202&width=1013&height=202&textblock_width=0&textblock_align=no" />
<param name="swfliveconnect" value="true" />
<!--<![endif]-->
<div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/down ... player.gif" alt="Get Adobe Flash player" /></a></div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<script type="text/javascript">swfobject.switchOffAutoHideShow();swfobject.registerObject("art-flash-object", "9.0.0", "<?php echo $templateUrl; ?>/expressInstall.swf");</script>

Looking at it, you should be able to remove everything and just replace it with the image. So you'd have something like:

<div class="art-header">
<img src="path_to_image/image.gif" alt="image desc" />
</div>

Without seeing the whole file and the CSS, I can't determine whether the two other divs (art-header-png & jpg) are actually adding any value, so I have just not included them.

Thanks for your reply. Yes, I believe both the art-header-png & jpg do add value - they give colour and shape to the background/padding - so I would wish to retain them. That being the case, how should the new code be written?

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

I changed the script and it works perfectly. I'm delighted and want to thank you very much for your assistance - it's most appreciated!

You're welcome.

Following on from my previous request, can you advise me how i can add a background to the header image. My new header is fne, but i have a white line between that and the body of the site, implying to me that it needs a 'black' background to cover this. The code includes the header.png and header.jpg but neither of these images is kicking in!

The code entered:

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

Thanks.

I think the header images you are referring to are:

<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>

These are not images, they are 'containers'. You need to style them using CSS if you want them to have an image as a background, or put an img tag within them if you want them to have an image inside them.

To make the background of your div black, then you just need to find the line in the CSS stylesheet that refers to "#art-header" and add "background:#000". If there is no previous styling then just add the following line to your stylesheet:

#art-header {background:#000}

Thanks

Thanks very much for the advice - most helpful & much appreciated!

I shall have a go and let you know how I get on.. :-)

Sorry the line should be ".art-header" rather than "#art-header" as it is a class not an ID

Not sure how to 'script' the art-header png to convert into a background image file. Also, do I edit in the template.css file only, or also in the index.php file?

You would edit the template.css file.
Read up on CSS styling as it can do some amazing things.

http://www.w3schools.com/css/

I'm a bit confused (not for the first time!). The art-header png in template.css already includes a 'background' image file (header.png) (with which I am happy), so do I not just edit the script in the index.php (incorporating the art-header png to reflect this? Or do i need to edit the script in the index.php file to specify the path to the header.png file? Hope that makes sense!

If the image is fine, then why are you trying to change it?

Sorry if I've not explained myself clearly! I want to include the header.png file as a background to the image I have set (header.gif) as my header. Reason being that it defines the shape. I thought I may be able to include this in the script on the index.php file? The code currently on this file is shown below, but as you point out... the PNG and JPG file are only containers.

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

I would appreciate your further advice, and sorry to be a pain!

They are only containers but they can have backgrounds set in the CSS file, as per your previous post, the art-header-png has a background property set that specifies header.png as the background.

If you want that as the background, an easy way would be to just put the img tag inside that div. Alternatively you could use CSS to position the image.

Putting the image inside the other div:

<div class="art-header">
<div class="art-header-png"><img src="path_to_image/image.gif" alt="image desc" /></div>
<div class="art-header-jpeg"></div>
</div>

I have changed my header, but still getting a shadow effect on my header (to the left & right) I managed to remove the shadow above the header by changing the 'padding' in the template.CSS (from 5px to 0px) but this had no impact on the rest of the page. I also have a shadow to the left & right of the main body of the site.