If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Member #
    6 times
    Hello I am making an online photo album. My friends are saying, "How about some captions to explain the pictures!" Well it's not so easy.

    Ground rules:
    1. The code can not specify dimensions. (Photos are all the same size but some are horizontal and some vertical. It is impractical to decide manually on two different codes for hundreds of photos.)
    2. I want 'fluid galleries'. I.e., like a basic string of <IMG> tags, I want the number of thumbnails per line to adjust to any browser width.

    I found a good tutorial, that understands these goals, at:

    But... I have a problem with everything suggested by this tutorial...

    Here are the problems with the other methods.
    • Tables won't work in my IE-7.0. Explorer does not respond to either float:left or display:inline with tables. (Although Firefox does.)
    • Display:inline is no good for captions because it is inherited. I.e., a nested <div> is needed to make the caption go underneath the image, but this effect is destroyed if it is also 'inline' with the parent <div>. Using </ br> tags does not work either. A </ br> shoots the caption all the way down to the next row of images.
    • Float:left almost works but not quite...

    With float:left, the caption goes under the image easily. No need for a nested <div>, just a </ br> tag... But... when one image is taller than others, the next row will not 'clear' that image. The next row will begin after that image, not at the left margin. This creates large white spaces. For an example see:

    With display:inline or a plain row of <img> tags, each item aligns itself to the BOTTOM of the previous, and there is no such problem. With float:left, each item aligns itself to the TOP of the previous. So, when one of the images is vertical, or has a caption, its higher <div> prevents the next row from starting at the left margin. Vertical-align:bottom and vertical align:baseline have no effect, presumably overridden by the 'float' property.

    P.S. I also tried to use the <dl> <dt> codes. In addition to being an 'incorrect' method, they have all the same problems as using <div> codes.

    So unless anyone has a better suggestion, I think I will just use float:left and let things be a bit messy.


  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Cottage Grove, Minnesota
    Member #
    720 times
    If it were me, I would find a free gallery script and install it, and customize it
    as I needed. A free one such as Coppermine:

    Using a gallery script (PHP/MySQL) does a couple of things.

    It has the admin part where you upload, manipulate images.
    It does all of the resizing for you.
    People can visit the gallery and make comments.
    People can upload images too ... where you give them upload admin rights....
    that allows other people to help you with images.

    I mentioned Coppermine, but there are several others to choose from.

    Using a gallery script also eliminates the need for making all of your static HTML pages.

  4. #3
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Member #
    6 times
    Thank you MLSEIM. I was kind of hoping somebody would mention gallery scripts. I do need to try them out, someday.

    However, what I do is pretty good and does not require updating a program or anything. Also my system, which I use for all my sites, includes keeping a perfect backup copy of every website on my desktop. So if a webhost goes kaplunk, I just FTP everything to a new host. No worry about all my photos disappearing, or the format adjustments disappearing, etc.

    I use the free program EASYTHUMBNAILS. This has a 'renumber' option that renames every thumbnail or crunched image (or non-crunched if you wish) from 1 onwards. So, the same code can be reused for every page.

    <div class="foto">
    <img src="200a1.JPG" alt=""></div><div class="foto">
    <img src="200a2.JPG" alt=""></div><div class="foto">
    <img src="200a3.JPG" alt=""></div><div class="foto">
    <img src="200a4.JPG" alt=""></div><div class="foto">
    <img src="200a5.JPG" alt=""></div><div class="foto">

    This continues up to "200a96.jpj". I use this same template for every page of my online photo album. Then I just delete those image references that are not needed. For example, if I only have 45 thumbnails on a certain page, I just wipe out 200a46 through 200a96.

    The 200a refers to the thumbnail size.

    Then for the full-size pictures:

    1. For the Jpeg files, I readjust EasyThumbnails to 700 pixels or so, and automatically to rename everything 700a1, 700a2, etc.
    2. For the page code, using 'find and replace' I change every 200a to 700a.
    3. The same code for the 'thumbnail' page then becomes the 'full size' page.

    The only difference between the 'thumbnail' pages and the 'full size' pages is the number of images. I.e., a thumbnail page with 76 thumbnails gets chopped up into several 'full size' pages with 12 pictures each.

    So, I think I can process hundreds of photos as fast as any 'online photo album' script.

    But, I assume that 'online photo albums' have lots of nifty features that I have not thought of. So I am interested. But in any case, I still would like to know how to code a caption for a photo! Preferably that works in almost every situation...

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Bandung, Indonesia
    Member #
    Ah, pekalongan... Not so far from here, lol.

    I think you should seriously get things into a database, without having to resize and upload in a preformatted fashion. It's not good to link two separate systems like that, because it's pretty much a hack.

    I would suggest you to pick up pre-existing software, it should help considerably. Otherwise, you'll need to write your own photo management system, which, if constructed properly, shouldn't deteriorate if you change hosts.

    Problem is, you want the photos inline. That's going to be a problem, no matter how you try to put it. I, and other designers, will probably think it's ok to use a table (for the entire layout) for this case; it is sort of like tabular data. The captions would simply sit in a cell with the image.

    Alternatively, have the captions as lightbox text, or tooltips. Not always a good idea, though.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

Remove Ads

Posting Permissions

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

Search tags for this page

i need a good caption for my photo


i need img code


i need s good picture captions


using dl dt with image captions

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: