Eye Candy for the Intermediate Image View - Part 3

Gizmo · September 07, 2008, 07:50:30 PM

Hello Forumlings!

This is the 3rd installment of "Eye Candy for the Intermediate Image View". In Parts 1 & 2, I showed you how to add decorative transparent images to the intermediate image page based on the work of Nick La entitled CSS Decorative Gallery. Part 3 will deal with adding a tranparent frame around the intermediate image to give it a photograph book look based on Dave Jay's "Dynamically Resizing CSS Picture Frame on Any Background".

1. To the head of your template.html file (the section between the <head> and </head> tags) add the below code. Change the your_theme_name_here to your theme name. There are 2 of these to change.

Code Select


<!--[if lt IE 7]>
<link rel="stylesheet" href="themes/your_theme_name_here/ie-frame.css" type="text/css" />
<![endif]-->

<script src="themes/your_theme_name_here/framing.js"></script>

2. Open your style.css file and insert the following styles at the end.

Code Select


div.frame_scrapbook img{
	margin: 0;
	padding: 23px 23px 26px 23px;
}	
div.frame_scrapbook {
	position: relative;
	float: left;
	margin: 15px;
}
div.frame_scrapbook div.upper_left {
	position: absolute;
	background: transparent url('images/scrapbook/frame_upper_left.png') no-repeat 38px 38px;
	width: 100%;
	margin-left: -38px;
	margin-top: -38px;
	height: 100%;
	top: 0px;
	left: 0px;
}
div.frame_scrapbook div.upper_right {
	position: absolute;
	background: url('images/scrapbook/frame_upper_right.png') no-repeat right 38px;
	width: 41px;
	height: 100%;
	margin-top: -38px;
	top: 0px;
	right: 0px
}
div.frame_scrapbook div.lower_left {
	position: absolute;
	background: transparent url('images/scrapbook/frame_lower_left.png') no-repeat 38px 0px;
	width: 100%;
	margin-left: -38px;
	height: 42px;
	bottom: 0px;
	left: 0px;
}
	
div.frame_scrapbook div.lower_right {
	position: absolute;
	background: transparent url('images/scrapbook/frame_lower_right.png') no-repeat top right;
	height: 42px;
	width: 42px;
	bottom: 0px;
	right: 0px;
}

3. If your theme.php file doesn't already have the function theme_html_picture(), copy the below function into it. If it is already there then follow the instructions immediately after this code for the section to replace.

Code Select


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

    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['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

/* edit code to display transparent png corners */
			$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 .= "<div class=\"frame_scrapbook\"><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><div class=\"upper_left\"></div><div class=\"upper_right\"></div><div class=\"lower_left\"></div><div class=\"lower_right\"></div></div><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<div class=\"frame_scrapbook\"><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><div class=\"upper_left\"></div><div class=\"upper_right\"></div><div class=\"lower_left\"></div><div class=\"lower_right\"></div></div><br />\n";
        }
/* end edited corner code */

    } 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']),
        );

    return template_eval($template_display_media, $params);
}

The part of this code that's been changed is below. If you have used one of the WordPress theme's that I've ported and it uses the function compute_img_size_max($width, $height) or if you've modified this function in your theme.php file then you should replace the corresponding code with what's below.

Edited section:

Code Select


/* edit code to display transparent png corners */
			$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 .= "<div class=\"frame_scrapbook\"><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><div class=\"upper_left\"></div><div class=\"upper_right\"></div><div class=\"lower_left\"></div><div class=\"lower_right\"></div></div><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<div class=\"frame_scrapbook\"><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><div class=\"upper_left\"></div><div class=\"upper_right\"></div><div class=\"lower_left\"></div><div class=\"lower_right\"></div></div><br />\n";
        }
/* end edited corner code */

The reason for putting the styling in this function is because if it's placed in the $template_display_media then the intermediate image is not clickable and you won't be able to see the full-sized image.

4. Download the frame_files.zip package and unzip to your hard drive.
   a. Copy the scrapbook image folder to your themes image directory.
   b. Copy the "framing.js" file to your theme root directory.
   c. Copy the ie-frame.css to your theme root directory.

5. Upload your edited template.html, theme.php and style.css files to your theme directory.

6. When you view an intermediate image you should have the frame around the image.

7. This effect looks better with a colored or tiled background so you can try different colors or images to give the desired look. To add a color or image, edit the properties for the display_media style in your style.css file. I've added the snowflake image for you to try out the background image look. Copy this image into your themes image directory.

Code Select


.display_media {
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	background: #42AFDC;
	//background-image : url(images/snowflake.jpg);
}

I've thorughly checked this out on Firefox 3.x, Safari 3.x, IE7 and the new Google Chrome Browser. However IE6 has issues displaying the frames so the ie-frames.css and incldued header code will prevent IE6 from displaying the frames showing only the standard intermediate image view. I hope you enjoyed this edition of "Eye Candy for the Intermediate Image".

Cheers,

Gizmo

coppermine-gallery.com/forum

News:

Eye Candy for the Intermediate Image View - Part 3

Gizmo