Labels under image-navigation menu

[olegario]

I've had some users who didn't know that there was a slideshow function or e-card function, just because they didn't know what the double right arrow (in the Hardwired theme) or the E (also in the Hardwired theme), did those functions.

Has anyone ever added clickable text under the icons describing each of their functions?

I found where to do it in displayimage.php, but didn't exactly know how to go about it.

Thanks.

[Widi]

we'll i haven't added text i replaced the buttons with text.
see if it's useable for u.
www.widi.tk

[olegario]

I wouldn't mind trying that.  Would you mind sending a snippet of the code?

Thanks.

[Widi]

find this lines in theme.php

// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="themes/hardwired/images/back.gif" width="21" height="15" align="absmiddle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="javascript:;" onClick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="themes/hardwired/images/info.gif" width="18" height="15" border="0" align="absmiddle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" title="{SLIDESHOW_TITLE}"><img src="themes/hardwired/images/slideshow.gif" width="21" height="15" border="0" align="absmiddle" alt="{SLIDESHOW_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" witdh="100%">
                        {PIC_POS}
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{ECARD_TGT}" title="{ECARD_TITLE}"><img src="themes/hardwired/images/ecard.gif" width="21" height="15" border="0" align="absmiddle" alt="{ECARD_TITLE}"></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="themes/hardwired/images/previmg.gif" width="18" height="15" border="0" align="absmiddle" alt="{PREV_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="themes/hardwired/images/nextimg.gif" width="18" height="15" border="0" align="absmiddle" alt="{NEXT_TITLE}" /></a>
                </td>
        </tr>

EOT;

and replace the whole lot with

// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
                <td align="center" valign="middle" class="navmenu" width="48" height="16">
                        <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="themes/hardwired/images/back.gif" width="16" height="16" align="absmiddle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48" height="16">
                        <a href="javascript:;" onClick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="themes/hardwired/images/info.gif" width="16" height="16" border="0" align="absmiddle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenutxt" width="96" height="16">
                        <a href="{SLIDESHOW_TGT}" title="{SLIDESHOW_TITLE}">Slideshow</a>
                </td>
                <td align="center" valign="middle" class="navmenu" witdh="100%" height="16">
                        {PIC_POS}
                </td>
                <td align="center" valign="middle" class="navmenu" width="48" height="16">
                        <a href="{ECARD_TGT}" title="{ECARD_TITLE}"><img src="themes/hardwired/images/ecard.gif" width="16" height="16" border="0" align="absmiddle" alt="{ECARD_TITLE}"></a>
                </td>
                <td align="center" valign="middle" class="navmenutxt" width="48" height="16">
                        <a href="{PREV_TGT}" title="{PREV_TITLE}">Back</a>
                </td>
                <td align="center" valign="middle" class="navmenutxt" width="48" height="16">
                        <a href="{NEXT_TGT}" title="{NEXT_TITLE}">Next</a>
                </td>
        </tr>

EOT;

that should do the trick. i didn't replace th e-card logo...

[Casper]

Hi Widi,

what you put works, but is not language compliant, ie, no matter what language is used, 'Slideshow' and 'Ecard' will be shown in English (orwhatever language used to do the mod)

A similar change, as below, would respect the language choice of the user;

Simply replace the image in the code with the '{SLIDESHOW_TITLE}' and '{ECARD_TITLE}', as here;

Code Select Expand

<td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" title="{SLIDESHOW_TITLE}">{SLIDESHOW_TITLE}</a>

and;

Code Select Expand

<td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{ECARD_TGT}" title="{ECARD_TITLE}">{ECARD_TITLE}></a>
                </td>

[Widi]

yeah that's true.... didn't thought of it.

however now i had to modify the language file english.php(or whatever language your using), cause all the variables like {NEXT_TITLE} etc... aren't one words, but are sentences. And then sentences are shown in the navigation bar. So i changed all of them to one word.

i tried to add entry's in the language file, but that didn't work