Static image for when no Flash installed
Permalink
Hello folks. I have a c5 site with Flash animated headers which obviously don't work on iOS devices. The client just wants to show a static image for situations where there's no Flash installed.
Can anyone tell me how they go about doing this or what you guys do in this situation. Any good solutions?
Thanks in advance for any help.
Can anyone tell me how they go about doing this or what you guys do in this situation. Any good solutions?
Thanks in advance for any help.
Thanks for the info but I'm not really sure what you mean. When I go to Add Block>Flash Content all I can do is find the swf and press Add. Where do I access the <script> code or the code that adding the Flash Content block has generated?
Thanks again.
Thanks again.
Oh... I thought you were hard coding this since it seemed to be part of your template. To implement this, you'll need to either hard code the swf into your site using the embed or object tags, or create a new area specifically for the swf.
Or you can upload the swf in the file manager and add html code referencing that using the content block and pressing the html button or by using the html block. You will need to hardcode the external script in though with something like this in your theme file, probably default.php
Hope this helps
<script type="text/javascript"> if(!FlashDetect.installed){ document.write('<?php $a = new Area('swf'); $a->display($c); ?>'); }else{ document.write('<img src="asd.jpg" />'); } </script>
Or you can upload the swf in the file manager and add html code referencing that using the content block and pressing the html button or by using the html block. You will need to hardcode the external script in though with something like this in your theme file, probably default.php
<script src="<?php echo $this->getThemePath();?>/js/flash_detect_min.js" type="text/javascript"></script>
Hope this helps
Thanks for the answer but I'm afraid I'm still not getting this... Any help really welcome here.
Say the block holding the Flash is 900px x 300px. Do I click on the block and in the html editor add something like:
<!-- #box { float: left; height: 300px; width: 900px; } -->
<div id="box">
<script type="text/javascript">// <![CDATA[
if(!FlashDetect.installed){
document.write('<embed src="name-of-swf.swf"></embed>');
}else{
document.write('<img src="name-of-jpg.jpg" />');
}
// ]]></script>
</div>
If this is correct, what would the path to the swf and the jpg be? They are in my file manager as normal. I'm totally confused...
Thanks, JP
Say the block holding the Flash is 900px x 300px. Do I click on the block and in the html editor add something like:
<!-- #box { float: left; height: 300px; width: 900px; } -->
<div id="box">
<script type="text/javascript">// <![CDATA[
if(!FlashDetect.installed){
document.write('<embed src="name-of-swf.swf"></embed>');
}else{
document.write('<img src="name-of-jpg.jpg" />');
}
// ]]></script>
</div>
If this is correct, what would the path to the swf and the jpg be? They are in my file manager as normal. I'm totally confused...
Thanks, JP
How long have you been using C5? Do you understand the concepts of adding new areas and how to write html? I'm assuming you're using a theme, placed under themes > [your theme name], and that you have at least a default.php and view.php. I'm also assuming you have an images directory where you store all of the images needed in your site. You should also have a js directory if you're using any JavaScript in your site. You need to place that script that I linked you and place it in the js directory
1. Instead of putting your image in the file manager, you're going to place it in that images directory so that you can access it easier in the next step.
2. Open up your default.php, view.php, and any other pages where you need to place the image. In your head tag, where you have your external css sheets and javascript scripts referenced, you place the reference to the script:
3. Find the place where you want the image/swf and place the script
What this will do is place a new area in your site if the user supports Flash, and displays a 300x900 image stored in your images directory if not.
4. You can now go to your site editor and add a Flash block. You can then edit the design properties of the block and define the height and width there. If this is something you have showing up on all of your pages, you'll probably want to make a global stack instead of a block.
If you have any problems, just let me know which step. This is almost as basic and step by step as I can make it. Just so you know, I've never used the Flash detect script, so my instructions are going off what was documented on the site.
1. Instead of putting your image in the file manager, you're going to place it in that images directory so that you can access it easier in the next step.
2. Open up your default.php, view.php, and any other pages where you need to place the image. In your head tag, where you have your external css sheets and javascript scripts referenced, you place the reference to the script:
<script src="<?php echo $this->getThemePath();?>/js/flash_detect_min.js" type="text/javascript"></script>
3. Find the place where you want the image/swf and place the script
<script type="text/javascript"> if(!FlashDetect.installed){ document.write('<?php $a = new Area('swf'); $a->display($c); ?>'); }else{ document.write('<img height="300" width=900" src="<?php echo $this->getThemePath();?>/images/asd.jpg" />'); } </script>
What this will do is place a new area in your site if the user supports Flash, and displays a 300x900 image stored in your images directory if not.
4. You can now go to your site editor and add a Flash block. You can then edit the design properties of the block and define the height and width there. If this is something you have showing up on all of your pages, you'll probably want to make a global stack instead of a block.
If you have any problems, just let me know which step. This is almost as basic and step by step as I can make it. Just so you know, I've never used the Flash detect script, so my instructions are going off what was documented on the site.
Thanks for your comprehensive answer, I really appreciate it.
I am quite new to c5 and have built the template myself. There is only default.php in my themes directory (no separate header.php and footer.php). I understand where to put the <script> head tag. There is a js directory in the root of my site but it is empty. I'm not sure what /js/flash_detect_min.js is referencing.
On point 3 you say to find the place where the image/swf should go and place the script you wrote. The swf goes in div that has been made a c5 area. How can I place this content in without replacing:
<div id="flash">
<? $a = new Area('bigimage'); $a->display($c); ?>
</div>
The flash area will contain a different movie on each page so that part has to be changeable.
Thanks again for your answer, I hope you understand my ramblings.
I am quite new to c5 and have built the template myself. There is only default.php in my themes directory (no separate header.php and footer.php). I understand where to put the <script> head tag. There is a js directory in the root of my site but it is empty. I'm not sure what /js/flash_detect_min.js is referencing.
On point 3 you say to find the place where the image/swf should go and place the script you wrote. The swf goes in div that has been made a c5 area. How can I place this content in without replacing:
<div id="flash">
<? $a = new Area('bigimage'); $a->display($c); ?>
</div>
The flash area will contain a different movie on each page so that part has to be changeable.
Thanks again for your answer, I hope you understand my ramblings.
Sorry for the late replay. Ok, so all you have is default.php. That's perfect. You don't have a header.php or footer.php, that doesn't matter, it makes for less complication. The js directory is where you place all the js scripts that your site uses, which for now is just the detection script. You need to download it and place it in your js directory:http://www.featureblend.com/flash_detect_1-0-4/flash_detect_min.js...
That's what /js/flash_detect_min.js is referencing.
I thought the image was a part of your template design, which it isn't I'm gathering. Hum dee dum. I think you should do something similar. You can keep your div, just replace
with
What this will do is use your area where you add the swf if the browser supports it, or it'll show a completely different area if it doesn't support Flash. This was you can add your files with the file manager. The reason why I didn't suggest this before is because adding the images is now a little more complicated. Because of the fact that your browser supports Flash, it'll never display the image areas in edit mode for you to add the images. You'll have to disable Flash in order to make those edits and then enable it again.
Again, this is all based on my understanding of how the script should work and I've never actually used it so I can't give you any troubleshooting with that part.
That's what /js/flash_detect_min.js is referencing.
I thought the image was a part of your template design, which it isn't I'm gathering. Hum dee dum. I think you should do something similar. You can keep your div, just replace
<div id="flash"> <? $a = new Area('bigimage'); $a->display($c); ?> </div>
with
<script type="text/javascript"> if(!FlashDetect.installed){ document.write('<?php $a = new Area('bigswf'); $a->display($c); ?>'); }else{ document.write('<?php $a = new Area('bigimage'); $a->display($c); ?>'); } </script>
What this will do is use your area where you add the swf if the browser supports it, or it'll show a completely different area if it doesn't support Flash. This was you can add your files with the file manager. The reason why I didn't suggest this before is because adding the images is now a little more complicated. Because of the fact that your browser supports Flash, it'll never display the image areas in edit mode for you to add the images. You'll have to disable Flash in order to make those edits and then enable it again.
Again, this is all based on my understanding of how the script should work and I've never actually used it so I can't give you any troubleshooting with that part.
Huge thanks for the time you have spent on this. I really appreciate it. I'll give it a bash shortly, thanks again!
No prob. And if it works out for ya, could you mark one of my posts as a best answer
Thanks, I certainly will make sure I give you a best answer as I really appreciate your help here.
I'm afraid I got the attached error when I tried that. I made sure that the <script> text was in the <head> section.
If you have any other ideas I would be grateful if you could pass them on.
Thanks.
I'm afraid I got the attached error when I tried that. I made sure that the <script> text was in the <head> section.
If you have any other ideas I would be grateful if you could pass them on.
Thanks.
It looks like you didn't put the js in right. Make sure you copy and paste exactly from what I put up two posts ago and that its not inside any PHP tags. Remember that you're including a script in your head as well as that little snippet. The snippet depends on the script to run.
Still no luck... I'm sure I'm doing this correctly, please find attached a screenshots of:
a: the <script> inside the <head>
b: my FTP client with name of .js file inside root/js
c: the .js script itself
I'm REALLY sorry I'm being a pain here. If you could have one final look I would be grateful.
Thanks.
a: the <script> inside the <head>
b: my FTP client with name of .js file inside root/js
c: the .js script itself
I'm REALLY sorry I'm being a pain here. If you could have one final look I would be grateful.
Thanks.
Can you give me a screenshot of the area where you have this:
That's where the problem is
<script type="text/javascript"> if(!FlashDetect.installed){ document.write('<?php $a = new Area('bigswf'); $a->display($c); ?>'); }else{ document.write('<?php $a = new Area('bigimage'); $a->display($c); ?>'); } </script>
That's where the problem is
You must be losing patience with me!!!
Thanks again.
Thanks again.
Take a look at your img tag on line 54. Your php seems a little messed up. And this is just me, but I usually make my php tags like this: instead of .
I got this from the PHP Manual: "PHP also allows for short tags <? and ?> (which are discouraged because they are only available if enabled with short_open_tag php.ini configuration file directive, or if PHP was configured with the --enable-short-tags option."
Edit: Oh, and I gave you the wrong info, what I wrote makes the image show if you support flash which is backwards. All you have to do is switch "bigimage" with "bigswf".
<?php ?>
<? ?>
I got this from the PHP Manual: "PHP also allows for short tags <? and ?> (which are discouraged because they are only available if enabled with short_open_tag php.ini configuration file directive, or if PHP was configured with the --enable-short-tags option."
Edit: Oh, and I gave you the wrong info, what I wrote makes the image show if you support flash which is backwards. All you have to do is switch "bigimage" with "bigswf".
Sorry about this but I'm getting a syntax error when I do the below as you suggest.
<div id="wrapper">
<div id="top">
<div id="logo"><a href="http://www.domain.com/"><img src="<?php=$this->getThemePath()?>/images/logo.png" alt="logo" border="0" /></a></div>
<div id="topnavigation">
<? $a = new Area('Header Nav'); $a->display($c); ?>
</div>
</div>
<div id="wrapper">
<div id="top">
<div id="logo"><a href="http://www.domain.com/"><img src="<?php=$this->getThemePath()?>/images/logo.png" alt="logo" border="0" /></a></div>
<div id="topnavigation">
<? $a = new Area('Header Nav'); $a->display($c); ?>
</div>
</div>
I'm making two different suggestions. One is that you have incorrect php in the img tag on line 54. It should be
You have a random = and are missing the echo statement and the semicolon at the end. And the border attribute is deprecated, so you can take that out altogether.
The other suggestion is to use <?php for the start tag. Make sure you leave a space between the tag and any code inside, like you would do for html:
<img src="<?php echo $this->getThemePath();?>/images/logo.png" alt="logo border="0" />
You have a random = and are missing the echo statement and the semicolon at the end. And the border attribute is deprecated, so you can take that out altogether.
The other suggestion is to use <?php for the start tag. Make sure you leave a space between the tag and any code inside, like you would do for html:
<div id="asd">
Sorry it's still not working but I can't bother you any more. I'll need to try something else. Thanks so much for all of your help, absolutely first class and I really appreciate it.
All the best.
JP.
All the best.
JP.
Haha well sorry to waste your time then. I set it up on my end and it worked fine. Cheers
Please don't take that as some kind of slight. For whatever reason I can't get it to work and feel terribly guilty for taking up so much of your time. I am very grateful for the amount of your time that you've given up.
Haha no I feel like I've wasted your time since it works fine for me. I just like to help people. I have my own question threads on the forum that no one responds to so I have to keep bringing them back, but oh well
Download and include this in your html pages:http://www.featureblend.com/flash_detect_1-0-4/flash_detect_min.js...
I assume you know how to do that and you're aware that including script in c5 is a little different.
Find where you have your Flash object embedded and replace it with
Another more well known approach is SWFObject, I'll let you figure that out on your own if you want.http://code.google.com/p/swfobject/...