Thumbnails with captions

Discussion in 'HTML' started by JWS, Dec 29, 2007.

  1. JWS

    JWS Guest

    I am trying to make a page with thumbnails pointing to
    photographs. For the rudimentary first version, see
    http://www.jw-stumpel.nl/test/dogu.html.

    Is there a simple way to put a short caption (such as "wooden
    bowls", "glass hashioki" under each thumbnail? How about longer
    captions, spanning more than one line? Of course I'd like to keep
    the design "elastic", like it is now.

    Regards, Jan
     
    JWS, Dec 29, 2007
    #1
    1. Advertising

  2. JWS

    cwdjrxyz Guest

    On Dec 29, 10:42 am, JWS <> wrote:
    > I am trying to make a page with thumbnails pointing to
    > photographs. For the rudimentary first version, seehttp://www.jw-stumpel.nl/test/dogu.html.
    >
    > Is there a simple way to put a short caption (such as "wooden
    > bowls", "glass hashioki" under each thumbnail? How about longer
    > captions, spanning more than one line? Of course I'd like to keep
    > the design "elastic", like it is now.



    Different people will do this in various ways. If this were my page, I
    likely would take each image to an image tool such as PaintShop. There
    you can add a caption to the image on, under, or where ever in
    relation to the original image. You can add a different color or image
    for the background for the text, if desired. Then you output the new
    image made up of the original image with a caption added. If you use
    an image on more than one page, making the caption part of the image
    sometimes saves writing a lot of extra code on various pages to handle
    the caption and placement of it in relation to the image.
     
    cwdjrxyz, Dec 29, 2007
    #2
    1. Advertising

  3. Scripsit JWS:

    > Is there a simple way to put a short caption (such as "wooden
    > bowls", "glass hashioki" under each thumbnail? How about longer
    > captions, spanning more than one line? Of course I'd like to keep
    > the design "elastic", like it is now.


    There are many alternative approaches; see
    http://www.cs.tut.fi/~jkorpela/www/captions.html

    Perhaps the simplest one (though not necessarily the best one) is

    <table align="left"><tr><td><img ...></td>
    <td>Caption text</td></tr></table>

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Dec 29, 2007
    #3
  4. JWS

    JWS Guest

    JWS, Dec 29, 2007
    #4
  5. JWS

    dorayme Guest

    In article <477678dc$0$25493$>,
    JWS <> wrote:

    > I am trying to make a page with thumbnails pointing to
    > photographs. For the rudimentary first version, see
    > http://www.jw-stumpel.nl/test/dogu.html.
    >
    > Is there a simple way to put a short caption (such as "wooden
    > bowls", "glass hashioki" under each thumbnail? How about longer
    > captions, spanning more than one line? Of course I'd like to keep
    > the design "elastic", like it is now.
    >
    > Regards, Jan


    You want short captions? Short captions are something I looked
    into once. (I have yet to look deeply into long captions):

    http://tinyurl.com/2jcs5r

    --
    dorayme
     
    dorayme, Dec 29, 2007
    #5
  6. JWS

    Paul Guest

    "JWS" <> ha scritto nel messaggio
    news:477678dc$0$25493$...
    >I am trying to make a page with thumbnails pointing to
    > photographs.


    May I show you my web site? I have many thumbnails with captions spanning in
    many lines.
    I simply have used <table.... and <td....

    Click on pictures...

    http://www.tortebomboniere.com/bomboniere/favourcake01.html

    Paul
     
    Paul, Dec 29, 2007
    #6
  7. JWS

    JWS Guest

    dorayme wrote:

    > You want short captions? Short captions are something I looked
    > into once. (I have yet to look deeply into long captions):
    >
    > http://tinyurl.com/2jcs5r
    >


    I now made captions using Yucca's "third method" (using divs).
    This works for "long" (well, fairly long) captions, but one has to
    guess a reasonable value for the height of the caption divs. Yucca
    suggests 4em, and this works across a fairly large range of font
    sizes, but not all.

    However, with this method I cannot get your "centered as a mass"
    effect. It seems I have to learn javascript...

    Regards, Jan
    http://www.jw-stumpel.nl/test/dogu.html
     
    JWS, Dec 30, 2007
    #7
  8. JWS

    dorayme Guest

    In article <4777b101$0$25501$>,
    JWS <> wrote:

    > dorayme wrote:
    >
    > > You want short captions? Short captions are something I looked
    > > into once. (I have yet to look deeply into long captions):
    > >
    > > http://tinyurl.com/2jcs5r
    > >

    >
    > I now made captions using Yucca's "third method" (using divs).
    > This works for "long" (well, fairly long) captions, but one has to
    > guess a reasonable value for the height of the caption divs. Yucca
    > suggests 4em, and this works across a fairly large range of font
    > sizes, but not all.
    >
    > However, with this method I cannot get your "centered as a mass"
    > effect. It seems I have to learn javascript...
    >
    > Regards, Jan
    > http://www.jw-stumpel.nl/test/dogu.html


    First about the JS, why not grab the script from my setup. You
    can get it at:

    <http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/boo
    tnic7.js>

    (Sorry, I can't tinyURL this.)

    It is named after the bloke* who made it (in a thread around
    about** March, April this year)

    Second, I have not looked into your gallery but it looks nice
    (the centring is just an extra touch). I did notice though that
    you can achieve a saving in the html doc, no need to be classing
    so many divs. Perhaps you can achieve the reduction by looking at
    my source for the general idea)


    -------------------
    * "bloke" is an Australian word that means "man" and not to be
    found in the International English Dictionary. The js script file
    has 7 after it because it is a finely honed thing from many
    earlier versions. Treat it with reverence.

    ** I am roughly sure of this because I used it to centre a mass
    of a family member's wedding pics and I recall with great pride
    and pleasure the wedding itself... <g>)

    --
    dorayme
     
    dorayme, Dec 30, 2007
    #8
  9. JWS

    JWS Guest

    dorayme wrote:

    > First about the JS, why not grab the script from my setup. You
    > can get it at:
    >
    > <http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/boo
    > tnic7.js>


    I did that, and I am now experimenting with it. Many thanks. I
    found the thread about this also (http://tinyurl.com/3chdvh).

    About "short" vs. "long" captions: the problem is not so much the
    length of the captions themselves, but the fact that they may be
    of *different* length. For instance, try to make a few captions in
    your example page "long". A picture may be "stuck" (refuse to
    float to the left) if the picture above and to the left has a
    longer caption than the picture directly above. To cure this, it
    seems necessary to give all captions the same, sufficient, height,
    as per Yucca's recommendation. But this risks wasting screen
    space, and the height (even when given in ems) may not be
    sufficient after all if the font size is increased.

    Maybe javascript can be used to make this "dynamic" also. I'll
    start studying javascript anyway, because I would like to
    understand bootnic's script (in particular I do not understand the
    "!!" operator in the fifth line..).

    Regards, Jan
     
    JWS, Dec 31, 2007
    #9
  10. JWS

    dorayme Guest

    In article <4778c373$0$25485$>,
    JWS <> wrote:

    > dorayme wrote:
    >
    > > First about the JS, why not grab the script from my setup. You
    > > can get it at:
    > >
    > > <http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/boo
    > > tnic7.js>

    >
    > I did that, and I am now experimenting with it. Many thanks. I
    > found the thread about this also (http://tinyurl.com/3chdvh).
    >
    > About "short" vs. "long" captions: the problem is not so much the
    > length of the captions themselves, but the fact that they may be
    > of *different* length. For instance, try to make a few captions in
    > your example page "long". A picture may be "stuck" (refuse to
    > float to the left) if the picture above and to the left has a
    > longer caption than the picture directly above. To cure this, it
    > seems necessary to give all captions the same, sufficient, height,
    > as per Yucca's recommendation. But this risks wasting screen
    > space, and the height (even when given in ems) may not be
    > sufficient after all if the font size is increased.
    >
    > Maybe javascript can be used to make this "dynamic" also. I'll
    > start studying javascript anyway, because I would like to
    > understand bootnic's script (in particular I do not understand the
    > "!!" operator in the fifth line..).
    >



    Yes, I see your concern. When I said about short captions, it was
    quite deliberate. If you are going to have some long captions
    then this changes how you must tackle the issue. In the template
    series I offered before, you will have noticed the management of
    the pages into landscapes, portraits and very wide strips (the
    latter suitable for 'film strip thumbnails' for movies). And that
    the divs that housed the thumbs in each category were the same
    width. The height comes naturally from the pic/caption pairs.
    This gets the neatest look as long as the pics are the same
    height and the captions very similar in length.

    But things are rather different if you want long captions thrown
    in here and there. I am not sure I would have offered the
    template had you not said short caption in your original post <g>

    If you want to accommodate long captioned pics, then there are
    'management' ways. If there are just very few of these long ones,
    do not let them loose among the tidy ones!

    Group all the long captioned pics together and don't have any
    captions that are too way out of kilter in size with the other
    long captions or the problem you notice (of floats catching) will
    reappear. The other thing you can do, it has its downsides, is to
    give a generous enough explicit height to the float boxes, enough
    to accommodate the tallest pic/caption pairs. You can do this in
    ems. It is easy to decide on a 'good enough' em dimension once
    you know the length of the longest caption in any group.

    O, and btw, if you have long captions, text-align: center looks
    awful, make it left for these.

    --
    dorayme
     
    dorayme, Dec 31, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GrumpyDev
    Replies:
    0
    Views:
    417
    GrumpyDev
    Aug 21, 2003
  2. Andrew Crowe

    associating captions with images

    Andrew Crowe, Apr 5, 2004, in forum: HTML
    Replies:
    7
    Views:
    391
    Jukka K. Korpela
    Apr 6, 2004
  3. Kooner

    captions under photos

    Kooner, Jun 1, 2004, in forum: HTML
    Replies:
    35
    Views:
    1,261
    Mark Parnell
    Jun 30, 2004
  4. (Pete Cresswell)
    Replies:
    5
    Views:
    566
    brucie
    Oct 21, 2004
  5. Thomas Mlynarczyk

    How to mark up image captions

    Thomas Mlynarczyk, Nov 26, 2004, in forum: HTML
    Replies:
    17
    Views:
    837
    Toby Inkster
    Nov 27, 2004
Loading...

Share This Page