dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Displaying images from database in a unstructured way

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    Lightbulb Displaying images from database in a unstructured way

    Hi all.

    I'm not 100% sure if this is the correct section to post this, so if not please let me know.



    I am looking to get images from a database and display them on a page, similar to Flickr website. I am wanting to display the images in an unstructured but intelligent way (eg, 5 photos, the code will know how to display it. Layout changes for number of images to be displayed.)

    https://www.flickr.com/search/?q=computers

    If you check the above link, it should explain in more detail how I want the page, similar to this, so the page when loaded know that it will display 19 images, some rows will have 4 images, some 5 and some 3 etc.

    I am probably not explaining myself fully, but any help would be AMAZING!

    Thank you in advance!

    Aaron.

  2. #2
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    894
    I think the whole process starts with writing some code. If you're not up to doing that, then you were correct - this was not the place to post this.

  3. #3
    Join Date
    Aug 2014
    Posts
    2
    Quote Originally Posted by ginerjm View Post
    I think the whole process starts with writing some code. If you're not up to doing that, then you were correct - this was not the place to post this.
    I know this, but I am unsure how to manipulate the data and how to display it as suggested.

    Ideas on how this can be completed would be helpful, I'm not asking for the code to be written for me, just some guidance on where to start.

  4. #4
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    894
    First you grab the files using a function such as glob(). This allows you to get just the .jpg or .png or whatever files you want. (Not sure if there is an option for all of the above but you can read up on it in the manual.) Then you loop thru the results and generate the html to create the div and img tags to organize the page. Not sure what you mean by intelligent arrangement but a possible one would be to simply let your browser and css arrange the page according to the dimensions you assign to your img and div tags thru CSS.

    Does this help?

  5. #5
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,637
    To do what Flickr does is probably rather complex, in that a lot of resizing calculations have to be going on to figure out what number of images scaled to what height can fit on a row (plus maybe some cropping?).

    A simpler solution would be to decide on a fixed height, then display each image scaled to that height, styled to float:left, and let the browser fill in each row as space allows.

    CSS:
    HTML Code:
    <style type='text/css'>
    #image_container {
      overflow:auto; /* make it resize to contain all floats */
    }
    #image_container img {
      float: left;
    }
    </style>
    Image section of HTML:
    HTML Code:
    <div id='image_container'>
    <img height='200' src='blahblahblah.jpg' />
    <img height='200' src='blahblahblah.jpg' />
    <img height='200' src='blahblahblah.jpg' />
    <img height='200' src='blahblahblah.jpg' />
    </div>
    You will end up with a "ragged right" margin, but this is simple and effective.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles