Solved

Loading a Random Theme/Image each page load

Posted on 2010-11-18
15
293 Views
Last Modified: 2012-05-10
Ok this might be a kind of hard question to phrase so bare with me. I'm developing a photo gallery site with member levels etc.(www.g-force.net/dev) My question though just involves the header. As you can see on the site I am using a paralex effect header that I got through the vertigo Rocket Theme. This effect utilizes 3 images layers together with mouse sensitive moving.

What I'm trying to achieve is to have a different set of 3 images load every time the page is reloaded. The idea is to create many sets of headers over time using new photos from events and have them added to the pool of randomly selected headers.

I found a piece of code that might work but I'm not too sure if it will. It basically tries to randomise the specified filename it is loading on the page so that if i had header0.png, header1.png and header2.png it would select a random one every page load. As I said I'm not 100% if this could be made to work o if anyone could confirm/deny it would be a great help.

Also if anyone has an alternative method I would love to hear it :)
01.<?php
02. 
03.if(!isset($_SESSION["curnum"]))
04. 
05.{
06. 
07.  //prefer to set original template as startup
08. 
09.  $num = 0;
10. 
11.  $_SESSION["curnum"] = $num;
12. 
13.}
14. 
15.else
16. 
17.{
18. 
19.   $num = rand(0,2);
20. 
21.   while($num == $_SESSION["curnum"])
22. 
23.   {
24. 
25.      $num = rand(0,2);
26. 
27.   }
28. 
29.   $_SESSION["curnum"] = $num;
30. 
31.}
32. 
33.?>
34.<style type="text/css">
35. 
36.#header { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/header_<?php echo $num; ?>.png'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
37. 
38.#middle { float:left; width:544px;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/bodytop_<?php echo $num; ?>.png'); background-repeat:no-repeat;}
39.</style>

Open in new window

0
Comment
Question by:Fordster55
  • 9
  • 6
15 Comments
 
LVL 1

Author Comment

by:Fordster55
ID: 34170486
Another way I thought could possibly work is create copies of the main theme with a different header each time and then find a Joomla plugin to load a random theme each page load. Or alternatively assign each menu item its own theme. But I think this method will begin to waste alot of space as there will be 10-20 copies of the same template with only 3 files changed....
0
 
LVL 13

Expert Comment

by:dsmile
ID: 34170560
Your code will work just fine, but it limits you from having flexible image name.

I suggest you to use array to store image set, so that you can define it freely.

Btw, I still use the same randomize logic you're having.
If duplicate random is definitely not allowed then keep this randomize logic.
But if it can tolerate duplicate random sometimes then only this line is enough for the whole code from line 11 through line 37
$num = rand(0, $maxKey);
0
 
LVL 13

Expert Comment

by:dsmile
ID: 34170562
Ooops, forgot to attach the code
<?php
 //prepare your images array. It might be loaded from config 
 $aryImgPool = array(
							0 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							1 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							2 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							3 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							4 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							 );
$maxKey = sizeof($aryImgPool);
if(!isset($_SESSION["curnum"]))
 
{
 
  //prefer to set original template as startup
 
  $num = 0;
 
  $_SESSION["curnum"] = $num;
 
}
 
else
 
{
 
   $num = rand(0, $maxKey);
 
   while($num == $_SESSION["curnum"])
 
   {
 
      $num = rand(0, $maxKey);
 
   }
 
   $_SESSION["curnum"] = $num;

   $aryImg =  $aryImgPool[$num];
 
}
 
?>
<style type="text/css">
 
#header { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/<?php echo $aryImg['header']?>'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#middle { float:left; width:544px;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/<?php echo $aryImg['middle']?>'); background-repeat:no-repeat;}
</style>

Open in new window

0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 13

Expert Comment

by:dsmile
ID: 34170570
Mistaken again, :(

You this code instead
<?php
 //prepare your images array. It might be loaded from config 
 $aryImgPool = array(
							0 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							1 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							2 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							3 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							4 => array('header' => 'whatevernameyoulike.whateverextyouhave', 'middle' => 'whatevernameyoulike.whateverextyouhave'),
							 );
$maxKey = sizeof($aryImgPool);
if(!isset($_SESSION["curnum"]))
 
{
 
  //prefer to set original template as startup
 
  $num = 0;
 
  $_SESSION["curnum"] = $num;
 
}
 
else
 
{
 
   $num = rand(0, $maxKey);
 
   while($num == $_SESSION["curnum"])
 
   {
 
      $num = rand(0, $maxKey);
 
   }
 
   $_SESSION["curnum"] = $num;
 
}
 
?>
<style type="text/css">
 
#header { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['header']?>'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#middle { float:left; width:544px;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}
</style>

Open in new window

0
 
LVL 1

Author Comment

by:Fordster55
ID: 34170680
Thanks for that dsmile.

I'll give that a shot now and post back with results :)
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34170786
No success yet.....

Ive got that code inside the <head> tags of the template index.php file

Do I need to specify the folder structure for my array images?

Can you spot what I've got wrong?
<?php
//Set image array
$aryImgPool = array(
							0 => array('bottom' => '1showcase-bottom.png', 'feature' => '1showcase-feature.png', 'layer1' => '1showcase-layer1.png', 'layer2' => '1showcase-layer2.png', 'layer3' => '1showcase-layer3.png'),
							1 => array('bottom' => '2showcase-bottom.png', 'feature' => '2showcase-feature.png', 'layer1' => '2showcase-layer1.png', 'layer2' => '2showcase-layer2.png', 'layer3' => '2showcase-layer3.png'),
							2 => array('bottom' => '3showcase-bottom.png', 'feature' => '3showcase-feature.png', 'layer1' => '3showcase-layer1.png', 'layer2' => '3showcase-layer2.png', 'layer3' => '3showcase-layer3.png'),
							3 => array('bottom' => '4showcase-bottom.png', 'feature' => '4showcase-feature.png', 'layer1' => '4showcase-layer1.png', 'layer2' => '4showcase-layer2.png', 'layer3' => '4showcase-layer3.png'),
							4 => array('bottom' => '5showcase-bottom.png', 'feature' => '5showcase-feature.png', 'layer1' => '5showcase-layer1.png', 'layer2' => '5showcase-layer2.png', 'layer3' => '5showcase-layer3.png'),
							5 => array('bottom' => '6showcase-bottom.png', 'feature' => '6showcase-feature.png', 'layer1' => '6showcase-layer1.png', 'layer2' => '6showcase-layer2.png', 'layer3' => '6showcase-layer3.png'),
							
							 );
$maxKey = sizeof($aryImgPool);
if(!isset($_SESSION["curnum"]))
 
{
 
  //prefer to set original template as startup
 
  $num = 0;
 
  $_SESSION["curnum"] = $num;
 
}
 
else
 
{
 
   $num = rand(0, $maxKey);
 
   while($num == $_SESSION["curnum"])
 
   {
 
      $num = rand(0, $maxKey);
 
   }
 
   $_SESSION["curnum"] = $num;
 
}
 
?>
<style type="text/css">
 
#bottom { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/theme5<?php echo $aryImgPool[$num]['header']?>'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer1 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer2 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer3 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}
</style>

Open in new window

0
 
LVL 13

Expert Comment

by:dsmile
ID: 34170902
View sourcecode of rendered page then give me the html output of these lines

#bottom { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/theme5<?php echo $aryImgPool[$num]['header']?>'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer1 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer2 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer3 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34203365
   <style type="text/css">
 
#bottom { float:left;background-image:url('/templates/rt_vertigo_j15/images/theme5'); background-repeat:no-repeat; width:auto; height: auto;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:auto;height:auto; background-image:url('/templates/theme5rt_vertigo_j15/images/'); background-repeat:no-repeat;}

#layer1 { float:left; width:auto;height:auto; background-image:url('/templates/theme5rt_vertigo_j15/images/'); background-repeat:no-repeat;}

#layer2 { float:left; width:auto;height:auto; background-image:url('/templates/theme5rt_vertigo_j15/images/'); background-repeat:no-repeat;}

#layer3 { float:left; width:auto;height:auto; background-image:url('/templates/theme5rt_vertigo_j15/images/'); background-repeat:no-repeat;}

</style>

Sorry for the delayed reply.

Above is what the source code of the loaded page shows
0
 
LVL 13

Expert Comment

by:dsmile
ID: 34210751
It didn't work because  $aryImgPool has no sub array with neither key 'header' nor 'middle' in it



Just add 'header' & 'middle' to $aryImgPool or change the keys in these lines

#bottom { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/theme5<?php echo $aryImgPool[$num]['header']?>'); background-repeat:no-repeat; width:1012px; height: 133px;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer1 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer2 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}

#layer3 { float:left; width:544px;height:auto; background-image:url('/templates/theme5<?php echo $this->template ?>/images/<?php echo $aryImgPool[$num]['middle']?>'); background-repeat:no-repeat;}
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34212615
Ok that was a stupid mistake on my part. Fixed up that error, and a pathing error (folder structure is templates/template_name/images/theme5/filename)

Still can't get any images to load however

Current version of code is attached.

HTML output on the page reads as follows:
    <style type="text/css">
 
#bottom { float:left;background-image:url('/templates/rt_vertigo_j15/images/theme5/2showcase-bottom.png'); background-repeat:no-repeat; width:auto; height: auto;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:auto;height:auto; background-image:url('/templates/rt_vertigo_j15/images/theme5/2showcase-feature.png'); background-repeat:no-repeat;}

#layer1 { float:left; width:auto;height:auto; background-image:url('/templates/rt_vertigo_j15/images/theme5/2showcase-layer1.png'); background-repeat:no-repeat;}

#layer2 { float:left; width:auto;height:auto; background-image:url('/templates/rt_vertigo_j15/images/theme5/2showcase-layer2.png'); background-repeat:no-repeat;}

#layer3 { float:left; width:auto;height:auto; background-image:url('/templates/rt_vertigo_j15/images/theme5/2showcase-layer3.png'); background-repeat:no-repeat;}

</style>

<?php
//Set image array
$aryImgPool = array(
							0 => array('bottom' => '1showcase-bottom.png', 'feature' => '1showcase-feature.png', 'layer1' => '1showcase-layer1.png', 'layer2' => '1showcase-layer2.png', 'layer3' => '1showcase-layer3.png'),
							1 => array('bottom' => '2showcase-bottom.png', 'feature' => '2showcase-feature.png', 'layer1' => '2showcase-layer1.png', 'layer2' => '2showcase-layer2.png', 'layer3' => '2showcase-layer3.png'),
							2 => array('bottom' => '3showcase-bottom.png', 'feature' => '3showcase-feature.png', 'layer1' => '3showcase-layer1.png', 'layer2' => '3showcase-layer2.png', 'layer3' => '3showcase-layer3.png'),
							3 => array('bottom' => '4showcase-bottom.png', 'feature' => '4showcase-feature.png', 'layer1' => '4showcase-layer1.png', 'layer2' => '4showcase-layer2.png', 'layer3' => '4showcase-layer3.png'),
							4 => array('bottom' => '5showcase-bottom.png', 'feature' => '5showcase-feature.png', 'layer1' => '5showcase-layer1.png', 'layer2' => '5showcase-layer2.png', 'layer3' => '5showcase-layer3.png'),
							5 => array('bottom' => '6showcase-bottom.png', 'feature' => '6showcase-feature.png', 'layer1' => '6showcase-layer1.png', 'layer2' => '6showcase-layer2.png', 'layer3' => '6showcase-layer3.png'),
							
							 );
$maxKey = sizeof($aryImgPool);
if(!isset($_SESSION["curnum"]))
 
{
 
  //prefer to set original template as startup
 
  $num = 0;
 
  $_SESSION["curnum"] = $num;
 
}
 
else
 
{
 
   $num = rand(0, $maxKey);
 
   while($num == $_SESSION["curnum"])
 
   {
 
      $num = rand(0, $maxKey);
 
   }
 
   $_SESSION["curnum"] = $num;
 
}
 
?>
<style type="text/css">
 
#bottom { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['bottom']?>'); background-repeat:no-repeat; width:auto; height: auto;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['feature']?>'); background-repeat:no-repeat;}

#layer1 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer1']?>'); background-repeat:no-repeat;}

#layer2 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer2']?>'); background-repeat:no-repeat;}

#layer3 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer3']?>'); background-repeat:no-repeat;}
</style>

Open in new window

0
 
LVL 1

Author Comment

by:Fordster55
ID: 34212628
From what I can tell the randomise feature is working (different numbered files in the page source each refresh) and the file it is trying to pull (templates/rt_vertigo_j15/images/theme5/5showcase-layer3.png) goes to the image it should be.

So its probably one last little thing ive missed....
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34212657
EDIT: Ok, i know where the problem is now I just don't know what to do about it. I renamed the original images the header was trying to pull which is why nothing was coming up. With the original images in the folder the header displays as it did before i started. With no randomizing.

So the problem lies in this code actually taking over the headers images...
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34227483
Anyone had any luck finding what was wrong with my code?
0
 
LVL 13

Accepted Solution

by:
dsmile earned 500 total points
ID: 34227774
I corrected the code so that it gets in-range key (max key = number of patterns - 1).

What's your problem now? I don't quite get it.

Is it:
1. randomize mechanism doesn't work?
2. (1) works but images don't show up?
3. (2) works but expected images don't show up?


<?php
//Set image array
$aryImgPool = array(
                                                        0 => array('bottom' => '1showcase-bottom.png', 'feature' => '1showcase-feature.png', 'layer1' => '1showcase-layer1.png', 'layer2' => '1showcase-layer2.png', 'layer3' => '1showcase-layer3.png'),
                                                        1 => array('bottom' => '2showcase-bottom.png', 'feature' => '2showcase-feature.png', 'layer1' => '2showcase-layer1.png', 'layer2' => '2showcase-layer2.png', 'layer3' => '2showcase-layer3.png'),
                                                        2 => array('bottom' => '3showcase-bottom.png', 'feature' => '3showcase-feature.png', 'layer1' => '3showcase-layer1.png', 'layer2' => '3showcase-layer2.png', 'layer3' => '3showcase-layer3.png'),
                                                        3 => array('bottom' => '4showcase-bottom.png', 'feature' => '4showcase-feature.png', 'layer1' => '4showcase-layer1.png', 'layer2' => '4showcase-layer2.png', 'layer3' => '4showcase-layer3.png'),
                                                        4 => array('bottom' => '5showcase-bottom.png', 'feature' => '5showcase-feature.png', 'layer1' => '5showcase-layer1.png', 'layer2' => '5showcase-layer2.png', 'layer3' => '5showcase-layer3.png'),
                                                        5 => array('bottom' => '6showcase-bottom.png', 'feature' => '6showcase-feature.png', 'layer1' => '6showcase-layer1.png', 'layer2' => '6showcase-layer2.png', 'layer3' => '6showcase-layer3.png'),
                                                        
                                                         );
$maxKey = sizeof($aryImgPool) - 1;
if(!isset($_SESSION["curnum"]))
 
{
 
  //prefer to set original template as startup
 
  $num = 0;
 
  $_SESSION["curnum"] = $num;
 
}
 
else
 
{
 
   $num = rand(0, $maxKey);
 
   while($num == $_SESSION["curnum"])
 
   {
 
      $num = rand(0, $maxKey);
 
   }
 
   $_SESSION["curnum"] = $num;
 
}
 
?>
<style type="text/css">
 
#bottom { float:left;background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['bottom']?>'); background-repeat:no-repeat; width:auto; height: auto;font-family:"Trebuchet MS", Tahoma, Verdana, Arial;font-size:9pt; }
 
#feature { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['feature']?>'); background-repeat:no-repeat;}

#layer1 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer1']?>'); background-repeat:no-repeat;}

#layer2 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer2']?>'); background-repeat:no-repeat;}

#layer3 { float:left; width:auto;height:auto; background-image:url('/templates/<?php echo $this->template ?>/images/theme5/<?php echo $aryImgPool[$num]['layer3']?>'); background-repeat:no-repeat;}
</style>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Fordster55
ID: 34228391
Solved.

Last issue was just a css. The original stylesheet was taking precidence to the new css i added.

Just commented out the lines in the original css to fix.

Thanks dsmile for all the help
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question