Addon: Photo Mosaic

[kevincrafts]

This addon will make a random mosaic out of your available photos. You can control how many tiles are created and the width of the tiles. Image thumbnails are used for the tiles and are cropped by the size you specify.

Installation:

1. Open mosaic.php in your favorite editor and change the totalTiles variable to the number of tiles you want to output.
2. Put mosiac.php in your addons folder.
3. Add <MOSAIC> to a template. I made a new template that only displays the mosaic.
4. Add the following css style to your css file or template:
   
   a.mosaic {
   border:none;
   display:block;
   float:left;
   width:40px;
   height:40px;
   background-position:center;
   text-decoration:none;
   }
   #mosaic {
   width:720px;
   }
   Change the width and height to your liking. You will need to do some calculations with the tile width and height, #mosaic width, and the tile count to get this to display properly. By default it makes a rectangle that is 720 by 480. For example, 720/40 = 18 columns * by 12 rows = 216 (the default tile count).

How it works:

See it on my site at http://blog.kevincrafts.com/index.php?x=mosaic

Download

[austriaka+]

this looks great, a superb idea!

Two things to mention:
You forgot a download link in your post here.

And I suggest a small change in code for making it faster:
I would use the $totalTiles already in the MySql select (LIMIT 0,$totalTiles)

Otherwise the array becomes much bigger than necessary. So you can work through the array with

foreach ($photomosaic as $thumb) {
   explode($pieces = explode("|", $thumb);
   ...
}

And another idea for enhancing:
You could ask for $_GET['cagegory'] and $_GET['tag'] and display a mosaic for the selected category and/or tag as well
(<MOSAIC_TAG> and <MOSAIC_CAT> for example)

KArin

[kevincrafts]

Wouldn't that query always limit you to the same photos?

[austriaka+]

you can use ORDER BY RAND() in your statement but since the WHERE clause is worked first I guess you are right. And ORDER BY RAND() seems not to work in all MySQL/PHP version combinations.

Another thing: I just try to implement your Addon and found massive problems.
First thing: you have one slash too much in your thumbnail path: not /thumbnails but only thumbnails.
Second thing: with display:block the mosaic is shown, but it runs out of the <div> where it is sitting within. Without the display:block the width and height of the <a href is not considered.
Third thing: you use float:left. You have to use a <span> with style="clear:left" after the mosaic block, otherwise the following elements will be mixed up

[kevincrafts]

Thanks for pointing some things out - I have made some fixes, which include wrapping the whole thing in a container which will need a width value in the css.

[austriaka+]

working great now.
Only one thing:
you should change this line:
$thumbpath = $cfgrow['thumbnailpath'];
to this:
$thumbpath = ltrim($cfgrow['thumbnailpath'], "./");

[austriaka+]

it is working great now, see it here in live action:
http://blog.uhlig.at/index.php?x=mosaic

only thing is funny: in InternetExplorer (6 and 7) the thumbs are created row for row and all are shown.
Firefox first creates the whole div and then fills it with thumbs in random order. Doing this it "forgets" some of them so there are "wholes " between, it feels like this is concerning always the same images

[kevincrafts]

I'll have to look into that - I haven't seen that happen yet on my install but I did notice a couple on yours that didn't show up. Thanks again for your help.

Originally Posted by austriaka

it is working great now, see it here in live action:
http://blog.uhlig.at/index.php?x=mosaic

only thing is funny: in InternetExplorer (6 and 7) the thumbs are created row for row and all are shown.
Firefox first creates the whole div and then fills it with thumbs in random order. Doing this it "forgets" some of them so there are "wholes " between, it feels like this is concerning always the same images

[austriaka+]

found it - those images contain a space within their filename. Looks as HTML can interpret that, but Firefox fails in CSS

[HOUSEAPE]

This is a great idea. Unfortunately for me, this is a little complicated. Let's just say I was impressed with myself to even get PixelPost installed on my servers.

I am confused on the template side of things and would LOVE it if you would post the template or something similar so that I might tweak it for my blog.

Also off subject here...

Is it possible to post by e-mailing a photo to my blog? I was hoping to set something up that I could use to post pictures while I'm away from my computer.

Any help is greatly appreciated. Sorry for being such a noob at this.