12 replies to this topic

[scox]

I have added a new snippet to the Snippet Library!

Snippet name: Randomize
Author: scox
Version: 1.0 (Final)
More info: View this snippet
Description:
This snippet take a random image from a given directory.
The output is the url of the image, so you can use it on a img tag or for a background.


Please feel free to comment on this snippet, suggest improvements, or simply praise my work!

[This is an automatically created message]

[jaredc]

Good snippet. A few suggestions to make it more broadly useful-

1) Build it without using a function inside the snippet. This will allow multiple instances on the same page.

2) If the path to the directory can be a snippet parameter, then you could draw from different folders based on the place in the page.

So for instance, say you have two places on the page you want random images to fill (of different sizes). You could make a folder for each size and call the snippet twice, once in each location:

[!Randomize?folder=path/to/folder1!]
[!Randomize?folder=path/to/folder2!]

Just a few thoughts.

[scox]

Thanks for the suggestions, they aren't diffucult to implement, I'll do it after the 7 october because now i'm a bit busy... I have two university examinations the next week...

[LePrince]

I like it and will definately use it! The folder parameter would be useful indeed, and perhaps you could make the width and height parameters too. If not supplied, then use a default value or - make it dynamic depending on the image retrieved. Just a few thoughts though.
Thanks for sharing this!

[RobCinOz]

Hi,

I want to use this snippet in my style sheet in place of
background-image: url('header2.jpg');
What is the correct syntax please?

RobCinOz

[mikef]

RobCinOz, on Apr 26 2007, 03:56 PM, said:

Hi,

I want to use this snippet in my style sheet in place of
background-image: url('header2.jpg');
What is the correct syntax please?

RobCinOz

I'm not sure whether you can use snippets in style sheets; my guess would be not.

[Ralph]

Yes, you can use either a Snippet call or a Chunk call to make dynamic changes to your stylesheet... Simply place the call in the template in place of whatever attribute value you wish to control... So, using your example, RobCinOz, you would use something like background-image: url('[!Randomize?folder=path/to/folder1!]');

[RobCinOz]

Ralph, on Apr 27 2007, 03:53 AM, said:

Yes, you can use either a Snippet call or a Chunk call to make dynamic changes to your stylesheet... Simply place the call in the template in place of whatever attribute value you wish to control... So, using your example, RobCinOz, you would use something like background-image: url('[!Randomize?folder=path/to/folder1!]');

I tried that and it still doesn't work for me.
Reading the snippet notes, I see that the folder is now set in the snippet. So, I set the $dir variable to the folder where I have these images and tried this background-image: url('[!Randomize!]');

I still cannot get it to work. Could it be that I'm trying to do it in the header div?

div.header {
width: 520px;
height: 204px;
margin-left: auto;
margin-right: auto;
background-image: url('[!Randomize!]');
margin-bottom: 20px;
}

I'm using a customed "refreshed template". I've attached the style.css file that I've tried.

For the moment, I'm just using this background-image: url('header2.jpg'); to give me a static image.

 style.css   1.79K   1 downloads

[Ralph]

RobCinOz, what does the rendered markup show...??? The snippet should work regardless of where the snippet call is used within the template... Try placing it in your content area to see if it returns an image name... If it doesn't then either your path is wrong or one of the PHP functions used in the snippet might be disabled on your server...

[Dean]

You won't be able to include it in the actual CSS file, as it isn't parsed by Etomite is it

You need to include that CSS style bit in the header of the template

[Ralph]

Duh...!!! Good point, Dean, considering how the stylesheet will be cached... Using an inline style for the background image would be the way to go...

[Dean]

BTW, Happy Birthday Rob

[cathode]

Updated this snippet to allow for a unique path in the snippet call.

Randomize v 1.1

// Snippet name: Randomize
// Version 1.1
// Tested with Etomite 1.1
// Created by scox - http://www.scox.net
// Modified by Ian Smith- http://www.n-vent.com to allow for different paths in snippet call
// Distribuited under a by-nc-sa CC licence: //http://creativecommons.org/licenses/by-nc-sa/2.0/
//
// This snippet take a random image from a given directory. 
// The output is the url of the image, so you can use it on a img tag or for a background. 
// The only thingh you have to change is the $dir variable. 
//
// Example:<img src="[!randomize!]" alt="" />
// Example:<img src="[!randomize?d=assets/images/yourPath!]" alt="" />
//
// $dir is the folder where you put the images that you want in your random sequence. Change it below, or override in the snippet call like this:
// [!randomize?d=assets/images/yourPath!]

$dir="assets/images";

/* No need to change anything below this line */

function GetDirArray($sPath) {
	$handle=opendir($sPath);
	while ($file = readdir($handle))
	if ($file != "." && $file != ".." && (ereg(".jpg", $file) || ereg(".gif", $file))) $retVal[count($retVal)] = $file;
	closedir($handle);
	return $retVal;
}

$dir = (isset($d))? $d : $dir;

   $file=GetDirArray($dir);
   $index=rand(0, count($file)-1);
   $output= "$dir/"."$file[$index]";  

return $output;