By chimes84 on

I'm currently developing a theme, and I'm new to the coding/programming side of web development (I'm a graphic designer, and want to learn to be a programmer!), and want to have the feature of a randomly rotating image as part of my theme's header. Currently I have 6 different images from which to choose, but would like to know how to actually get them to change on their own (either upon login or upon refresh).

I looked up both an HTML and PHP version of how to do this... the HTML version looks way too longwinded to be the most efficient way of doing this, but I don't understand the PHP version.

/*

$file = rand(1, 20);
$file .= '.jpg';
echo '<img src="'.$file.'" >';

*/

I know that $file is a variable. I am assuming I'd have to set that in the template.php.tpl. The rest of the stuff... I'm not understanding b/c I'm just learning the basics of PHP.

⋅ Categories: Drupal 5.x

Comments

modul’s picture

modul commented

Hi,

This is one of the many ways to get your random images. It assumes that there are 6 of them, that they are named "1.jpg", "2.jpg" ... "6.jpg", it assumes that the file names are lowercase, and it assumes that they are in files/images - lot of assumptions :-). If you want to make it more foolproof, it's not too difficult, but this is all I could come up with in 1 minute :-)

$total = "6";
$start = "1";
$file_type = ".jpg";
$image_folder = "files/images";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";

Put this in a node before trying it in a block!! Putting erroneous php code in a block can Easily make your entire site inaccessible, so First try it out in a node.

Ludo

chimes84’s picture

chimes84 commented

Hey, sounds great. This is actually for the header on my page. It would be for the secondary-links block. I'll test it in a node first though.

chimes84’s picture

chimes84 commented

So I tested the code within the node.php.tpl... and I got ?'s for images.

Here's what I actually have: 

	$total = "5";
	$start = "1";
	$file_type = ".png";
	$image_folder = "masthead";
	$random = mt_rand($start, $total);
	$image_name = $random . $file_type;
	echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";

All of the images are within a file called masthead that is within the folder of the current theme I'm working on... I inserted this into the block.php.tpl (as well as a

before and after), and got the same result. I also got these bad images in other blocks (which is what you had warned me about, but I deleted it out of the code right away!).

Any help? Thanks again!

modul’s picture

modul commented

Hi Chimes,

The problem is in the path to your image folder. Paths should be given starting from the Drupal root. So, in my example it was "files/images".

You say all your images are within a "file" called masthead? I assume you mean a folder.

If I understand your structure, the line $image_folder = "masthead"; should be:

$image_folder = "themes/name-of-your-theme/masthead";

Does that work? Be careful: I think everything is case sensitive. And do try it in a node first :-)

Ludo

chimes84’s picture

chimes84 commented

Sounds good. Yes, I meant folder. It's Friday, and it's also Friday of finals week for me too...so I'm fried. :\

chimes84’s picture

chimes84 commented

It works. BUT, I think what I really need is to have it be applied as a background. Currently, I have one of these images applied as a background for the masthead (and I want that background to switch). So when the image is displayed, it's currently over the whole area, and there were things within that area that I lost that are important (they're just covered up), and since it's a transparent image, the other background image shows through (that part's an easy fix), oh and since it's bigger than the space I originally alotted for it, everything's pushed down (I made the images bigger so if somebody's got their browser window scrunched, they'd still have the background instead of an ugly white space).

It would be ideal to have these applied as backgrounds instead of images. I could go through and restyle everything to fit this, but I'm sure you (or some other knowledgeable PHP expert) know an easier way to solve this! :)

getsited’s picture

getsited commented

Just expanded this code a little bit - this will scan a chosen directory for any file_type and randomly display them.

Also, this particular client is FTP and file savvy - so to add links and different alt tags I have added *.meta file where the first-line is the alt tag, and second line is website address

For example, if you had image.png you could have an image.meta file with this contents:
Alt text
http://www.example.com

will display the image.png, have alt text of "Alt text" and when clicked on, will like to http://www.example.com

Code snippet - 


$image_folder    = 'ads';
$file_type = ".png";

//print_r();

$slash = (substr(PHP_OS, 0, 3) == 'WIN') ? '\\' : '/'; 

$path_to_images = $_SERVER['DOCUMENT_ROOT'].$slash.$image_folder;

$file_list = my_scandir($path_to_images);

foreach($file_list as $file_name){
	if(strToLower(substr($file_name,-4, 5))==$file_type){
		$images_to_display[] = $file_name;
	}
}

$random = mt_rand(0, count($images_to_display)-1);

$image_name = $images_to_display[$random];
$meta_file = substr($image_name,0,strlen($image_name)-4).'.meta';

//echo $path_to_images.$slash.$meta_file;

if(file_exists($path_to_images.$slash.$meta_file)){
	$file = file($image_folder.'/'.$meta_file);
	$alt = trim($file[0]);
	$link = trim($file[1]);
}else{
	$alt = $image_name;
	$link = false;
}

//output
echo '<center>';
if($link){echo '<A HREF="'.$link.'">';}
echo'<img src="'.$image_folder.'/'.$image_name.'" alt="'.$alt.'" border="0"/>';
if($link){ echo '</A>';}
echo '</center>';

//so it works on php 4
function my_scandir($dir){

if(is_dir($dir)){
	$dh  = opendir($dir);
while (false !== ($filename = readdir($dh))) {
    $files[] = $filename;
}
sort($files);
return $files;
}else {return false;}
}
Stag’s picture

Stag commented

That looks really good, where do those code snippets get placed though?

yogitengu’s picture

yogitengu commented

I've followed you instructions and they work a treat-big thanks.