No Support => Modifications/Add-Ons/Hacks => Mods: Visuals => Topic started by: dereksurfs on November 27, 2006, 08:05:44 pm

Title: Custom Picture Frame around image
Post by: dereksurfs on November 27, 2006, 08:05:44 pm

I am interested in creating a custom frame around images in the displayimage mode.  I have seen this done on a professional photographer's site powered by Coppermine here: (

I couldn't find any further info in this forum on it after doing a search.  Does anyone have experience creating these or know how it is done technically?  If you could point me in a direction with more info on it I would appreciate it?  I know in Gallery2 some of the themes offer Frames which I believe use CSS and some other code to generate them from image splices (top, left corner, right side, etc...).


Title: Re: Custom Picture Frame around image
Post by: Joachim Müller on November 27, 2006, 09:06:01 pm
Edit your stylesheet (themes/yourtheme/style.css), find
Code: [Select]
.imageand edit the class accordingly (border-attributes). You might play with groove, ridge, inset, outset (see

To find out what stylesheet class controls which part of the output, take a look at the Web Developer Toolbar or one of the similar tools (see "Tools recommended by the devs (")
Title: Re: Custom Picture Frame around image
Post by: dereksurfs on November 27, 2006, 11:12:13 pm
Thanks GauGau,

I have already added a black border to all images through editing the .image style. 

Now I would like to create something which looks like a real picture frame around the images (ie - beveled edges, drop shadow, matting, etc..).  I think this will entail splicing an image of a frame then applying it to images using CSS, tables or both.  Here is another example of this I used which was built-in to Exhibit Engine:,42

When examining the source code from the above mentioned websites they seems to be using CSS and tables.  I was reading on the W3 site about this.  Both background-image and background-repeat (x/y directional) seem like they could be used to create a picture frame from splices (ie - corners, edges, etc...).   

I will have to give this try.   I guess I was just wondering if anyone else had experimented with this and could possibly share some tips or pitfalls to avoid.


- Derek
Title: Re: Custom Picture Frame around image
Post by: Gizmo on November 28, 2006, 02:16:12 am
That's a beautiful site not to mention the photos. The hints I can offer is to look at the browser source code for the link you gave then compare it to the browser source code for your site. The function that creates this is function theme_html_picture() and you'll need to edit the code below this line
Code: [Select]
if ($mime_content['content']=='image') {.
It also looks like he (or she) has Create intermediate pictures set to "no" which will make the code look different from yours if you have it turned on. I've tinkered with this and it's not difficult so good luck.

If you succeed and wish to share your results, it would make a great addition to the forum! :)
Title: Re: Custom Picture Frame around image
Post by: dereksurfs on December 01, 2006, 07:27:12 pm

I figured it out with the help of Mark Graf, the photographer, who created that awesome Coppermine Mod above.  I am relatively new to Coppermine and have really contributed before.  So I am not quite sure how to offer this capability to the community. 

I do think it is something that could eventually be incorporated into CPG as a configurable option.  I figured out how to apply different custom frames after only setting one variable in theme.php.  This could also be done from a config parameter.

Anyway I will just include the code changes I made to the theme.php file and style.css for now. 
Code: [Select]

// First the framing variable
$frame_type = 'grey';

// HTML template for intermediate image display
$template_display_media = <<<EOT
     <td align="center" class="display_media" nowrap="nowrap">
       <table cellspacing="0" cellpadding="0" class="imageborder">
           <td><img src="./themes/derek/images/frame/{$frame_type}/UL_slice.gif" ></td>
           <td background="./themes/derek/images/frame/{$frame_type}/Top_slice.gif"></td>
           <td><img src="./themes/derek/images/frame/{$frame_type}/UR_slice.gif" ></td>
           <td background="./themes/derek/images/frame/{$frame_type}/LS_slice.gif"></td>         
           <td background="./themes/derek/images/frame/{$frame_type}/RS_slice.gif"></td>               
           <td><img src="./themes/derek/images/frame/{$frame_type}/LL_slice.gif"></td>
           <td background="./themes/derek/images/frame/{$frame_type}/Bottom_slice.gif"></td>
           <td><img src="./themes/derek/images/frame/{$frame_type}/LR_slice.gif"></td>

Here is the change to the style.css:
Code: [Select]
.imageborder {
        border: 0px solid #aaaaaa;
        background-color: #FFFFFF;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 2px;
        margin-left: 2px;

Now to change frames just place the frame slices in an image/frame directory under a unqiue sub directory name (ie - grey).
Then to swith frames just change the $frame_type variable to the name of new the frame's directory.

Here is just *one* sample of my first attempt at creating a frame in PS and then adding it to CPG:

The options are almost limitless with this structure in place.  Basically any frame you can think of and create in PS, you can slice up and place around your image here.  I have tested it both in IE and FF. 

I am still working on the right frame/background color mix so don't let that throw you off!  This was the first custom PS frame I have made.  There are PS actions out there for creating frames as well.  Any PS gurus out there who are good at creating frames???

We could potentially put together a frame pack if others want to contribute their own frames as well.  Gallery2 has a frame pack for certain themes.  Exhibit Engine offers frames as well. 

- Derek

Title: Re: Custom Picture Frame around image
Post by: Gizmo on December 01, 2006, 10:07:16 pm
Hi Derek.

WOW! This looks great and I really like the idea of having a frame pack. I was also really cool of Mark Graf to offer his support to you. Super job and thanks for sharing. I'll definitely be giving this a try.

Title: Re: Custom Picture Frame around image
Post by: olti on December 21, 2006, 12:35:16 am
I would like to add to the thumbnails of my gallerry frames like this gallery on Opera Community:

Any code how to do it?

Title: Re: Custom Picture Frame around image
Post by: Joachim Müller on December 21, 2006, 07:49:12 am
You can't do that using this mod, you'll have to edit core code and wrap the thumbnail into a more sophisticted frame construct. This is beyond the scope of this mod. Please start a new thread on the regular support board.
Title: Re: Custom Picture Frame around image
Post by: torgasm on September 05, 2010, 02:43:35 pm
That helped me w/ the border issue I was having, but now my intermediate images are really large. How do I fix that and have it shown smaller and then the bigger image when I click on it?
Title: Re: Custom Picture Frame around image
Post by: TheMagic on January 25, 2011, 05:07:21 pm
If you're still having trouble with this, Torgasm, you might want to consider using the gallery in ( It's a pretty simple upload images and add, but all the resizing and layout is taken care of by the program. I like it, anyway.