Le wiki de schplurtz

21. March 2012 [Create a page with lots of photos] ztrulphcs

about photos at

How Dokuwiki can handle photos at ? I made some experiment to discover.

I made a media namespace called stupid-photos with photos from two cameras : my iphone 3gs and a canon camera.

The directory contains

  • 42 photos from the iphone
    • named img_0*jpg.
    • dimension : 2048×1536
    • smallest photo : ~ 580kb
    • biggest photo : ~ 2Mb
    • mean size : ~ 1.4 Mb
  • 29 photos from the canon camera,
    • named img_2*jpg
    • dimension 4320×3240
    • smallest size : ~ 2.8Mb
    • biggest size : ~ 5.5Mb.
    • the mean size : ~ 3.6Mb

Try to insert one photo while editing a page

Let's click on the insert media button and see what happens.

Most photos from the iphone are absolutely not recognised at all. Some are just ignored. Here is what I get :

Photos from the canon camera are slow to come, but they appear. Note that some of them don't appear entirely. probably because php timed out while the download is in progress. Here is what I can see :

So, as we all know, size doe not matter, but time does.

Here are 2 photos, one from each set :

It may seem that it's ok. but it's not ! Take a look at the actual image dimension. They should be 200×150 pixel each, but only the left one is 200×150 pixel, the photo on the right side is 4320px×3240 pixelsbut the browser resizes it at 200×150 px.

So php here, at cannot handle images that big.

Create a gallery

I use the plugin:gallery. No real surprise. See the result here

Create a page with lots of photos

I used lorem ipsum from to create 300 paragraph of random text, and this awk script on it to generate a page with random photos randomly resized. At the end of each sentence, there is a probability of 0.7 that a photo is inserted. each photo has a 99 percent probability to be resized.

#! /usr/bin/awk -f
	img[nimg++]="img_0097.jpg"; img[nimg++]="img_0112.jpg"; img[nimg++]="img_0132.jpg"
	img[nimg++]="img_2148.jpg"; img[nimg++]="img_2163.jpg"; img[nimg++]="img_0098.jpg"
	img[nimg++]="img_0113.jpg"; img[nimg++]="img_0133.jpg"; img[nimg++]="img_2149.jpg"
	img[nimg++]="img_2164.jpg"; img[nimg++]="img_0099.jpg"; img[nimg++]="img_0114.jpg"
	img[nimg++]="img_0142.jpg"; img[nimg++]="img_2150.jpg"; img[nimg++]="img_2165.jpg"
	img[nimg++]="img_0100.jpg"; img[nimg++]="img_0115.jpg"; img[nimg++]="img_0151.jpg"
	img[nimg++]="img_2151.jpg"; img[nimg++]="img_2166.jpg"; img[nimg++]="img_0101.jpg"
	img[nimg++]="img_0116.jpg"; img[nimg++]="img_0154.jpg"; img[nimg++]="img_2152.jpg"
	img[nimg++]="img_2167.jpg"; img[nimg++]="img_0102.jpg"; img[nimg++]="img_0117.jpg"
	img[nimg++]="img_0155.jpg"; img[nimg++]="img_2153.jpg"; img[nimg++]="img_2168.jpg"
	img[nimg++]="img_0103.jpg"; img[nimg++]="img_0118.jpg"; img[nimg++]="img_0156.jpg"
	img[nimg++]="img_2154.jpg"; img[nimg++]="img_2169.jpg"; img[nimg++]="img_0104.jpg"
	img[nimg++]="img_0119.jpg"; img[nimg++]="img_0157.jpg"; img[nimg++]="img_2155.jpg"
	img[nimg++]="img_2170.jpg"; img[nimg++]="img_0105.jpg"; img[nimg++]="img_0120.jpg"
	img[nimg++]="img_0158.jpg"; img[nimg++]="img_2156.jpg"; img[nimg++]="img_2171.jpg"
	img[nimg++]="img_0106.jpg"; img[nimg++]="img_0121.jpg"; img[nimg++]="img_0213.jpg"
	img[nimg++]="img_2157.jpg"; img[nimg++]="img_2172.jpg"; img[nimg++]="img_0107.jpg"
	img[nimg++]="img_0122.jpg"; img[nimg++]="img_0214.jpg"; img[nimg++]="img_2158.jpg"
	img[nimg++]="img_2173.jpg"; img[nimg++]="img_0108.jpg"; img[nimg++]="img_0123.jpg"
	img[nimg++]="img_0215.jpg"; img[nimg++]="img_2159.jpg"; img[nimg++]="img_0109.jpg"
	img[nimg++]="img_0124.jpg"; img[nimg++]="img_2145.jpg"; img[nimg++]="img_2160.jpg"
	img[nimg++]="img_0110.jpg"; img[nimg++]="img_0126.jpg"; img[nimg++]="img_2146.jpg"
	img[nimg++]="img_2161.jpg"; img[nimg++]="img_0111.jpg"; img[nimg++]="img_0127.jpg"
	img[nimg++]="img_2147.jpg"; img[nimg++]="img_2162.jpg"
function mkresize() {
	if( rand() > 0.99 )
		return "";
	return "?" 10 + int( rand() * 190 ) "x" 10 + int( rand() * 150 )
function mkformat(   zz, base ) {
	if( zz < 0.25 )
		return "{{" base "%s}}"
	if( zz < 0.50 )
		return "{{ " base "%s}}"
	if( zz < 0.75 )
		return "{{" base "%s }}"
	return "{{ " base "%s }}"
BEGIN { RS="" ; FS = "." }
	# ignore the empty field at the end of the line, use <
	for( i = 1; i < NF; ++i ) {
		#printf "%s (%g)   ", $i, k
		printf "%s", $i
		if( "" != $i && k > 0.7 ) {
			image=img[int(rand() * nimg)]
			printf fmt, image resize
		printf "%s", FS
	printf "\n\n"

This creates quite a big page with a lot a photos. :!: This page happens to be a bomb, because most photos are not resized, and the browser has to do the job of resizing all those big photos. Not only did this page kill my firefox, but my gnome session was reduced to nothing as oom killer started to shoot processes. I run gnome 2 under Ubuntu 10.04 LTS with firefox 10.0.2. Interrestingly, chrome could handle it without problem.

Be warned ! seeing the source code is ok, seeing the page itself might crash your session.