Custom Picture Frame around image

[dereksurfs]

Hello,

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:
http://www.grafphoto.com/gallery/displayimage.php?album=13&pos=4

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

Thanks,

Derek

[Joachim Müller]

Edit your stylesheet (themes/yourtheme/style.css), find

Code Select Expand

.imageand edit the class accordingly (border-attributes). You might play with groove, ridge, inset, outset (see http://www.w3schools.com/css/pr_border-style.asp).

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

[dereksurfs]

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:
http://www.lightquestphoto.com/gallery/photo.php?photo=43&u=22,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.

Thanks,

- Derek

[Gizmo]

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 Expand

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!

[dereksurfs]

Gizmo,

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 Expand



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

// HTML template for intermediate image display
$template_display_media = <<<EOT
   <tr>
     <td align="center" class="display_media" nowrap="nowrap">
       <table cellspacing="0" cellpadding="0" class="imageborder">
         <tr>                                                                             
           <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>
</tr>
         <tr>
           <td background="./themes/derek/images/frame/{$frame_type}/LS_slice.gif"></td>         
           <td>                       
             {IMAGE}
           </td>
           <td background="./themes/derek/images/frame/{$frame_type}/RS_slice.gif"></td>               
         </tr>
         <tr>
           <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>
         </tr>
       </table>
     </td>
   </tr>


Here is the change to the style.css:

Code Select Expand


.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:
http://www.lightquestphoto.com/coppermine/displayimage.php?album=1&pos=28&theme=derek

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

[Gizmo]

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.

Gizmo

[olti]

I would like to add to the thumbnails of my gallerry frames like this gallery on Opera Community: http://my.opera.com/kf-elbasan/albums/

Any code how to do it?

Thanks.

[Joachim Müller]

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.

[torgasm]

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?

http://conradfan.com/gallery/displayimage.php?album=69&pos=0

[TheMagic]

If you're still having trouble with this, Torgasm, you might want to consider using the gallery in http://www.350.com. 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.