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

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Eye Candy for the Intermediate Image View - Part 1

Started by Gizmo, September 01, 2008, 05:16:04 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

Gizmo

September 01, 2008, 05:16:04 PM
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 Floral

1. 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
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';

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.

Code Select

<!--[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.

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

Code Select

                                        <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
Code Select
.floral span { behavior: url(themes/your_theme_name_here/iepngfix.htc); }

to
Code Select
.pin span { behavior: url(themes/your_theme_name_here/iepngfix.htc); }

and in the theme.php:

change
Code Select
<div class="photo floral">

to
Code Select
<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.

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 */
}


Enjoy and keep a look out for Part 2 of "Eye Candy for the Intermediate Image View"!

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

François Keller

#1
September 01, 2008, 06:09:04 PM
woaw, very good work Billy.
Will you add this feature to your ported themes ?
Thank's for your great job
Avez vous lu la DOC ? la FAQ ? et cherché sur le forum avant de poster ?
Did you read the DOC ? the FAQ ? and search the board before posting ?
Mon Blog

Pascal YAP

#2
September 01, 2008, 10:09:09 PM
PERFECT Billy Gizmo.
If we can find some times for a French translation, we'll translate your job in our french board  ;D
Are you OK ?

Joachim Müller

#3
September 02, 2008, 06:31:41 AM
In an ideal world, this could be pluginized for cpg1.5.x - adding wrapper hooks around the image should not be too hard. What do you think?

Gizmo

#4
September 02, 2008, 12:27:48 PM
Thanks Guys,

@Francois, I'm working on a theme that will lend itself quite nicely to some image graphics. I'll probably have it up in a couple of weeks after I spend more time looking through all the css styling. I don't want Joachim to have to keep uploading the revised one every other day!  ;D

@Pascal, Unfortunately my spoken French is a whole lot better than my written! I know it's a lot to translate but please go ahead. I should talk with a neighbor down the road, she speaks French, Spanish, German, etc, etc, etc. She's amazing.

@Joachim, this would be great. Is that the reason I'm having troubles trying to get a plugin to work because cpg1.4.x isn't capable of allowing this on the intermediate image?
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

Joachim Müller

#5
September 03, 2008, 09:02:46 AM
Afaik cpg1.4.x is missing the proper plugin hooks. That's why I proposed adding the needed hooks for cpg1.5.x.

Gene-2008

#6
November 01, 2009, 07:28:50 PM
Did you decide to make a plugin for this in 1.5?

I was thinking of doing a similar thing and found your thread.

Gene

Joachim Müller

#7
November 01, 2009, 11:50:29 PM
I don't think that a plugin for cpg1.5.x has been created so far, so if you want to take a shot at it, please go ahead. Not sure if the needed hooks have been added. If you have hook suggestions, please let use know as well.

Joachim Müller

#8
November 23, 2009, 01:45:57 PM
Print
Go Up Pages1
User actions