Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Custom Picture Frame around image  (Read 38024 times)

0 Members and 1 Guest are viewing this topic.

dereksurfs

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 29
Custom Picture Frame around image
« on: November 27, 2006, 08:05:44 pm »

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
« Last Edit: December 02, 2006, 06:58:31 am by GauGau »
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Custom Picture Frame around image
« Reply #1 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 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")
Logged

dereksurfs

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 29
Re: Custom Picture Frame around image
« Reply #2 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:
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
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: Custom Picture Frame around image
« Reply #3 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! :)
Logged
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

dereksurfs

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 29
Re: Custom Picture Frame around image
« Reply #4 on: December 01, 2006, 07:27:12 pm »

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]

// 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]
.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

Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: Custom Picture Frame around image
« Reply #5 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.

Gizmo
Logged
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

olti

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 68
    • Galeria Shqiptare - Albanian Gallery
Re: Custom Picture Frame around image
« Reply #6 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: http://my.opera.com/kf-elbasan/albums/

Any code how to do it?

Thanks.
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Custom Picture Frame around image
« Reply #7 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.
Logged

torgasm

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 23
Re: Custom Picture Frame around image
« Reply #8 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?

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

TheMagic

  • Coppermine newbie
  • Offline Offline
  • Posts: 1
Re: Custom Picture Frame around image
« Reply #9 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 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.
Logged
Pages: [1]   Go Up
 

Page created in 0.024 seconds with 20 queries.