I need a widget that will display a random photo each time pages is loaded.

[JDunn]

Anybody know how to do this in Xara ? Put a photo in a box on a page. Each time the user lands on the page a different photo is displayed in that spot. Even a reload/refresh page triggers it. On Display. It can be either a random pick or one in a specific sequence. I've found places on the internet that show how to code this, but I don't know php or whether php will work with Xara.

[gwpriester]

I think this can be done with a script. Check back and see if one of our members can suggest one.

[sculptex]

Hi,

you could find a widget, but I would do it as follows:-

Create a php file called random.php in your root folder (where index.htm is), here is the code for it:-

<?php
// RANDOM IMAGE SERVER by Sculptex
// www.sculptex.co.uk
// Demo @ random.prevoo.uk

$path = "random/";
$files = array_diff(scandir($path), array('..', '.'));
$imgs = array();
$i = 0;
foreach($files as $file) {
$imgs[]= $file;
$i++;
}
$img = $imgs[rand(0,$i-1)];

$file_extension = strtolower(substr(strrchr($img,"."),1));
switch( $file_extension ) {
case "gif": $ctype="image/gif"; break;
case "png": $ctype="image/png"; break;
case "jpeg":
case "jpg": $ctype="image/jpeg"; break;
default:
}
header("Content-type: " . $ctype);
header("Expires: ". date("r",time() + (1)));
readfile($path.$img);
?>

Create a folder called random
Fill folder with required images
Create placeholder on your website and insert

<img src='random.php'>

You can see it in action at http://random.prevoo.uk

[roly]

That is neat Sculptex, thank you for sharing.

Ciao

Roly

[JDunn]

I see on the example web site that every image must be the same size and aspect ratio. Is it possible to vary these in size and aspect ratio?

[Egg Bramhill]

I followed your instruction to the letter Sculptex but I can only get a missing image icon.

[siran]

Nice code sculptex.

Egg, did you place the file and folder in the root? Does your sever support PHP?

JDunn, what exactly do you need the widget to do? Should it center the random picture within the region of the placeholder or should it be stretched and if so should the aspect ratio be preserved?

[Acorn]

I don't think many have PHP skills or access.
Here is a Xara solution with CSS and jQuery.

Make a box of any size.

• Name it viewer and add the special Name UsesJQuery
• To its Placeholder Body add:

<script>
$(document).ready(function(){

        var imgCount = $('.illy').length;
        var guessImg = Math.floor(Math.random() * imgCount + 1);

        $('.illy').hide();
        var imgUrl = $('.illy:nth-child(' + guessImg + ')').attr('src');

        $('#viewer').css({'background-image':'url(' + imgUrl + ')','background-repeat':'no-repeat','background-position':'center','background-size':'contain'});

});

</script>

• Ensure the ​viewer box is the topmost object.

Add any objects under viewer that you know render as images (text does not work - it has to be grouped).
Given then all the Name htmlclass=illy.

You can resize the viewer box and the illy objects will scale to fully fit.
I chose to hide all the illy objects, but you can have them elsewhere on your site, on pages or layer (provided the layers are accessible).

Example here: CSS3 & jQuery - Random Image on Load.xar

In summary, create a viewer Widget somewhere on a page.
Any (image) objects any where on your site with Name illy will appear randomly in the viewer on page load or refresh.

Acorn

[Acorn]

Should it center the random picture within the region of the placeholder or should it be stretched and if so should the aspect ratio be preserved?

siran, in my go, I've assumed centring and scaling to fit the enclosing box. Both these features can be altered.

Acorn

[siran]

Hi Acorn,
thought about a similar solution but decided to create a widget, just to get a little practice again...
It turned out be be six widgets all about identical but in the way of scaling:

widget_RndPicOnLoad_v1_0_center.xar - doesn't scale, just centers
widget_RndPicOnLoad_v1_0_contain.xar - scales to fit inside (only works in IE9 and higher)
widget_RndPicOnLoad_v1_0_cover.xar - scales to fully fill (only works in IE9 and higher)
widget_RndPicOnLoad_v1_0_fill.xar - stretches to fully fill (looses aspect ratio)
widget_RndPicOnLoad_v1_0_height.xar - scales to same hight
widget_RndPicOnLoad_v1_0_width.xar - scales to same width

How to use:
Drag the widget of your choice to your document.
Resize the placeholder to your needs.
Double click the placeholder to change the pictures.
Delete all but one page.
Delete the picture from the remaining page.
Drag in you own picture.
Resize the page if required.
Give it the name "WTag:image:image" (without the double quotes, you can select it from the list of existing names).
If all your pictures are the same size you can give it the name "autoreplace" (also in the list) and then select and drag all your pictures on top of that image and Xara will create as many new pages as required.
If your pictures are of differing size you should manually create a new page drag in a picture and give it the name for each of them.
Save and you should be ready to preview.