How to rearrange displayimage.php ?

[scheinarts]

I would like to know how to re-arrange the display image page. To show the image on the left, and the file information on the right. Just like on this site... http://www.bancoimagenes.com/banco.php?LangID=es&RollID=cd688&FrameID=cd688f003

I was looking at the displayimage.php file and it looks pretty complicated and there isnt any HTML code to re arrange the tables. Could someone point me in the right direction.

Thanks..

[François Keller]

look in the includes/theme.inc.php file and searche the

Code Select Expand

// HTML template for intermediate image display
Copy/paste the function in the theme.php file from your theme and modify the function

[Joachim Müller]

@scheinarts: the advice from Frantz is correct, however we recommend to take a look at themes/sample/theme.php instead and copy stuff you want to see changed from there into themes/yourtheme/theme.php

@Frantz: thanks for your advice, but please keep users from accessing include/themes.inc.php, as some might get the impression that it would be a bright move to edit said file (although it isn't). It's safer to tell them to look at themes/sample/theme.php, as changes to that file won't have any impact. Additionally, the condition (if/then) existing in themes.inc.php might be confuzing for users - that's why they should look at the sample theme instead.

[François Keller]

@GauGau

It's safer to tell them to look at themes/sample/theme.php

Ok, i understand that it's the better way to modify a theme function. I had not thought of it  :-\
It is noted for the next time 

[scheinarts]

Thanks Frantz for your help, however that only arranges the title and caption.

I am displaying Exif and IPTC information which is showing below the bar for ratings. That is the info I want to display in the same table as the image, and NOT below as it is by default. Any idea how to accomplish this.

Looking at the theme.inc.php file this would be the place to re-arrange... between lines 1973 and 2008... the function: function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)

I will now go take a look at what GauGau said about the themes/sample/theme.php and see if I can get done what I am trying to accomplish and will post back with the results.

Thanks for your help guys

[scheinarts]

Ok, so I copied into my theme.php the // HTML template for intermediate image display function. There is no place holder for the $pic_info that I am trying to move to the right of the image.

So the other thing I tried doing was to put $pic_info inside
starttable();
    echo $picture;
endtable();

in the function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)

so the code looks like this

starttable();
    echo $picture;
   echo $pic_info;
    endtable();


This gets the pic info inside the same table as the picture, BUT it still displays below the image.

I copied  this function from themes.inc.php into my theme.php ...

if (!function_exists('theme_html_picinfo')) {  //{THEMES}
function theme_html_picinfo(&$info)
{
    global $lang_picinfo;

    $html = '';

    $html .= "        <tr><td colspan=\"2\" class=\"tableh2_compact\"><b>{$lang_picinfo['title']}</b></td></tr>\n";
    $template = "        <tr><td class=\"tableb_compact\" valign=\"top\" >%s:</td><td class=\"tableb_compact\">%s</td></tr>\n";
    foreach ($info as $key => $value) $html .= sprintf($template, $key, $value);

    return $html;
}
}

And this is what controls the layout of the Info below the Image. Because of the <tr> tags, it seems to force it to display below the image, and if I remove the <tr> tags, it messes up the nice layout of the info. I am stuck here BIG TIME.

One solution would be to make a place holder like the {IMAGE} one, and simply put it in the // HTML template for intermediate image display.

How would I go about creating a placeholder named for example {PICINFO}?

The problem is I have no idea how to do this. Please help!!!

[Gizmo]

Here's how I did it. In function theme_html_picture(), create a new variable called

Code Select Expand

$CURRENT_PIC_DATA['info'] = html_picinfo(); // used for displaying pic info next to the intermediate image

and a new array parameter called

Code Select Expand

'{PICINFO}' => $CURRENT_PIC_DATA['info'],

The {PICINFO} tag goes in $template_display_media to output the pic info. You can change the layout by editing function theme_html_picinfo(&$info). By editing this info, you will also change the layout when you click on the "Display/hide file information" in the navigation bar so you may want to disable this.

Here are my code changes:

Code Select Expand


// Displays a picture
function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo;

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';
    $CURRENT_PIC_DATA['info'] = html_picinfo(); // used for displaying pic info next to the intermediate image

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ){ // The wierd comparision is because only picture_width is stored
      $condition = true;
    }elseif($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }elseif($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['pic_info'] != '') {
        $pic_info .= $CURRENT_PIC_DATA['pic_info'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight'], $CONFIG['picture_width']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        '{PICINFO}' => $CURRENT_PIC_DATA['info'],
        );

    return template_eval($template_display_media, $params);
}


Code Select Expand


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

                                        </td>
                                </tr>
                        </table>
                </td>

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

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>
                       
                       <table width="100%" cellspacing="2" cellpadding="0" class="tableb">
                                <tr>
                                        <td align="left">

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




<!-- BEGIN img_desc -->

<!-- BEGIN title -->

<!-- END title -->
<!-- BEGIN caption -->

<!-- END caption -->

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

EOT;


I'll leave it to you to change the layout to suit your needs. See the attached image for the final look.

[artoonie]

Just wondering, what does theme.inc.php do? I've been changing it around a lot actually, why is it bad to do so?

[François Keller]

why is it bad to do so?

if you modify the theme.inc.php file, you must do the same modifs after update from your coppermine version. So it's better to put your modifs in the theme.php file from your theme. (it's one reason to never modify the theme.inc.php file).

[artoonie]

if you modify the theme.inc.php file, you must do the same modifs after update from your coppermine version. So it's better to put your modifs in the theme.php file from your theme. (it's one reason to never modify the theme.inc.php file).

haha, alright thanks. guess i better restore my original theme.inc.php...=/

[scheinarts]

That did it. This is really awesome, I truly appreciate the help. Many thanks.

[Hassan]

HI !

I know its been long since someone has posted in this thread.
But I followed the instructions on this page. and now I have two file informations on this page.
I want to keep the file information next to image and want to remove the lower one.
Any suggections somebody, please.

[Joachim Müller]

As usual, we need a link to your gallery and we need to see your code . Zip your changed files and attach them to your posting.

[Hassan]

Sorry for late reply.
I was uploading the gallery on my my webhost and it took real long.

you may see the live gallery on http://lab.giantino.com/displayimage.php?album=1&pos=3
Admin user:hassan
Admin pwd:monster

My local version is displaying "File Information" on both on left and deault under the image, but stripped of picture discription.
While the hosted version my my website. It keeps on loading and loading.

Please suggest me some solution.

ok, here is the link to download my theme http://ekarachi.biz/downloads/water_drop2_13_mar_2008.rar

I'll contribute this theme once its ready. There are many people that need such modifications I belive.

[Joachim Müller]

I asked for a Zip, not a rar archive - not everybody has the tools to unpack rar archives (and don't post some lame suggestions that there are tools available for free that can do this). Also, I didn't ask for a link where I could download the archive - I asked you to attach it to your posting. You hijacked someone else's thread and you don't do as supporters suggest - do you think this makes it more likely that people are willing to look into your questions?

[Hassan]

Ok.
Here you go the zipped version.
Man you need some attitude adjustments. 

I asked for a Zip, not a rar archive - not everybody has the tools to unpack rar archives (and don't post some lame suggestions that there are tools available for free that can do this). Also, I didn't ask for a link where I could download the archive - I asked you to attach it to your posting. You hijacked someone else's thread and you don't do as supporters suggest - do you think this makes it more likely that people are willing to look into your questions?

[Joachim Müller]

Gizmo's instruction need to be updated:

Code Select Expand

function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $CONFIG;

    $width = $CONFIG['picture_table_width'];

    starttable();
    echo $nav_menu;
    endtable();

    starttable();
    echo $picture;
    endtable();
    if ($CONFIG['display_film_strip'] == 1) {
        echo $film_strip;
    }


    echo $votes;



    $picinfo = isset($_COOKIE['picinfo']) ? $_COOKIE['picinfo'] : ($CONFIG['display_pic_info'] ? 'block' : 'none');
    echo "<div id=\"picinfo\" style=\"display: $picinfo;\">\n";
    starttable();
    echo $pic_info;
    endtable();
    echo "</div>\n";

    echo "<div id=\"comments\">\n";
        echo $comments;
        echo "</div>\n";

}needs to be replaced with

Code Select Expand

function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $CONFIG;

    $width = $CONFIG['picture_table_width'];

    starttable();
    echo $nav_menu;
    endtable();

    starttable();
    echo $picture;
    endtable();
    if ($CONFIG['display_film_strip'] == 1) {
        echo $film_strip;
    }


    echo $votes;


    echo "<div id=\"comments\">\n";
        echo $comments;
        echo "</div>\n";

}and in

Code Select Expand

// 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="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="100%">
                        {PIC_POS}
                </td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
                </td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif"  border="0" align="middle" alt="{ECARD_TITLE}" /></a>
                </td>
<!-- END ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="{LOCATION}images/prev.gif"  border="0" align="middle" 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="{LOCATION}images/next.gif"  border="0" align="middle" alt="{NEXT_TITLE}" /></a>
                </td>
        </tr>

EOT;you need to remove

Code Select Expand

                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
                </td>I have modified your theme accordingly and attached it.

[Hassan]

You are the Life Saver Man

But, you removed the "Display/Hide file Information" Button.

I re-added it from "sample/theme.php" and found out that its not functioning anymore. I can live with this tweek. But if it does not require major code change. Can you make it functional back agian so that the good old "display hide file information" returns on my "Sweet Water" theme.

[Joachim Müller]

I deliberately removed the "i" button because it was not functional any longer. It should be pretty self-explanatory what you need to do to add it back. Wrap you custom pic_info section into the wrapper (div block) that used to be around the original pic info section and it should be expandable again.
What you're asking is beyond the scope of the original thread - you shouldn't have hijacked this one, but started a new one of your own. Let me see you try before I do your homework once more.