Skip to main content

How to Rotate Your Web Page Background at Radom

How to Rotate Your Web Page Background at Random


Problem: I want my web page background image to change every time the page is loaded by picking an image at random.

The images in this solution are all prepared in advance. They are all named live#.jpg where "#" is a number between 1 and whatever the number of images you have.  Hence they are named:

  • live1.jpg
  • live2.jpg
  • live3.jpg
  • ........
The naming system simplifies the script that will be used to load the images.

The approach adopted is a three-step algorithm:
  1. Create an array of the file names for these image files in a certain folder. In my case, the folder is called "slides".
  2. Count the number of files. There are possibilities of counting sub-directories and . and .. if not careful. In this solution, we ensure no subdirectories are in the target folder and do a little arithmetic to eliminate the .. and .. folders.
  3. Generate a random number based on the number of files in the target folder and append this number to the base name of the image files then use this name in the CSS background property.

PHP Script Example

$path = "slides/"; //the relative oo absolute path to the image files
$files = scandir($path); //get list of files in the target folder
$size = count($files); //count the number of files (including . and ..)
$number=rand(1,$size); //generate a random number between 1 and $size

Generate Image File Name 

echo("background-image: url(slides/live");
echo($number);
echo(".jpg);");


This could be shortened to:
echo("background-image: url(slides/live".$number.".jpg);");

Background Tricks

"background-size: cover;" forces the image to cover the entire element. See demo . 
Some older browsers may not implement it properly. See this discussion.

The final page looks like this (minus other CSS and HTML code):

---------------------------------------------------------
<!DOCTYPE html><html><head><title>Background Image Rotator</title><style type="text/css">

 html { <?php $path = "slides/"; $files = scandir($path); $size = count($files); $number=rand(1,$size); /* echo("background-image: url(slides/live"); echo($number); echo(".jpg);"); */ echo("background-image: url(slides/live".$number.".jpg);");
?>
-webkit-background-size: cover; /* for older browsers using webkit engine */ -moz-background-size: cover; /* for older Mozilla Firefox */ -o-background-size: cover; /* for older Opera browser */ background-size: cover; /* for all modern browsers */ /* add your CSS ... */
</style>

</head>

<body>
<!-- add your web page content here ... -->

</body> 

</html>
---------------------------------------------------------



To save time processing files, there are ways to rename files. The easiest is to highlight all files in a folder with Ctrl + A then type the base name and press ENTER. Windows will rename the files using the base name (such "Word Doc 2016_31_10") and a number as follows:

Original List
wrn_3

Output
wrn_4

See this site for a more detailed description.

You can remove the parentheses using the following two Powershell commands:

dir | rename-item -NewName {$_.name -replace "\(",""}
dir | rename-item -NewName {$_.name -replace "\)",""}

To launch Powershell, browse to the target directory then open the File menu as follows:



As you fire away at your keyboard, remember the Messiah is coming and prepare. I guarantee it.

Be blessed today.


Comments

Popular posts from this blog

How to Install RIOT Plugin for GIMP

How to Install RIOT Plugin for GIMP:: Since this article was first written a stand-alone version of RIOT has been made available Download the plugin from  http://luci.criosweb.ro/riot/download/Select the download link titled "RIOT as plug-in for other applications"   Launch the Riot-plugin.exe file by double clicking.The installer installs all the files including Riot.exe, Riot.dll, and FreeImage.dll in the location where you installed GIMP  If GIMP is open, close it and re-launch it.To optimise an image, open it then save with menu File-&gt;Save for web with RIOT  You can set the target file size by selecting "Compress to size" button  on bottom right corner of optimised image pane and providing the size in kilobytes. Alternatively you can use a slider provided to allow you to change the quality while showing you a preview of the resulting image.


Enjoy.

How to Install Packet Tracer 6.0.1 for Linux

This article is intended to help me remember the installation process for Cisco Packet Tracer 6 details of which seems to be hard to come by on the web.

1. Log in in to your Cisco Netspace account. Yes, you need to be logged in.
2. The "Download PT 6.0.1" link on is on the NetSpace home page.
3. Click this "Cisco Packet Tracer" link shown below the folder icon as shown in the figure below:

4. Select Cisco Packet Tracer 6.0.1
5. Select download location.
6. After completion of download, use your file manager to open that folder and rename the file to something such as "CPT6". It is a shell script so no file extension is required.
7. Change the file permissions to executable using command: sudo chmod 777 CPT6from a terminal window opened in the download directory. This assumes your downloaded file is renamed CPT6
8. Launch the file with command: ./CPT6 from the terminal window. You will get the message:

Self extracting archive...

Welcome to Packet Tracer 6.0…

Connecting USB 3G Modem to Safaricom in Linux Mint

This particular modem is a ZTE HSUPA MF637U modem. Click on images to see enlarged view. Let's get started:
OS is Linux Mint version 15. Yours may be older or newer.Plug in the modem to a free USB port and check that it recognises the modem as a drive in the File Manager whose icon is shown below third from left and the File Manager view is also shown with the modem listed as the "MODEM-SDSK" drive: Fig. 1. Linux Mint Desktop Panel

Fig 2. Linux Mint File Manager view showing listed drives at left and Application Manu at top. Click on image to see enlarged view.















3. Go to the Applications Menu shown in Fig. 2 and select Settings>Network Connections


Fig. 3. Network Connections dialogue. Click on image to see enlarged view.










4.  Select Add > Mobile Broadband then click  "Create"
5. Follow the wizard to select the device, country, billing plan, service provider and deafult settings.

Fig. 4. Safaricom default settings in Linux Mint. Click on image to see enlar…