Hello Forumlings! After porting many WordPress themes to Coppermine I thought I'd take a break and work on some other aspects of theming. Since CPGs main reason for being is to display images or photographs I thought about what can be done to enhance these images. With a simple Google search it certainly didn't take long to find plenty of "eye candy" that could be applied to CPGs intermediate image view. This is the first of a multipost on "eye candy" for Coppermine.
Before I go any further I have to say that all these scripts and ideas come from other people who have so kindly posted their ideas and hard work on the internet for all to use. I'll reference each and every one of these kind souls because I believe it's necessary to credit people for their work so please visit their sites and thank them if you use their work in your gallery.
Almost all these new ideas use transparent pngs. According to
Browser Statistics, as of August 2008 there are still a large number (25%) of internet viewers using Internet Explorer 6. IE6 has some serious flaws with transparent pngs so many of these ideas require hacks or special code to make them work correctly in IE6. Not to worry, most of these issues are easy to handle and add to your theme files. Most require a bit of javascript so a simple javascript file will need to be downloaded then uploaded to your theme directory. I've spent many hours testing (and loaded IE6 into a Windows virtual machine on my Mac... oh the horror!) these making sure they work correctly on Firefox 3.x, Safari 3.x, IE7.x and IE6.x so I hope you find them interesting enough to use in your galleries. If you find some cool ideas that you'd like to have ported to Coppermine please start a new post but maybe you can try to get it to work first and post your new discoveries!
The first eye candy will deal with a couple of ideas by Nick La entitled
CSS Decorative Gallery. I'll detail 2 ideas on this post since they are very similar and start a new post on something a bit more complicated. These are the corner floral design and the stick pin. 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.
Corner Floral1. To make the transparent PNG image work on IE6, download this wonderful
iepngfix.htc hack. Unzip it to your hard drive.
2. Using a text editor, open iepngfix.htc and change where the script looks for the blank.gif file. Change the
your_theme_name_here to your theme name.
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';
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 6 of these to change.
<!--[if lt IE 7]>
<style type="text/css">
.floral span { behavior: url(themes/your_theme_name_here/iepngfix.htc); }
</style>
<![endif]-->
<style type="text/css">
.photo {
margin: 10px;
position: relative;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo a {
text-decoration: none;
}
.floral span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(themes/your_theme_name_here/images/floral-corner.png) no-repeat;
}
.pin span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 48%;
background: url(themes/your_theme_name_here/images/pin.png) no-repeat;
}
.tape span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 35%;
background: url(themes/your_theme_name_here/images/tape.png) no-repeat;
}
.tape2 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 35%;
background: url(themes/your_theme_name_here/images/tape2.png) no-repeat;
}
.paper-clip span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(themes/your_theme_name_here/images/paper-clip.png) no-repeat;
}
</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.
// 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">
<div class="photo floral">
<span></span>{IMAGE}
</div>
</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 -->
<tr>
<td class="tableb"><center><b>
{TITLE}
</b></center></td>
</tr>
<!-- END title -->
<!-- BEGIN caption -->
<tr>
<td class="tableb"><center>
{CAPTION}
</center></td>
</tr>
<!-- END caption -->
</table>
<!-- END img_desc -->
</td>
</tr>
EOT;
Pay attention to this section as we'll need to make changes here depending on what eye candy you want to apply.
<td align="center">
<div class="photo floral">
<span></span>{IMAGE}
</div>
</td>
5. Download the attached Eye_Candy.zip file containing the various eye candy png files. Unzip then upload to your themes images directory.
6. Upload the edited iepngfix.htc file to your theme directory and the blank.gif file to your images directory.
7. Upload your edited template.html and theme.php file to your theme directory.
8. When you view an intermediate image you show now see the floral image in the upper left corner.
9. To change the eye candy, you need to edit 2 lines, one in the template.html file and one in the theme.php file. So to change to the pin:
change this line in the template.html file
.floral span { behavior: url(themes/your_theme_name_here/iepngfix.htc); }
to
.pin span { behavior: url(themes/your_theme_name_here/iepngfix.htc); }
and in the theme.php:
change
<div class="photo floral">
to
<div class="photo pin">
I have included 5 different eye candies, pin, floral, tape, tape2 & paper-clip. These are the names that need to be changed in the 2 places above. You can add your own (think of a transparent copyright logo or gallery name!) and to fix the alignment change the
top and
left properties.
10. These eye candies look best with a colored or tiled background so you can try different colors or images to give the desired look. In the attached Eye_Candy image folder is a cork board background that you can use if you like the pin or tape look. You can also remove any of the css styles that you don't want to use from the above template.html style section. To add a color or image, edit your style.css file for the display_media style.
.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 */
}
Enjoy and keep a look out for Part 2 of "Eye Candy for the Intermediate Image View"!
Cheers,
Gizmo