[Solved]: Resizing image on intermediate image page

[bbsd]

I'm not interested in creating intermediate images, and I'm also not interested in having the thumbnail link directly to the full-size pic because I regularly use several of the features on the intermediate image page.  However, most images are too large to fit into a regular-sized browser window, necessitating both horizontal and vertical scrolling, which is annoying.

So what I'd like is to resize the full-size image on the intermediate image page to a fixed width (in my case 680 px) making it look like an intermediate image. Any help would be appreciated!

[Hein Traag]

Resize the pictures locally on your dekstop/laptop to the prefered size before uploading them to the gallery using ftp. Resizing on the server is very resource consuming and not as good in quality.

[Stramm]

Set
Files and thumbnails settings -> Max width or height for uploaded pictures (pixels) -> the same as your intermediate image size
then
Files and thumbnails settings -> Auto resize images that are larger than max width or height -> Yes:Everyone

[bbsd]

But I don't want the full-size image resized, I only want it to look resized on the intermediate image page.

Maybe I'm doing a really poor job of explaining this...

Hmmm...

Sort of how this: http://forum.coppermine-gallery.net/index.php/topic,49377.0.html works to resize the thumbnails on the page without resizing the actual thumbnails. That's what I want, except I want it for the main image on the intermediate image page.

[Stramm]

The theme 'Blix' makes use of html resize. Download it and see how it's done in its theme.php

[bbsd]

Okay, I'm not very good (understatement of the year) at this stuff, but it looks to me like this is the pertinent bit of code:

Code Select Expand

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

//    $width = $CONFIG['picture_table_width'];
    $width = '455px';
   
    echo $nav_menu;

    echo $picture;
   
    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\t\t<h2>{$lang_picinfo['title']}</h2>\n";
    starttable();
    echo $pic_info;
    endtable();
    echo "</div>\n";

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

}


Especially the $width = '455px'; part.

However, inputting this into my own theme.php does absolutely nothing to the image size, which leads me to the inescapable fact that there's more to it than this. A search for "455" (since that's the size they're going for) leads to this bit of code at the very bottom:

Code Select Expand

function compute_img_size_blix($width, $height)
{
    global $CONFIG;
    $max = 455;
    $thumb_use=$CONFIG['thumb_use'];

    $ratio = $width / $max;

    if ($ratio > 1.0) {
        $image_size['reduced'] = true;
    }
    $ratio = max($ratio, 1.0);
    $image_size['width'] = ceil($width / $ratio);
    $image_size['height'] = ceil($height / $ratio);
    $image_size['whole'] = 'width="'.$image_size['width'].'" height="'.$image_size['height'].'"';
    $image_size['geom'] = 'width="'.$image_size['width'].'"';

    return $image_size;
}


Which I guess is what helps the image keep its aspect ratio, but at this point I'm hopelessly lost and can't even begin to contemplate recreating this for my own gallery.

I can't help but think that there should be some easier way to do this. But as you can probably tell, I'm very much a beginner when it comes to this stuff, so that might not be the case at all.

[Stramm]

from looking at it I'd say you'll need the functions theme_html_picture(), theme_display_image() and compute_img_size_blix() in your theme.php

[bbsd]

Thanks for all your help, I think I got it to work (unless I find some bugs that are not readily apparent). For anyone else interested in this, here's the code I added to my theme.php:

Code Select Expand

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

//    $width = $CONFIG['picture_table_width'];
    $width = '680px';

    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";

}

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 = '';

    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($CURRENT_PIC_DATA['pwidth'] > $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['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_blix($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']);

    $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 . "\" {$image_size['geom']} 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="" ',
                                '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']),
        );

    return template_eval($template_display_media, $params);
}


function compute_img_size_blix($width, $height)
{
    global $CONFIG;
    $max = 680;
    $thumb_use=$CONFIG['thumb_use'];

    $ratio = $width / $max;

    if ($ratio > 1.0) {
        $image_size['reduced'] = true;
    }
    $ratio = max($ratio, 1.0);
    $image_size['width'] = ceil($width / $ratio);
    $image_size['height'] = ceil($height / $ratio);
    $image_size['whole'] = 'width="'.$image_size['width'].'" height="'.$image_size['height'].'"';
    $image_size['geom'] = 'width="'.$image_size['width'].'"';

    return $image_size;
}

Do a search/replace of "680", unless that's the size you want to resize to as well.