'Shadows' behind thumbs in theme.. help!

[turtleboy]

I've been trying to work on something that will make it appear as if the thumbnails have shadows behing them using html tables:
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg22.photobucket.com%2Falbums%2Fv67%2Frandomvandal%2Fgoodshad.jpg&hash=ddbc5a4644810c2227e9a3afbe3f548a997e6f74)

But it only looks right if the thumbs have been scaled down from a specific resolution (4:3 ratio, like 1024x768, 800x600 etc.):
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg22.photobucket.com%2Falbums%2Fv67%2Frandomvandal%2Fbadshad.jpg&hash=8eba709c7c4346279252938ab65ffe29a03f0b70)

So I figured I had to use something like getimagesize() and do away with the hardcoded dimensions for the tables.. but I have no clue how to implement it. I was wondering if anyone might have any suggestions? Sorry for my php noob-ness..

Here is the html I wrote from my theme.php, I know it's sloppy, but I haven't had a chance to clean it all up yet.
http://www.skylinedesigns.net/foto/foto-gallery/index.php?cat=1

Code Select Expand

<!-- BEGIN thumb_cell -->
<td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">


<table cellspacing="0px" cellpadding="0px" bgcolor="" style="border-collapse:seperate; table-layout:auto;" width="116px">
<tbody>
<tr>
<td width="8px" align="center" valign="bottom">
</td>
<th colspan="2" style="height:80px; margin-bottom:0px; padding-bottom:0px; width:100px; display:inline;">

                        <a href="{LINK_TGT}">{THUMB}</a>

</th>
<td align="center" valign="top">

<table border="0px" cellspacing="0px" cellpadding="0px" bgcolor="" style="">
<tr>
<td height="8px" width="8px" style="background-image: url(themes/silver_fuel/images/thmb_right_up_1.png); background-repeat: no-repeat; padding: 0px 0px 0px 0px; margin:0px;"></td></tr>
<tr>
<td width="8px" valign="bottom" style="background-image: url(themes/silver_fuel/images/thmb_right_mid_1.png); background-repeat: repeat-y; height:72px; padding: 0px 0px 0px 0px; margin:0px;"></td>
</tr></table>

</td>
</tr>
<tr>
<td style="height:7px; width:8px; padding: 0px 0px 0px 0px; margin:0px;" align="center">
</td>
<td style="background-image: url(themes/silver_fuel/images/thmb_bottom_left_1.png); background-repeat: no-repeat; height:7px; width:8px; padding: 0px 0px 0px 0px; margin:0px; position: relative;
bottom: 3px"></td>

<td style="background-image: url(themes/silver_fuel/images/thmb_bottom_mid_1.png); background-repeat: repeat-x; height:7px; width:92px; padding: 0px 0px 0px 0px; margin:0px; position: relative;
bottom: 3px"></td>

<td style="background-image: url(themes/silver_fuel/images/thmb_bottom_right_1.png); background-repeat: no-repeat; height:7px; width:8px; padding: 0px 0px 0px 0px; margin:0px; position: relative;
bottom: 3px"></td>
</tr>
</tbody>
</table>

{CAPTION}
    {ADMIN_MENU}

</td>
<!-- END thumb_cell -->

[DaMysterious]

I've been trying to work on something that will make it appear as if the thumbnails have shadows behing them using html tables:

Some help could be found here, if this is where you looking for. Even you can use the described solutions there in style.css for the '.image' tag.

[Joachim Müller]

There's a drawback to your solution: the Microsoft filter Gary Williams is refering to makes my browser prompt me for ActiveX control to be exectuted (of course I hit "no") - anyone concerned about security should/will do so and not allow ActiveX controls on unknown sites. Since it's a Microsoft filter it won't be displayed at all in other browsers, so Opera and Firefox/Mozilla won't display the shadow at all. The solution only works in M$ IE, with a nag message for users who have sensible security settings enabled.

Although webdesigners all over the planet repeat the mantra "don't use tables, don't use tables" I'd still go for a table to hold the shadow in this case, although things are a bit complicated, as you have to go for a nested table.

To illustrate what table structure I'd suggest take a look at the rough sketch:
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fgaugau.de%2Fpartner%2Fcpg%2Fshadow%2Fshadow_effect.jpg&hash=b3484feab40ba1f3d537dee29796a6704b3beaa1)

• the red line are the cell borders (that later won't we displayed)
  
• of course you'll want to display the shadow with a nice gradient fill; for abstraction I'm showing the shadow in black and grey
  
• cell A holds the thumbnail
  
• cell B has fixed width and height and holds the upper right shadow
  
• cell C has fixed width and variable height and holds the right center part of the shadow as background image
  
• cell D has fixed width and height and holds the lower left part of the shadow
  
• cell E has fixed height and variable width and holds the lower center part of the shadow as background image
  
• cell F has fixed width and height and holds the lower right shadow

What I've come up with is a table-layout that works (at least for me) in all browsers that understand css1 (Netscape4 and some other *very old* browsers still won't display the shadow, but they won't show garbled-up layout either).
Here's the HTML code:

Code Select Expand

<!-- get the width and height attributes from php:
100 equals the width/height of your thumbnail
8 equals the width/height of your shadow
108 is the width/height of your thumbnail plus the width/height of your shadow
92 is the width/height of your thumbnail minus the width/height of your shadow
-->
  <table border="0" cellspacing="0" cellpadding="0" width="108">
    <tr>
      <td width="100" align="right" valign="top"><img src="shadow_a.jpg" width="100" height="100" border="0" alt="" /></td>
      <td width="8" align="left" valign="bottom">
        <table border="0" cellspacing="0" cellpadding="0" width="8">
          <tr>
            <td width="8" align="left" valign="top" style="background-image:url(shadow_b.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
          </tr>
          <tr>
            <td width="8" align="left" valign="middle" style="background-image:url(shadow_c.gif);background-repeat:repeat-y"><img src="shadow_blind.gif" width="8" height="92" border="0" alt="" /></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellspacing="0" cellpadding="0" width="92">
          <tr>
            <td align="right" valign="top" width="8" style="background-image:url(shadow_d.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
            <td align="left" valign="top" width="92" style="background-image:url(shadow_e.gif);background-repeat:repeat-x"><img src="shadow_blind.gif" width="92" height="8" border="0" alt="" /></td>
          </tr>
        </table>
      </td>
      <td width="8" align="left" valign="top" style="background-image:url(shadow_f.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
    </tr>
  </table>A working example can be viewed here

Now let's get this whole enchilada into php: we'll have to introduce four vars that hold the dimensions of the thumbnail and the shadow and replace the fixed dimensions in HTML by the php vars; this is how the code looks like:

Code Select Expand

<?php
$shadow_width = 8;
$shadow_height = 8;
$thumbnail_width = 100;
$thumbnail_height = 100;
?>
  <table border="0" cellspacing="0" cellpadding="0" width="<?php print $thumbnail_width + $shadow_width; ?>">
    <tr>
      <td width="<?php print $thumbnail_width; ?>" align="right" valign="top"><img src="shadow_a.jpg" width="<?php print $thumbnail_width; ?>" height="<?php print $thumbnail_height; ?>" border="0" alt="" /></td>
      <td width="<?php print $shadow_width; ?>" align="left" valign="bottom">
        <table border="0" cellspacing="0" cellpadding="0" width="<?php print $shadow_width; ?>">
          <tr>
            <td width="<?php print $shadow_width; ?>" align="left" valign="top" style="background-image:url(shadow_b.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
          </tr>
          <tr>
            <td width="<?php print $shadow_width; ?>" align="left" valign="middle" style="background-image:url(shadow_c.gif);background-repeat:repeat-y"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $thumbnail_height - $shadow_height; ?>" border="0" alt="" /></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellspacing="0" cellpadding="0" width="<?php print $thumbnail_width - $shadow_width; ?>">
          <tr>
            <td align="right" valign="top" width="<?php print $shadow_width; ?>" style="background-image:url(shadow_d.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
            <td align="left" valign="top" width="<?php print $thumbnail_width - $shadow_width; ?>" style="background-image:url(shadow_e.gif);background-repeat:repeat-x"><img src="shadow_blind.gif" width="<?php print $thumbnail_width - $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
          </tr>
        </table>
      </td>
      <td width="<?php print $shadow_width; ?>" align="left" valign="top" style="background-image:url(shadow_f.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
    </tr>
  </table>See a working example here. Please note that this is no ready-to-copy-and-paste code you can simply add into coppermine: I just posted this to proof the concept - maybe some of you coppermine starters wants to take a shot and insert it into the coppermine code - you're welcome to post your solution in this thread.

Cheers

GauGau

P.S. attached is the whole enchilada from the example pages I was refering to (HTML code and PHP code, plus image resources)


[attachment deleted by admin]

[turtleboy]

Thanks a lot GauGau.. I've been messing around with it trying to get it to work in CPG, but no such luck.. Can't figure out how to use the {THUMB} tag while keeping all the html and code that will make it work.

I was able to make the shadows height and width variable:
http://www.skylinedesigns.net/foto/foto-gallery/shadow_test.php

Code Select Expand

list($thumbnail_width, $thumbnail_height, $type, $attr) = getimagesize("thumb_image.jpg");

Heh but that's about it  

[Tarique Sani]

Try the CSS way http://www.alistapart.com/articles/onionskin/

[turtleboy]

I have been playing around with the method Tarique Sani suggested and it seems to be the easiest to implement.. although as of now it is creating layout problems with the way the thumbs are displayed.

http://www.skylinedesigns.net/foto/foto-gallery/thumbnails.php?album=13

Either columns aren't lining up or the justification in each cell is messed up but I can't track down the source of the problem.

Here is what it looks like right now: <head> of template.html:

Code Select Expand


<style type="text/css">
<!--

/*core drop shadow rules*/
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/}
.wrap1 {float:left; background:url(themes/silver_fuel/images/x_shadow.png) right bottom no-repeat;}
.wrap2 {background:url(themes/silver_fuel/images/x_corner_bl.png) left bottom no-repeat;}
.wrap3 {padding:0 8px 8px 0; background:url(themes/silver_fuel/images/x_corner_tr.png) right top no-repeat;}

.wrap3 img {display:block; border:0px solid; border-color:#000000}

#v1 .wrap1 {background:url(themes/silver_fuel/images/x_shadow.png) right bottom no-repeat;}
#v1 .wrap2 {background:url(themes/silver_fuel/images/x_corner_bl.png) 0px 100% no-repeat;}
#v1 .wrap3 {padding:0 6px 6px 0; background:url(themes/silver_fuel/images/x_corner_tr.png) 100% 0px no-repeat;}
-->
</style>


thumb_cell of theme.php

Code Select Expand

<!-- BEGIN thumb_cell -->
<td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
<table>
<tr><td>
<div id="v1">
<div id="main" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap1" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap2" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap3" align="center"> <a href="{LINK_TGT}">{THUMB}</a></div>
</div>
</div>

</div>

</div>
</td></tr>
<tr><td>
{CAPTION}
    {ADMIN_MENU}
</td></tr></table></center>


</td>
<!-- END thumb_cell -->

I had to insert a table so that the title and desc. of each thumb would appear underneath the actual thumb instead of next to it.

[Casper]

Try adding the attributes to the cell the div is actually in, like this;

Code Select Expand

<!-- BEGIN thumb_cell -->
<td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
<table>
<tr><td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
<div id="v1">
<div id="main" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap1" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap2" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap3" align="center"> <a href="{LINK_TGT}">{THUMB}</a></div>
</div>
</div>

</div>

</div>
</td></tr>
<tr><td>
{CAPTION}
    {ADMIN_MENU}
</td></tr></table></center>


</td>
<!-- END thumb_cell -->