Stacks4Stacks

RandomImage is using PHP to pick an image at random and display it on your page. This means that unlike some random image stacks that wastefully download a whole bunch of images and display only one at random, RandomImage instead picks the random image server-side. Only one image is ever sent down to the client. This system makes for a much faster and more efficient setup.

Our approach of using sequentially numbered sets of images means you can store all your random images in a single directory. Then it is possible to restrict the 'randomness' of the chosen image to those between a specific number range. This affords the ability to use multiple RandomImage stacks and ensure the same image never gets shown twice. New images can be easily uploaded remotely using our FileMan or Droplet stacks.

Many people use our RandomImage stack in ThemeFlood theme banners. Options are provided to directly embed the stack into a FreeStyle or ExtraContent container. For improved SEO and site accessibility, custom ALT image descriptions can be applied on the image. And to make RandomImage more useful in your pages, a link can be applied to the image. RandomImage is able to take images at random from directories stored on other domains or sub-domains.

Example:

Reload the page to see 1 of 14 random images displayed:

Setup:

Follow these instructions for setting up a single RandomImage stack

1. Once installed into Stacks and RapidWeaver, open your Stacks Library
2. Search for 'randomimage' and drop a copy of the stack into your page
3. Configure the settings to link the stack to your directory of random images and specify the images you want to choose from at random
4. Preview or publish the page to see the result

You can either link to a directory of images stored online (warehoused) using a relative or absolute path. To use images dragged and dropped (as a folder) into RapidWeaver as resources, use the normal %resource(folder-name)%/ macro as the link.

RandomImage can be made to support retina-display optimised images, at twice the normal pixel density, compared with normal images. Check the option in the stack settings to include retina optimised images. Configuration is the same as the standard resolution images, except RandomImage will look for the addition of a standard @2x declaration, between the file name and file extension. If your normal images are named image-1.jpg, image-2.jpg and image-3.jpg, then your retina versions would be named image-1@2x.jpg, image-2@2x.jpg and image-3@2x.jpg etc.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.