Random Images

Method

If you want to display random images that have been uploaded to your site this can be done with wikidot syntax using dataforms and the listpages module.

1. Create a Live Template Page

The easiest way to show random images is to use dataforms. These require a live template so the first thing to do is to create that live template and put the dataform code on it and the code to display the image:

i. create a page called image:_template. image is the category and _template is the pagename. As this is a live template it MUST have the leading underscore.

ii. add the code as shown below:

[[image %%form_raw{image}%%]]

====

[[form]]
fields:
 image:
   label: Image
   type: file
[[/form]]

The section above the ==== line is the layout section for displaying the image on the saved page. It can have other Wikidot syntax, dataform fields or code on it but everything must be above the line.

The section below the ==== line is for the dataform structure. In our example I have just put one field. You can see the documentation for dataforms at http://www.wikidot.com/doc-data-forms:start

Make sure you use exactly the same indentation as dataforms are very strict about this and won't save if it's wrong.

Save the live template page.

You should probably make the image category autonumbered in your _admin page as I have done as this will help to avoid duplicates and it just makes saving the pages quicker as you upload the images.

2. Create a Main Images Page

i. It's not mandatory but it's a good idea to create a page which can hold the button to help you upload images and a listing of the images you've uploaded.

3. Upload the Images

i. you now want to upload the images. This will need to be done one at a time. The images will all be uploaded to the image category in this example. If you click on the button (which is just a newpage button from http://snippets.wikidot.com) you'll see that the dataform opens and you have a button to select the image from your computer. After you have selected it will be uploaded. When this has finished click save. Because we added the code in the layout section to display the image you'll see the image after the page has been saved.

Once you have uploaded all your images go back to the images page and you'll see the images displayed. I chose to display them rather than use the filename but you can change the listpages module to suit what you want.

4. Display a Random Image

i. You now want to display a random one of these images. You can put the syntax on any page on your site. The syntax for displaying the random image is as follows:

[[module ListPages category="image" limit="1" order="random"  separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]

As you can see, the listpages module is in random order but we are just bringing back 1 image each time. The [[image %%form_raw{image}%%]] is normal Wikidot image syntax but instead of specifying the imagename we have told it to display the contents of the image field in the dataform in the image category (there can only be one dataform structure in any category).

One thing to note: the random image is changed about every 60 seconds. So if you keep refreshing the page you will see the same image for about 60 seconds but aer that there will be another one displayed.

---

In Action

Upload a new image

[[include :snippets:newpage-button
|name=image
|title=Image
|category=image
|parent=images
|size=200px
|button=Upload a new image
]]

---

Random image:

^{(Due to server cacheing at Wikidot the image will only be changed approximately every 60 seconds when the page is refreshed)}

Show Syntax

[[module ListPages category="image"  limit="1" order="random"  separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]

---

All Images Uploaded to the image Category

The random image above is selected from the images uploaded to the image category via a dataform.

Show Syntax

[[module ListPages category="image"  perPage="50" order="name"  separate="false"]]
[[div style="float:left; margin-right:1px;"]]
[[image %%form_raw{image}%% height="100px"]]
[[/div]]
[[/module]]
[[div style="clear:left;"]]
[[/div]]

---

Pages in the image Category

image:1 - Image
image:2 - Image
image:3 - Image
image:4 - Image
image:5 - Image
image:6 - Image
image:7 - Image
image:8 - Image
image:9 - Image
image:10 - Image
image:11 - Image
image:12 - Image
image:13 - Image
image:14 - Image
image:15 - Image
image:16 - Image
image:17 - Image
image:18 - Image
image:19 - Image
image:20 - Image
image:21 - Image
image:22 - Image
image:23 - Image
image:24 - Image
image:25 - Estados Unidos
image:26 - Semente

---

Images tagged by letter

If you tag the individual image pages you can then display them as you want, for example in tabs:

A

Images Tagged A

[[module ListPages category="image"  order="random"  tags="A" separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]

B

Images Tagged B

[[module ListPages category="image"  order="random"  tags="B" separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]

C

Images Tagged C

[[module ListPages category="image"  order="random"  tags="C" separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]

D

Images Tagged D

[[module ListPages category="image"  order="random"  tags="D" separate="false"]]
[[image %%form_raw{image}%%]]
[[/module]]