<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>thought-after.com &#187; dynamic style</title>
	<atom:link href="http://www.thought-after.com/tag/dynamic-style/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.thought-after.com</link>
	<description>Web development and geeky stuff by Lafinboy</description>
	<lastBuildDate>Mon, 01 Mar 2010 05:00:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>CSS Random Background Image Rotation</title>
		<link>http://www.thought-after.com/2006/05/css-random-background-image-rotation/</link>
		<comments>http://www.thought-after.com/2006/05/css-random-background-image-rotation/#comments</comments>
		<pubDate>Fri, 26 May 2006 06:00:50 +0000</pubDate>
		<dc:creator>Lafinboy</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[dynamic css]]></category>
		<category><![CDATA[dynamic style]]></category>
		<category><![CDATA[random background image]]></category>
		<category><![CDATA[random backgrounds]]></category>
		<category><![CDATA[random images]]></category>

		<guid isPermaLink="false">http://www.thought-after.com/2006/05/26/css-random-background-image-rotation/</guid>
		<description><![CDATA[Edit: If you do not have access to the PHP source code on your site, try this random background image script generator Here&#039;s something I&#039;ve been playing with lately to add a little bit of visual dynamic interest to sites that don&#039;t have frequently changing content. The concept is not new &#8211; use image rotation [...]]]></description>
			<content:encoded><![CDATA[<p><ins datetime="2007-08-13T01:44:01+00:00">Edit: If you do not have access to the PHP source code on your site, try this <a title="Random background image script generator" href="/free-tools/random-background-image-script-generator/">random background image script generator</a></ins></p>
<p>Here&#039;s something I&#039;ve been playing with lately to add a little bit of visual dynamic interest to sites that don&#039;t have frequently changing content. The concept is not new &#8211; use image rotation to display random images on each page load. No great problem there, simply use a server-side script to select a random image. But what if your images are not content, are purely presentational, and are (read &#039;should be&#039;) background images?</p>
<p>Using PHP to retrieve a random image from a folder, we can generate dynamic CSS declarations through the page headers. This means we can change background images randomly on page load, and we can control which images are available by adding or removing them from the images folder.</p>
<p>First up we need to create the PHP script that will get the images from a folder, select a single image at random, and write the CSS declaration to the page header. Everything you need is in the following scripts, and all that needs customising is the path to your style and image folders. Copy and save this file as dynamic_css.php.</p>
<div class="codesnip-container" >
<div class="php codesnip" style="font-family:monospace;"><span class="kw2">&lt;?php</span> <span class="coMULTI">/*** Random Background Images</p>
<p>http://www.thought-after.com/2006/05/26/css-random-background-image-rotation/</p>
<p>This file will display a random background image to any element targetted through a CSS id.</p>
<p>1) Place this file in the same location as your sites main stylesheet file.</p>
<p>2) In the head section of each page place the following @import statement.</p>
<p>@import url(/path/to/dynamic_css.php)</p>
<p>NOTE: the import must occur after all other style sheet links, imports and declarations to avoid this dynamic style being over-written.</p>
<p>3) Create a folder to hold the images to be used for the random backgrounds.</p>
<p>4) Assign values to the following variables to complete the setup</p>
<p>$imgFolder : the path from the sites root to the image folder created at 3 above example:</p>
<p>$imgFolder = &quot;/images/random-images/&quot;;</p>
<p>$element : the css ID of the element to apply the background image to example:</p>
<p>$element = &quot;header&quot;;</p>
<p>5) &nbsp; &nbsp;That&#039;s it!! ***/</span></p>
<p><span class="co1">// Set up</span><br />
<span class="re0">$imgFolder</span> <span class="sy0">=</span> <span class="st0">&quot;/images/random-images/&quot;</span><span class="sy0">;</span> <span class="co1">// the path from the sites root to the image folder created at 3 above</span><br />
<span class="re0">$element</span> <span class="sy0">=</span> <span class="st0">&quot;header&quot;</span><span class="sy0">;</span> <span class="co1">// the css ID of the element to apply the background image to</span></p>
<p><span class="co1">// That&#039;s it!! Nothing below this line needs to be changed</span><br />
<span class="re0">$img</span> <span class="sy0">=</span> <span class="kw4">null</span><span class="sy0">;</span></p>
<p><span class="co1">// build up the path to the image folder</span><br />
<span class="kw1">if</span> <span class="br0">&#40;</span><a href="http://www.php.net/substr"><span class="kw3">substr</span></a><span class="br0">&#40;</span><span class="re0">$imgFolder</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">1</span><span class="br0">&#41;</span> <span class="sy0">!=</span> <span class="st_h">&#039;/&#039;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="re0">$imgFolder</span> <span class="sy0">=</span> <span class="st_h">&#039;/&#039;</span><span class="sy0">.</span><span class="re0">$imgFolder</span><span class="sy0">;</span> <span class="br0">&#125;</span><br />
<span class="kw1">if</span> <span class="br0">&#40;</span><a href="http://www.php.net/substr"><span class="kw3">substr</span></a><span class="br0">&#40;</span><span class="re0">$imgFolder</span><span class="sy0">,-</span><span class="nu0">1</span><span class="br0">&#41;</span> <span class="sy0">!=</span> <span class="st_h">&#039;/&#039;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="re0">$imgFolder</span> <span class="sy0">=</span> <span class="re0">$imgFolder</span><span class="sy0">.</span><span class="st_h">&#039;/&#039;</span><span class="sy0">;</span> <span class="br0">&#125;</span><br />
<span class="re0">$path</span> <span class="sy0">=</span> <span class="re0">$_SERVER</span><span class="br0">&#91;</span><span class="st_h">&#039;DOCUMENT_ROOT&#039;</span><span class="br0">&#93;</span> <span class="sy0">.</span> <span class="re0">$imgFolder</span><span class="sy0">;</span></p>
<p><span class="co1">// populate an array to hold valid file type extensions</span><br />
<span class="re0">$extList</span> <span class="sy0">=</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">&#40;</span><span class="st_h">&#039;gif&#039;</span><span class="sy0">,</span><span class="st_h">&#039;jpg&#039;</span><span class="sy0">,</span><span class="st_h">&#039;jpeg&#039;</span><span class="sy0">,</span><span class="st_h">&#039;png&#039;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="co1">// create an array to hold the list of image files</span><br />
<span class="re0">$fileList</span> <span class="sy0">=</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="co1">// open a handle to the directory</span><br />
<span class="re0">$handle</span> <span class="sy0">=</span> <a href="http://www.php.net/opendir"><span class="kw3">opendir</span></a><span class="br0">&#40;</span><span class="re0">$path</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="co1">// loop through the contents of the directory</span><br />
<span class="kw1">while</span> <span class="br0">&#40;</span> <span class="kw4">false</span> <span class="sy0">!==</span> <span class="br0">&#40;</span> <span class="re0">$file</span> <span class="sy0">=</span> <a href="http://www.php.net/readdir"><span class="kw3">readdir</span></a><span class="br0">&#40;</span><span class="re0">$handle</span><span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="co1">// get the info for each file</span><br />
&nbsp; &nbsp; <span class="re0">$file_info</span> <span class="sy0">=</span> <a href="http://www.php.net/pathinfo"><span class="kw3">pathinfo</span></a><span class="br0">&#40;</span><span class="re0">$file</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="co1">// check that the file in in the allowed extensions array</span><br />
&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span> <a href="http://www.php.net/in_array"><span class="kw3">in_array</span></a><span class="br0">&#40;</span> <a href="http://www.php.net/strtolower"><span class="kw3">strtolower</span></a><span class="br0">&#40;</span> <span class="re0">$file_info</span><span class="br0">&#91;</span><span class="st_h">&#039;extension&#039;</span><span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy0">,</span> <span class="re0">$extList</span><span class="br0">&#41;</span> &nbsp; &nbsp;<span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// add the file to the array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$fileList</span><span class="br0">&#91;</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="re0">$file</span><span class="sy0">;</span> <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="co1">// close the handle to the directory</span><br />
&nbsp; &nbsp; <a href="http://www.php.net/closedir"><span class="kw3">closedir</span></a><span class="br0">&#40;</span><span class="re0">$handle</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="co1">// if we have at least 1 file in the list</span><br />
&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><a href="http://www.php.net/count"><span class="kw3">count</span></a><span class="br0">&#40;</span><span class="re0">$fileList</span><span class="br0">&#41;</span> <span class="sy0">&gt;</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// select a random index from the file list array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$imageNumber</span> <span class="sy0">=</span> <a href="http://www.php.net/time"><span class="kw3">time</span></a><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">%</span> <a href="http://www.php.net/count"><span class="kw3">count</span></a><span class="br0">&#40;</span><span class="re0">$fileList</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="co1">// assign the filename for that array index to the $img var</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="re0">$img</span> <span class="sy0">=</span> <span class="re0">$imgFolder</span> <span class="sy0">.</span> <span class="re0">$fileList</span><span class="br0">&#91;</span><span class="re0">$imageNumber</span><span class="br0">&#93;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;<span class="re0">$css</span> <span class="sy0">=</span> <span class="st0">&quot;#<span class="es4">$element</span> { background-image: url(&#039;&quot;</span><span class="sy0">.</span><span class="re0">$img</span><span class="sy0">.</span><span class="st0">&quot;&#039;); }<span class="es1">\n</span>&quot;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;<span class="co1">// tell the browser what we&#039;re sending</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://www.php.net/header"><span class="kw3">header</span></a><span class="br0">&#40;</span><span class="st_h">&#039;Content-type: text/css&#039;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="co1">// and write out the css </span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="kw1">echo</span> <span class="re0">$css</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="sy1">?&gt;</span></div>
</div>
<p>Now in the head of our HTML page import the dynamic css:</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/style.html"><span class="kw2">style</span></a> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span>&gt;</span>@import url(&quot;/path/to/dynamic_css.php&quot;);<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/style.html"><span class="kw2">style</span></a>&gt;</span></div>
</div>
<p>If you have set up your path correctly, which I&#039;ll admit always catches me out, then each page load should see a random background image displayed in the element specified in the dynamic CSS.</p>
<p>Obviously this method can be extended and modified to suit you exact circumstances. I currently pass page identifiers through the import statement as part of a querystring which then query a database for specific content, meaning I can specify a range of images for use on each page, and on each element on that page. The possibilities are seemingly endless, and only limited by your imagination.</p>
<p>Edit (16/07/2007): I&#039;ve tidied the script up a little to make it easier to implement. Just a couple of documented steps to follow, and thats&#039; it!!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thought-after.com/2006/05/css-random-background-image-rotation/feed/</wfw:commentRss>
		<slash:comments>162</slash:comments>
		</item>
	</channel>
</rss>
