Eye Candy for the Intermediate Image View - Part 2 Eye Candy for the Intermediate Image View - Part 2
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Eye Candy for the Intermediate Image View - Part 2

Started by Gizmo, September 03, 2008, 03:59:26 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

Gizmo

September 03, 2008, 03:59:26 AM
Hello Forumlings!

Welcome back to the 2nd installment of "Eye Candy for the Intermediate Image View". In Part 1 I showed you how to add a simple static transparent png image to the intermediate image as outlined by Nick La entitled CSS Decorative Gallery. In Part 2 I'm going to detail how to add a transparent paper clip with "title" note to the top of the image. In the event that the image doesn't have a title, the standard image will appear. As I stated in Part 1, I'm not going to post all the details of how this works as Nick has done a great job of that in his post so please give that a read if you're interested. OK, let's get with it.

1. To make the transparent PNG image work on IE6, download this wonderful iepngfix.htc hack. Unzip it to your hard drive. I used v1.0 for my examples.

2. Using a text editor, open iepngfix.htc and change where the script looks for the blank.gif file.

change
Code Select
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.gif';

to
Code Select
if (typeof blankImg == 'undefined') var blankImg = 'themes/your_theme_name_here/images/blank.gif';

Change the your_theme_name_here to your theme name in the above code change.

3. 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]>
<style type="text/css">
.gallery span { behavior: url(themes/your_theme_name_here/iepngfix.htc); cursor: pointer; }
</style>
<![endif]-->

<style type="text/css">
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;
background: none;
}
.gallery li:hover img {
border-color: #5EA308;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 5px;
}
.gallery em {
background: #fff;
color: #000;
font-style: normal;
padding: 2px 8px 0 22px;
display: block;
position: absolute;
top: 20px;
left: 5px;
border: 1px solid #999;
}
.gallery a {
text-decoration: none;
}
.gallery span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: 7px;
left: 9px;
background: url(themes/your_theme_name_here/images/paper-clip-mini.png) no-repeat;
z-index: 3;
}
</style>


4. Open your theme.php file and add the below code for $template_display_media and if it exists then make the approriate changes. Basically what we're doing is removing the {TITLE} token as we'll be displaying the title under the paper clip graphic.

Code Select

// 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>
</tr>
<tr>
<td>
<table width="100%" cellspacing="2" cellpadding="0" class="tableb">
<tr>
<td align="center">
{ADMIN_MENU}
</td>
</tr>
</table>

<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb" width="100%">
<!-- BEGIN title -->

<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb"><center>
{CAPTION}
                                        </center></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;


5. In your theme.php file add the below code for function theme_html_picture() and if it exists then make the approriate changes which are detailed below.

Code Select

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_max($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;

            if ($CURRENT_PIC_DATA['title'] != '') {
$pic_html .= "<ul class=\"gallery\"><li><span></span><em>" . $CURRENT_PIC_DATA['title'] . "</em><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /></li></ul><br />";
} else {
$pic_html .= "<ul class=\"gallery\"><li><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /></li></ul><br />";
}
            $pic_html .= "</a>\n";
        } else {
            if ($CURRENT_PIC_DATA['title'] != '') {
$pic_html .= "<ul class=\"gallery\"><li><span></span><em>".$CURRENT_PIC_DATA['title']."</em><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></li></ul><br />\n";
} else {
$pic_html = "<ul class=\"gallery\"><li><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></li></ul><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']),
'{NOTITLE}' => notitle(),
        );

    return template_eval($template_display_media, $params);
}


What we're doing here is adding css styling based on whether the image has a title or not with this code. If you've edited this function then this is what you need to add or adapt to.

Code Select

            if ($CURRENT_PIC_DATA['title'] != '') {
$pic_html .= "<ul class=\"gallery\"><li><span></span><em>" . $CURRENT_PIC_DATA['title'] . "</em><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /></li></ul><br />";
} else {
$pic_html .= "<ul class=\"gallery\"><li><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /></li></ul><br />";
}
            $pic_html .= "</a>\n";
        } else {
            if ($CURRENT_PIC_DATA['title'] != '') {
$pic_html .= "<ul class=\"gallery\"><li><span></span><em>".$CURRENT_PIC_DATA['title']."</em><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></li></ul><br />\n";
} else {
$pic_html = "<ul class=\"gallery\"><li><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></li></ul><br />\n";
}
        }



6. Download the attached paper-clip-mini.png file and upload it to your themes images directory.

7. Upload the edited iepngfix.htc file to your theme directory and the blank.gif file to your images directory.

8. Upload your edited template.html and theme.php file to your theme directory.

9. When you view an intermediate image with a title you should see the paper clip with the title written underneath it on paper in the upper left. If the image doesn't have a title then you'll see the image in the standard view.

10. This effect looks better with a colored or tiled background so you can try different colors or images to give the desired look. Check out Part 1 if you like the corkboard background. To add a color or image, edit the properties for the display_media style in your style.css file.

Code Select

.display_media {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
// background: url(images/cork-bg.gif); /* to use a background image */
background-color: #73D000; /* to use a background color */
}


I've thorughly checked this out on Firefox 3.x, Safari 3.x, IE 6 &7 and the new Google Chrome Browser just released today. :D  I hope you enjoyed this addition of "Eye Candy for the Intermediate Image" and keep a look out for the next addition where I show you how to add transparent photographic corners to your images.

Cheers,

Gizmo
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Fabricio Ferrero

#1
September 16, 2008, 06:10:22 AM
Hi,

It's possible to 'watermark' just some images? I need a '"SOLD" sign in some of them, but obviously not all of the pictures. And a more difficult issue... Would be posible 'flag' or 'unflag' the images with a click in order to avoid edit the code for each image?

Difficult questions, but would be so great to have this done.

Thank Gizmo for this amazing hack!

Cheers,
Read Docs and Search the Forum before posting. - Soporte en español
--*--
Fabricio Ferrero's Website

Catching up! :)

Gizmo

#2
September 16, 2008, 01:02:26 PM
Thanks Fabri. I'm sure it can but unfortunately I don't have the skill set to create the database piece to track which images are marked and then you'd need an admin interface to mark the images. Maybe CPG1.5 will have the necessary hooks to make this easier but I bet the Photo of the Day/Week plugin has all the parts to learn from.  ;)
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Hein Traag

#3
September 16, 2008, 04:16:10 PM
Thanks Gizmo. Looks like a nice add-on to my own cpg.
Print
Go Up Pages1
User actions