Addon suggestion: Collage Archive

[raminia]

Hi,
I was wondering about a cool unique addon that makes (random) collages of the PP. Something like collage behavior in Picasa 2.
http://www.raminia.com/temp/collage.jpg
it can be used for archive page or side pages.

but I don't know how to make it. making multiple images overlay on each other. adding border and shadows and rotating them.

You can see it in action from this temporary address
http://pblog.raminia.com/index.php?x=collage

[tinyblob]

I'd be more inclined to do this in Flash, than completely server side. That way it could be interactive (dragging the "photos" around).
I'll look into this when i'm finished my current projects..

[raminia]

Doen't Flash look "flashy" for this?

When it's on serverside it can be made for example after each 5 posts. Or a single collage based on selected images by admin....

However, Flash version would be more cute and neat but more complexity on users' side.

[tinyblob]

Well, personally i always prefer a server side solution. But flash would make it more interactive.
I'll read up on GD and see how plausible it is, but i wouldn't imagine there would be any real problem.

[raminia]

I've made a sample version of it

Installation
1) Dowload the attached zip file and copy the contents to addons folder. Then you have a collage_addon.php file and a collage folder with collage/Image_Toolbox.class.php inside.

2) Modify the visual paramters of the collage like width, height, background color, and etc inside the collage_addon.php


// Set Parameters
$w =600; // Width of the whole Collage thing
$h = 400; // Height of the whole Collage thing
$num_image = 35; // Number of images in the Collage
$radius = 250;//$temp_w/3; // Radius of Spiral
$bkgroundcolor = '#EBE4BD'; // Bacground color of the Collage
$thetac = 1; // Theta accumulation
$each_img_w = 65; // Width of each image in the collage ( should be less than $w)
$each_img_h = 65; // Height of each image in the collage ( should be less than $h)
$offset = 3; // distance offset. The bigger the off set the more seperated the images
$bpercent = 85; // alpha channel percent (how visible the overlaying of layers of collage will be)
$border['w']= 10; // border width
$border['h']= 16; // border height
$bgc_img = '#212121'; // border color of each image




Usage
add the new tag <COLLAGE> to your template.


For Further Development
In this addon insanly I created a jpg file collage.jpg to produce the collage but it should work without creating a new file. Also the layout is not good enough.

@tinyblob
Please help me withthis

Sample
http://www.raminia.com/temp/colg.jpg

EDIT:
Note that this is changed several times. if you dload the attachment before appearance of this notice dload it again.

[tinyblob]

if($file != "." && $file != ".." && $file != ".DS_Store") {
hah, nice exception :)
cool, i'll take a look this week

[raminia]

I've edited it please re dload it.

I forgot to tell that every image on the collage is clickable and it has a link to the on that image on photoblog.

haha... I would call it my coolest addon ever! :D

That IF statement was result of copy paste. Actually the addon grabs images from db and reading from directory is obsolute. it was for startup test only and I should exclude it from release version.

To make it more like Picasa, it need rotation, shading, and curved edges;)

[raminia]

You can get better results with these set of paramters

1) fewer number of photos. less than 10
2) larger thumbnails. 150~180 in width and height
3) larger collage image 100x800
4) small offset ( $offset = 5; )
5) smaller radius ($radius = 180;)
http://www.raminia.com/temp/colg2.jpg

[unseen]

that is SO cool. i'll probably be adding to my next template.
but i have an idea. what about integrating the categories into it? say you have your archive page. there could be two "main" options, normal and collage (similar to the light and dark bgcolor switcher). under collage the photos could also be selected by category, so you don't have ALL the photos showing all at once. unless that is what you are already doing and i just wasn't paying attention ;]
this is such an awesome idea. i love it!

[Joe[y]]

kudos to you for this! you're too cool for school mate

[raminia]

;)

another idea maybe using layers with z-index would better that generating a jpg file

BTW, this version need some more care:
1) in IE the links are not clickable. what happened there? Am I missing something?
2) I need to make Hover for each image in the collage to indicate which one is not selected from overlayed photos. How could I do that?

EDIT:
I fixed the IE thing but I don't know how to make hover modification happen.
check out
http://pblog.raminia.com/?x=collage :D I'm almost satisfied.

[Joe[y]]

;)

another idea maybe using layers with z-index would better that generating a jpg file

I fixed the IE thing but I don't know how to make hover modification happen.

as for z-index - good idea but be careful with IE!

as for the hover - make sure you define the block element that the images are in as well as whatever class the images are in your css design. this is the best way to do stuff. (or are you not using css ? sorry i don't have time for the code - ignore this if i'm talking out of my ass... i just assumed 'cause of z-index.)

[raminia]

I found out that <area> tag in <map> object does not recognize borders. Therfore, I planned some other solution. I used overLib for this addon too! when you roll over the image in the collage it will shot the chosen image with overlib. Also, I changed the paramteres of that make the spiral of images to get the best appearance that fits my expectations.
Now I could say I like it:)

Again, this is the coolest addon I've ever made :P
check it out http://pblog.raminia.com/index.php?x=collage

http://www.raminia.com/temp/colg3.jpg

[tinyblob]

doesn't look like you need my help after all :D

[raminia]

I alway appearciate your help:)
Is it user friendly?

[raminia]

I'm still wonderin about how bad it is to save the jpg file on server instead of print it right into the screen.

I don't know how to do it in the right place. I want the img link to appear some specific place in the page with the attirbute usemap='#collagemap' .

How?!

view of another sample of different parameters and thumbnail size
www.raminia.com/temp/colg4.JPG

[raminia]

I added category drop box too.

AND released the first version

version 0.1 Download and details:
http://forum.pixelpost.org/showthread.php?t=2733

[ttlive]

That is really a gread Idean and plug-in.
I will download it on the weekend and implement within the next weeks, as soon I will adjust my currently simple layout!
Great! Thanks in advance.