I again approach the wisdom of the monks, not with a brain-twisting code example, but with a design query for assistance:

I have a proposed section of a new website I'm designing that was originally called "Screenshots", bland. I'm going to update this for the new site launch to be more of a "gallery" of images for users to walk through.

My question though, is: What is the best approach to tracking the image filename, alt tag, title tag, and a textual blurb that describes what is shown in the actual image itself?

I could use something like this (vars shortened here for space): 

# t = TITLE tag
# p = param passed
# a = ALT tag
# d = Description 
@img_list= 
       ({t=>'palm',        p=>'palm',
         a=>'Plucker running on the Palm',
         d=>'Plucker on the Palm device supports B&W,
             color, VFS, and external storage'},

        # Handera in Scale-to-Fit (StF) mode
        {t=>'handera_stf', p=>'handera_stf',
         a=>'Plucker in Scale-to-Fit mode on the Handera'},

        # HiRes Sony
        {t=>'sony_hr',     p=>'sony_jd',
         a=>'Plucker on the Sony device in HiRes mode'},

        # Sony with JodDial support
        {t=>'sony_jd',     p=>'sony_jd',
         a=>'Plucker on the Sony device in HiRes mode'},

        {...},
        );

[download]

In this example, I could then display each image something like: 

$last_img   =       pop @img_list;

for my $item (@img_list) {
        print span({-class=>'mitem'}),  
                a ({-href=>"$script?action=$item->{p}", 
                    -title=>"$item->{a}"},
                img({-src=>"i/$item->{p}.gif",
                     -border=>'0', 
                     -alt=>"($item->{a})"}),
                " $item->{t} " ),
                " | ",
                "\n";
}

[download]

This seems inefficient, and the hash gets uglier and larger as I add more images and more descriptive text to each one. Also, it doesn't allow one to click on one image and expand that into a page of several images (all "Palm" images for example, or all "Sony" images).

I'm wondering if there are other similar/better or different ways of thinking about doing this. I'm already using SQL (mysql) to hold the News articles on the site, so I could probably make a table there to hold the images and image data, but I've never personally done that, and then I have to deal with filesystem-based storage vs. storing the images in the database itself as a BLOB.

Has anyone done this? Any gotchas here? I can implement the perl bits.. I just can't wrap my head around the right design considerations with this approach yet.

In reply to Image "gallery" design considerations by hacker

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.