drop shadows under images

[nickfzx]

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

[Joachim Müller]

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

[nickfzx]

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 Expand

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

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

and replace with this code:

Code Select Expand

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

[nickfzx]

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.

[Nibbler]

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

Code Select Expand

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

[nickfzx]

cool thanks Nibbler, that fixes the IE issue.

Awesome

[nickfzx]

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.

[Nibbler]

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.

[nickfzx]

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.

[Muurvaren]

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?

[Muurvaren]

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

[Joachim Müller]

That's because the thread starter reported it as solved:

cool thanks Nibbler, that fixes the IE issue.

[nickfzx]

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.

[Muurvaren]

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)

[cip6791]

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.

[cip6791]

got it to work. nvm

[Joachim Müller]

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.

[Izzie Stevens]

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>

[Joachim Müller]

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.