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

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.

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

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:-

Quote:

---

<?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

Quote:

---

<img src='random.php'>

---

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

That is neat Sculptex, thank you for sharing.

Ciao

Roly

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?

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

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?

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:

Code:

---

<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: Attachment 118435

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

Quote:

---

Originally Posted by siran

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

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.

Excellent set of widgets Siran, worked like a charm. Saved to my web-goodies folder.

Sculptex/Siran

Quote:

---

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

---

I placed the php file in the same subfolder I uploaded the index pages to alongside the image folder.

Yes, never had issues with php files before:

http://www.parkeston.com/random/phpinfo.php

Because I can't get a double url on TG server:

http://www.parkeston.com/random/random.php

Whereas Sculptex's works as expected:

http://random.prevoo.uk/random.php

The subdoman is not important, if you are using a subfolder then that's fine, you just need to create another folder within that called random with the images in.
So you'd have:-
public_html/random/index.htm
public_html/random/random.php
public_html/random/random/img1.jpg
public_html/random/random/img2.jpg

But Siran and Acorns solutions are better for xara anyway.

Quote:

---

Originally Posted by sculptex

The subdoman is not important, if you are using a subfolder then that's fine, you just need to create another folder within that called random with the images in.
So you'd have:-
public_html/random/index.htm
public_html/random/random.php
public_html/random/random/img1.jpg
public_html/random/random/img2.jpg

But Siran and Acorns solutions are better for xara anyway.

---

sculptex, that is a generous suggestion but the power of TalkGrpahics is its diversity - let's say three solutions for the OP to pick from.
I would be interested if JDunn can advise which work for the posed question.

I hope others will also try and advise back or propose their approach.

I'm obviously plugging mine as it can be changed to reflect siran's excellent solutions be including CSS styles separately and even replace the random element with a timer to cycle round as a carousel.

Acorn

Hi sculptex,

I don't think your solution has any disadvantage to the others, except depending on PHP. But if your server supports PHP your solution has the advantage that replacing the images is as easy as deleting and adding files from/to a folder.
Just put your random.php file and the random folder (containing the pictures) to a support folder and it is as good for Xara as the other solutions.
After adding and/or removing pictures to/form "your support folder"/random all you need to do is re-publish or export (and later upload with FTP or such) from within Xara.

Attached is the "cover" variant of the widget examples above of your code (uploaded as a zip file because of the support folder).

The following is meant to be addressed to other readers as I guess sculptex already knows everything about it...

To change the scaling (just as Acorn already mentioned) change the "background-size:cover;" in the placeholder code to your needs (or give your DIV a class or ID and add some CSS).
Remove it to only center and no scaling,
change it to "background-size:contain;" to fit inside the placeholder,
or to "background-size:100% 100%;" to fully stretch loosing the aspect ratio,
or to "background-size:auto 100%;" to scale to same height,
or to "background-size:100% auto;" to scale to same width.
You may also change other attributes such as "background-position:center center;" to "background-position:left top;" (see for example https://www.w3schools.com/cssref/pr_...d-position.asp).
Maybe there are other useful values... Acorn or sculptex might know better.

Finally found my problem after a few hours searching. I need to add this line to my .htaccess file

Quote:

---

AddType application/x-httpd-php .htm .html

---

Found it from this thread

Glad you figured it out, but I don't understand why that was necessary.

Nor do I Siran, it was just that pasting in even a very simple php code into a placeholder didn't function. It does now.

Ah! So you tried inserting that php code in the placeholder instead of just the image tag? That makes sense now. Look at my instructions again, that php was supposed to be in its own file and used like an external image, then the htaccess bit would not be necessary.

Quote:

---

Create placeholder on your website and insert .....

---

Yes Scupltex that's what I did.

Quote:

---

... instead of just the image tag

---

I'm 70 in 6 months and need constant directions :-O

Thanks for your help.

Egg