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: drop shadows under images  (Read 11632 times)

0 Members and 1 Guest are viewing this topic.

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
drop shadows under images
« on: March 06, 2007, 03:06:37 am »

have searched but only topic on this was in No Support.

I want to have nice drop shadows under the intermediate and thumbnail images.

I know this can be done using CSS.

What I am asking is, has anyone done it in Coppermine?  Perhaps there is a theme out there already?

recourse:
http://alistapart.com/articles/cssdropshadows
« Last Edit: March 07, 2007, 07:23:24 am by GauGau »
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: drop shadows under images
« Reply #1 on: March 06, 2007, 07:28:41 am »

Sure, this can be accomplished easily, just apply the CSS mentioned in the ALA article to your stylesheet.
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #2 on: March 06, 2007, 10:24:34 pm »

ok so figured it out thanks for the tip GauGau.

I'll make it easy to read so others can do it too :)

so download these two files and stick them in your images folder:  (not sure if these images are copyright or not they are just the samples offered by the alistapart.com tutorial)
http://alistapart.com/d/cssdropshadows/img/shadow.gif
http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png

If you want the dropshadow to look good in ie 6 or below on backgrounds other than white then read this article:
http://alistapart.com/articles/cssdropshadows


Now open the style.css file of your current theme and insert this css:
Code: [Select]
.img-shadow {
  float:left;
  background: url(images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  }

Now you will need to copy the "HTML template for thumbnails display" section across from themes.inc.php (if your current theme doesn't have it already) to your theme.php file.

once there find this code:
Code: [Select]
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>

and replace with this code:
Code: [Select]
                                <td align="center">
                                        <a href="{LINK_TGT}"><div class="img-shadow">{THUMB}</div><br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>

now your done...this is only for the thumbnail pages...but go through the same process for other sections.

there is an example image attached that shows how this looks in the classic theme.
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #3 on: March 06, 2007, 10:47:23 pm »

found a bug with the above method when using IE 7  (probably for all IE versions)

the thumbnail images with drop-shadows are no longer links, I'll work on fixing this and post when I figure it out.


No bugs found in FF and Opera yet.
Logged

Nibbler

  • Guest
Re: drop shadows under images
« Reply #4 on: March 06, 2007, 10:55:30 pm »

Thanks for posting the code. You might like to reorganise it like this

Code: [Select]
<div class="img-shadow"><a href="{LINK_TGT}">{THUMB}</a></div>
That way you are making just the image a link not the entire div.
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #5 on: March 06, 2007, 11:04:16 pm »

cool thanks Nibbler, that fixes the IE issue.

Awesome :)
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #6 on: March 06, 2007, 11:11:21 pm »

there is another IE only issue which is very noticeable when the zooming in IE (IE 7 again, not sure about the zooming in previous releases)

when you enlarge a page the images stay the same size but the div container (which houses the drop shadow) grows and shrinks.  So you get a shadow out in the middle of nowhere if the page is zoomed.

This doesn't happen in FF or Opera (what a surprise)

Any ideas?   I will post if I find a solution to this one too.
Logged

Nibbler

  • Guest
Re: drop shadows under images
« Reply #7 on: March 06, 2007, 11:45:09 pm »

I don't have any access to IE7, maybe it doesn't do image resizing when you zoom. Little reason to zoom in on a thumbnail anyway.
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #8 on: March 07, 2007, 12:18:01 am »

yep none of the browsers do resizing of images...it's just IE7 (and no other browser) is doing resizing of the container <div> which breaks the look when zoomed.

There is of course no reason to resize a thumbnail, but it might be that there is a mix of text and thumbnails on the page and the user resizes the page to see the text larger and then the thumbnail drop-shadow breaks.

Maybe I am paranoid about this because I use the zoom option a lot...sure the average user probably never uses it at all.
I'll leave it for now.

There is another technique to doing drop shadows which would solve this problem and is actually superior in the way it looks...you have many, many drop shadow background images. Each one is one pixel larger than the other and then one pixel wider...so there is a whole library of different sized drop shadows of different dimensions.  Then when the thumbnail is called it's dimensions determine which background drop shadow to use from the library.  With this method you can do complete drop shadows all round the image...not just the bottom and right hand side.

The only thing I am not sure on with this method is how I would get hold of the dimensions of the thumbnail when the thumbnail is called.
Logged

Muurvaren

  • Coppermine novice
  • *
  • Offline Offline
  • Gender: Male
  • Posts: 37
    • Muurvaren, digitale fotografie
Re: drop shadows under images
« Reply #9 on: April 06, 2007, 04:13:30 pm »

I'll make it easy to read so others can do it too :)

Not easy enough though..
I downloaded the two files and placed them in \images

Edit the CSS-file (changed the background from #fff to #454444)

Copied the code from themes.inc.php to the theme.php (and added the suggestion of Nibbler)

It looks like this:
http://www.muurvaren.nl/   (Random files at the bottom)

As you can see, there is no shadow...

Any suggestions to make this work?

Logged

Muurvaren

  • Coppermine novice
  • *
  • Offline Offline
  • Gender: Male
  • Posts: 37
    • Muurvaren, digitale fotografie
Re: drop shadows under images
« Reply #10 on: April 06, 2007, 04:18:34 pm »

Not easy enough though..
I downloaded the two files and placed them in \images

Edit the CSS-file (changed the background from #fff to #454444)

Copied the code from themes.inc.php to the theme.php (and added the suggestion of Nibbler)

It looks like this:
http://www.muurvaren.nl/   (Random files at the bottom)

As you can see, there is no shadow...

Any suggestions to make this work?

Noticed that this thread is marked as solved...
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: drop shadows under images
« Reply #11 on: April 06, 2007, 10:37:24 pm »

That's because the thread starter reported it as solved:
cool thanks Nibbler, that fixes the IE issue.
Logged

nickfzx

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 285
Re: drop shadows under images
« Reply #12 on: April 06, 2007, 11:02:30 pm »

umm not sure what to say here...

have you uploaded the two shadow files and pointed to their location.

It is pretty simple stuff...just read through what I have done and try and understand it and then whatever you are doing wrong whould become clear.
Logged

Muurvaren

  • Coppermine novice
  • *
  • Offline Offline
  • Gender: Male
  • Posts: 37
    • Muurvaren, digitale fotografie
Re: drop shadows under images
« Reply #13 on: April 07, 2007, 11:10:19 am »

umm not sure what to say here...

have you uploaded the two shadow files and pointed to their location.

It is pretty simple stuff...just read through what I have done and try and understand it and then whatever you are doing wrong whould become clear.

It works now! Thanks for your reply.

It was quit simple, I needed to put a slash before 'image'  url(/images/shadowAlpha.png)

Logged

cip6791

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 22
Re: drop shadows under images
« Reply #14 on: November 01, 2008, 11:53:18 am »

i can t get this to work. i only got it to work for the images in the film strip. I changed the class="images" to class="img-shadow" ... do i have to do anything else?

i need your help a little. I really want this to work.
Logged

cip6791

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 22
Re: drop shadows under images
« Reply #15 on: November 01, 2008, 12:37:01 pm »

got it to work. nvm
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: drop shadows under images
« Reply #16 on: November 02, 2008, 02:28:07 pm »

From the board rules:
Resolve your threads
If you have found an answer to your question, resolve your thread. Don't just post "I have found the answer", but tell others what you actually did to solve your issues. Posting a link to the page where you found the answer might help. Describing what you did might help as well.
Logged

Izzie Stevens

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Female
  • Posts: 196
  • www.seriouslygreylovers.com
    • Seriously Grey Lovers
Re: drop shadows under images
« Reply #17 on: March 08, 2009, 07:06:34 pm »

Sorry I haven't understand this:
Now you will need to copy the "HTML template for thumbnails display" section across from themes.inc.php (if your current theme doesn't have it already) to your theme.php file.

once there find this code:
Code:

                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>


and replace with this code:
Code:

                                <td align="center">
                                        <a href="{LINK_TGT}"><div class="img-shadow">{THUMB}</div><br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: drop shadows under images
« Reply #18 on: March 09, 2009, 07:54:56 am »

nickfzx's instructions are indeed a bit misleading. However, it's not a bright idea to hijack someone else's thread that is marked as "solved". Do as suggested per board rules and start a new thread of your own that contains the needed elements (a link to your gallery, a zip of your custom theme folder as attachment, a reference to this thread, a detailed explanation what you want to see accomplished.
Locking.
Logged
Pages: [1]   Go Up
 

Page created in 0.022 seconds with 19 queries.