SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image carpeting plan...experts

    Hi there,

    I'm running a site that does a lot of image collection. We syndicate a large collection of images and I'm personally trying to come up with a way to display the images in a more visual manner (that will be adapted dynamically).

    I'm using PHP5 and ImagicMagick for thumbs. All the images we receive through RSS/Atom feeds are of different thumbs - which can get really complicated for what I want to do.

    Basically my idea is to "carpet" the screen with a show of thumbnails. I was hoping to make it look like a puzzle that fits together everything. This is what I mean: http://www.spyral-productions.com/dd...isc/sample.gif

    I don't want to conglomerate all the images into one large image, I was hoping to use absolute positions to align the images. My theory is if i can get it working in HTML, later on I'll export the position data through an XML file and use Flash to arrange them nicely.

    But the key issue is determining their positions. I'm trying to develop an algorithm that will do it properly and efficiently.

    So far I have a database with resolution sizes for each image.

    I have a few ways of going about the arranging algorithm but none will do it the way I want above:
    - determine the sizes of all images using database info and generate frequencies of image sizes. determine the approximate "range" to equally destribute images between small, medium and large thumbnail sizes. if there are any images outside these boundaries automatically shrink them to the closest thumbnail size. strange shaped thumbnails placed in smallest category. regenerate all images in each category to an optimal size. organize them starting from the largest thumbs at the top, smallest at the bottom.
    - starting from the top left corner of the "canvas" find the largest image in the array of images. on the right edge determine the height and search for images that are the same size, or two images with the (height/2), then do the bottom edge. recalculate the new dimensions (as a 4 face geometrical object) and perform the same function. the only problem with this is since we aren't taking into account the "gaps" between the image there will be holes in the carpet.

    I'm struggling with this, anyone with the skillset to help solve this - please, I beg of you. It's driving me bonkers.

    Dave
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  2. #2
    is_empty(2); foofoonet's Avatar
    Join Date
    Mar 2006
    Posts
    1,000
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you want the equivalent of a Tetris clone.

    Havent seen one written in PHP, havent looked either, but sticking with the game idea, in phpclasses.org there are a couple of other games that might give you some ideas of how to present images.

  3. #3
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The technique is called photo mosaics. I found that imagick can create whole images...http://www.cit.gu.edu.au/~anthony/graphics/imagick6/montage/ but it kind of sucks because I wanted to do it with absolute position.

    foofoonet there was nothing useful on phpclasses, and I'm not sure how the tetris game would help.

    Imagick has a nice package (here's a sample call):

    montage 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 7.jpg 8.jpg 9.jpg 10.jpg 11.jpg 12.jpg 13.jpg 14.jpg 15.jpg -mode Concatenate -tile 4x tile_0.gif

    but even then it's not that great!! :'(

    I'm sad :'( I really wanted to do this with absolutes. :'(
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  4. #4
    is_empty(2); foofoonet's Avatar
    Join Date
    Mar 2006
    Posts
    1,000
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you have perhaps gathered I am not the the owner of the skillset you seek! (perhaps they will be around tomorrow, no, really....)

    Forgive me frivilously tossing in the first thing that came to mind because you seem to want to manipulate their position via the DOM.. Absolute positioning and all that.

    If you are going to be resizing images then this isnt going to be that difficult if all your sizes are like, 160, 320 and multiples of say 80. How about a 160x160 gets a value in your dbase of "4" where as a 80x80 image is "1" - would that help breakout another pattern/idea?

  5. #5
    SitePoint Guru davedibiase's Avatar
    Join Date
    Aug 2001
    Location
    Toronto, Canada
    Posts
    829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *smacks self* that's a good idea. The problem is the images aren't all within standard sizes. I'm going to have to set specific height and widths OR generate thumbs. It would give me more of a squared look. either way I think it will do well :-)

    I figured that to make it look good I'm going to have to separate the image sizes, so I'll follow these steps:
    - gather list of images for the current day
    - determine their sizes and determine to resample image
    - determine the range of image sizes and re-organize them so that big images and small images are fairly organized throughout the mosaic
    - start from left 0,0 and start placing images down well calculating the height room used
    - if row length is used move to next row
    - continue process until all images in the sorted array are ready

    I'll give this a whirl.
    ||Dave Di Biase||
    ----------------------------------
    "There are 2 secrets in life. 1) Never say everything you know."
    GFXWARS - The ultimate graphics battle!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could....

    generate a blank image from php,

    select a thumb at random, position it say top left corner of the blank image

    get that 1st images dimensions, subtract then from the starting canvas's dimensions

    get a second image, test its size, if it will fit, place it next to the 1st image (easy math for the placement coords)

    repeat in any direction you wish

    php has all the neccesary functions built in

    edit: i dont think this would be a particular burden on php, all those images may annoy your users - however if you wanted faster performance from the webpage then you could just output the resulting html to file to get some pages auto generated ready for publication, and updating them would just be a case of refreshing a page !

    More edit : tbh you wouldnt even need to be accurate really, just create an oversize image and save it clipped a bit to the dimensions you want to create that montage feeling


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •