Is it possible to re-position file description?

[ringo]

I've modified the classic theme for a talent agency client and it's working really great... but they request that I move the description to the side of the image to avoid scrolling to read the info...
Could someone tell me if this can be done? I've searched through the forum and haven't seen it. Thanks much!

[Paver]

This is not so straight-forward (as a template variable modification would be), but it is possible with careful HTML/PHP code.  It may have been done before - I haven't searched yet.

Look at themes/yourtheme/theme.php, functions theme_display_image and theme_html_picinfo (copy those functions from the sample theme.php if you don't have them already).  Those two functions are called by Coppermine to display the file information box.  My guess is that you can modify the first function to move the entire box to the side of the image, using appropriate table cell tags.  The second function probably doesn't have to be modified, but it may be helpful.

If you get the modification working, please post here so others will learn from your work.

[Gizmo]

Poking around in the theme.php, I was able to come up with this. Checked the attached photos to see if this is what you want.

Copy from Sample theme.php

Code Select Expand


// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media" nowrap="nowrap">
                        <table cellspacing="2px" cellpadding="0px" class="imageborder">
                                <tr>
                                        <td align="center">
                                                {IMAGE}

                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2px" cellpadding="0px" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0px" cellspacing="0px" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb"><center>
                                                {CAPTION}
                                        </center></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;


and make these changes

Code Select Expand


// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media">
                        <table cellspacing="2px" cellpadding="0px" class="imageborder">
                                <tr>
                                        <td align="center">
                                        <br />
                                                {IMAGE}
                                        </td>
                                        <td align="center">
                                        <br />
                                                {CAPTION}
                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2px" cellpadding="0px" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0px" cellspacing="0px" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->

<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;


It's very important that you remove the nowrap="nowrap" style in the first <td> tag otherwise the text won't wrap in Firefox but will in IE. Hope this helps.

Gizmo

[Sami]

Once again gizmo , do the job
actualy it's better if you put width value to table and td to avoid that miss positioning (in short desc. pic go right)
hope this work:

Code Select Expand


// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media">
                        <table cellspacing="2px" cellpadding="0px" class="imageborder" width="100%">
                                <tr>
                                        <td align="left">
                                        <br />
                                                {IMAGE}
                                        </td>
                                        <td align="center">
                                        <br />
                                                {CAPTION}
                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2px" cellpadding="0px" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0px" cellspacing="0px" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->

<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;


[Paver]

Heh.  I guess I read "file information", not "file description".  Both of you are better readers than I.   

[ringo]

Awesome, you guys rock. I'm going to try this and I'll report back, thanks much!

[ringo]

This worked great, exactly what I needed. Thanks alot guys for the quick solve!