Thumbnail and Info Alignment

[guygar]

site: coppermine.guygar.com

I am currently modifying coppermine to suit my own needs.

On the thumbnail display issue, I would like the thumbnails to be centred (when the size is small) and the describing text aligned with rest of the content. (Presently the text moves up, when the thumbnail is small).

How do I rearrange the presentation please?

Thank you.

PS: I have searched this forum but I think I'm not using the right terms. Sorry about this because I am sure such a point has been asked before.

[Αndré]

I assume you want to center your thumbnails vertically. What is your setting for 'Use dimension (width or height or max aspect for thumbnail)'? Maybe we can add a box with a fixed height and center the thumbnails inside that box. But that only works if you have a fixed thumbnail height.

[guygar]

I am using 'Max Aspect' at the moment.

I have tried fixed values but that just turns out something not nice to look at.

I am sure tables are not used for this.

Is there any way I could tweak the CSS style somehow so all the thumbnails are aligned i.e. fixed space for thumbnail and comments below?

Thank you.

[Αndré]

I am using 'Max Aspect' at the moment.

That's something we can work with

The idea is the following. With your 'max aspect' setting your thumbnails have a defined maximum height (that's what I meant in my last post). Now we can add a box width that fixed height to each thumbnail and center your thumbnails inside that box. The result: the meta data (title, description, ...) will be displayed below that box, i.e. all meta data will printed at the same level.

I think this is what you asked for?

[guygar]

Yes I believe you got the picture correctly.

How could I go about doing so?

Thanks.

[guygar]

hi andre,

would appreciate your input on this topic please.

thank you.

[Αndré]

Please respect that this is no hotline and we're all volunteers. I'll help you asap.

[guygar]

Yes of course. I realize that and also very grateful for your priceless guidance.

Thanks as always.

[guygar]

greetings,

i was wondering if there would be further help on this issue?

best regards.

[Αndré]

Copy the following code to your theme's theme.php file:

Code Select Expand

$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center" height="{$CONFIG['thumb_width']}">
                                        <a href="{LINK_TGT}">{THUMB}</a>
                                </td>
                        </tr>
                        <tr>
                                <td align="center">
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->

<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

[guygar]

website: http://coppermine.guygar.com

hi Αndré,

thank you for your help.

i have added the code as you suggested but there is an alignment problem 

as can be seen from the attached image.

would it be possible to correct this by any chance?

many thanks.

[Αndré]

Try to replace the code I gave you with the following code:

Code Select Expand

$image_height = $CONFIG['thumb_width'] + 5;
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center" height="$image_height">
                                        <a href="{LINK_TGT}">{THUMB}</a>
                                </td>
                        </tr>
                        <tr>
                                <td align="center">
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->

<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

[guygar]

website: http://coppermine.guygar.com

thanks Andre,

but it still is not lined up 

it is a slight difference i know but would like it to line up correctly.

kind regards.

[Αndré]

Just further increase the bold number in the first line:

$image_height = $CONFIG['thumb_width'] + 5;

[guygar]

sooooooo perfect!

thank you for taking the time for your guidence 

it is working well!

best regards.