Jump to content

  • Log In with Google      Sign In   
  • Create Account






Custom Random Image Blocks for your Journal

Posted by RSI3D, in Web Dev 11 March 2011 · 506 views

I've recently discovered “Custom Content Blocks” on my journal page. For examples, take a look at the blocks on the right of this page, the top three are custom content blocks. Yesterday I added a “Random Album Image” block to the top of my page. It started displaying random images from my Woody3D gallery. Today when I visited my journal it was displaying random images from every member gallery on gamedev.net. Strange, I thought. That's not going to work. So rather than bug the gamedev.net developers with my feedback, I solved the problem myself.

Requirements: Web server with PHP.

On my server I created a directory with the following items:

Posted Image

The "woody3d_screens" folder contains all images I want to display randomly. To make them fit They are all resized to have a width of 160 pixels. All images are jpeg so they work with my random image script.

The .htaccess file is important. It tells the server to treat any file with the extension .jpg as a php file. This is done because gamedev.net image links need to have of an image type file extension to display. So for instance writing <img src=”random_image.php” /> will not work in the custom block.

The
"woody3d_screens" .jpg file is actually a PHP script. It finds all files in the folder of type jpeg and outputs one of them randomly using a custom header with Content-type: image/jpeg.

The PHP file is just a redirect to the gallery page. I use this because linking directly to my gamedev.net gallery in the custom block creates a popup block advertising the gallery (for some weird reason). So I link my randomized image to the redirect script instead.

Here is what is in each file:

.htaccess

Options All -Indexes

#sets jpg to be processed by php
AddType application/x-httpd-php .jpg

woody3d_screens.jpg

<? 	
 	$gallery = "woody3d_screens";
 	
 	////////////////////////////////////////////////////////////////////////

 	// PROGRAM CONTROL

 	$path         				= $gallery . "/";

 	// Obtain list of images from directory 
 	$image_filename_list      	= get_image_filename_array_from_directory($path);

 	// Get random image file name
 	$image_filename   			= get_random_entry_from_array($image_filename_list);

 	// Output header and data of image
 	if(file_exists($path . $image_filename))
 	{
      	$data = file_get_contents($path . $image_filename);
      	header('Content-type: image/jpeg');
      	echo $data;
 	}
 	exit();

 	////////////////////////////////////////////////////////////////////////


 	// LOCAL FUNCTIONS

 	// Get random entry from array
 	function get_random_entry_from_array($ar)
 	{
 		mt_srand((double)microtime() * 1000000);
 		$num = array_rand($ar);
 		return $ar[$num];
 	}

 	// Get array of image file names from a directory
 	function get_image_filename_array_from_directory($path) 
 	{
 		$images = array();
 		if($img_dir = @opendir($path)) 
 		{   while(($img_file = readdir($img_dir)) !== false) 
 			{
 				// Check for gif, jpg, png
 				// if(preg_match("/(\.gif|\.jpg|\.png)$/", $img_file)) 
 				
 				// Just check for jpg 
 				if(preg_match("/(\.jpg)$/", $img_file)) 
 				{  $images[] = $img_file;
 				}
 			}
 			closedir($img_dir);
 		}
 		return $images;
 	}

 	////////////////////////////////////////////////////////////////////////
?>

woody3d_screens.php

<?
 	header("Location: http://www.gamedev.net/gallery/album/106-woody3d-screens/");
 	exit();
?>

I really like that I can add my own side bar content to the journal pages. This is a feature I think everyone should take advantage of. Comments and thoughts are always welcome.





Great tip. Hopefully the GameDev staff will add an option to display content only from your own image content/filestore in order to make this easy for people who may not have a web server. Until then, I'll have to set this up once I write up something for my own journal.

Twitter

Posted Image

Google GameDev.Net Search Bar

Posted Image

Recent Comments

PARTNERS