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
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.gif';to
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.
<!--[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.
// 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.
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&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.
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.
.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.
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
Author
Topic: Eye Candy for the Intermediate Image View - Part 2 (Read 5243 times)