'Shadow' borders not displaying correctly?

Manitoba

Joined: 2004-02-16
Posts: 50
Posted: Tue, 2004-12-14 09:38

Hi all,

Took the plunge & downloaded Gallery 2, absolutely fantastic piece of work, in all of the 1.x versions of Gallery I've used I have always gone with the 'Shadow' border however when I select 'Shadow' in G2 the thumbnails do not align correctly against the shadowed border, the shadowed border itself drops down a couple of inches from the actual thumbnail & looks way off!. I have not been able to replicate this with any of the other border frames.

* I've attached an example pic to illustrate*

Note on the top right of the pic the tiny piece of border.

Has anyone else come across this or anybody have any suggestions? as I really want to go with this border type again.

Thanks in advance...

Mark

AttachmentSize
Shadows border.JPG7.81 KB
 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 14:16

I was just about to look in to this, but Ernesto Baschny fixed it really quick ;)

Quote:
Update of /cvsroot/gallery/gallery2/modules/imageframe/templates
In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv7575/templates

Modified Files:
ImageFrame.tpl
Log Message:
* Fixes shadow-frame on IE: empty <div> bug in IE

He added non-breaking space entities (&amp;nbsp;) between the class="V" DIV tags, like in the purple + lines below:

Quote:
RCS file: /cvsroot/gallery/gallery2/modules/imageframe/templates/ImageFrame.tpl,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- ImageFrame.tpl 21 Jul 2004 21:29:22 -0000 1.3
+++ ImageFrame.tpl 14 Dec 2004 14:07:49 -0000 1.4
@@ -27,7 +27,7 @@
<tr>
{if $data.hVT}<td class="LLT"></td>{else}<td class="LL"{if $data.hVT or $data.hVB}
style="height:expression((document.getElementById('IFid{$IF_count}').height-{$data.hVT+$data.hVB})+'px')"
- {/if}><div class="V"></div></td>{/if}
+ {/if}><div class="V">&amp;nbsp;</div></td>{/if}
<td rowspan="{$data.rowspan}" colspan="{$data.colspan}">{if
isset($ImageFrame_pre)}{$ImageFrame_pre}{/if}{if isset($src)}<img src="{$src}" alt=""
id="IFid{$IF_count}"/>{else}{g->image item=$item image=$image
@@ -35,16 +35,16 @@
isset($ImageFrame_post)}{$ImageFrame_post}{/if}</td>
{if $data.hVT}<td class="RRT"></td>{else}<td class="RR"{if $data.hVT or $data.hVB}
style="height:expression((document.getElementById('IFid{$IF_count}').height-{$data.hVT+$data.hVB})+'px')"
- {/if}><div class="V"></div></td>{/if}
+ {/if}><div class="V">&amp;nbsp;</div></td>{/if}
</tr>
{if $data.hVT}
<tr>
<td class="LL"{if $data.hVT or $data.hVB}
style="height:expression((document.getElementById('IFid{$IF_count}').height-{$data.hVT+$data.hVB})+'px')"
- {/if}><div class="V"></div></td>
+ {/if}><div class="V">&amp;nbsp;</div></td>
<td class="RR"{if $data.hVT or $data.hVB}
style="height:expression((document.getElementById('IFid{$IF_count}').height-{$data.hVT+$data.hVB})+'px')"
- {/if}><div class="V"></div></td>
+ {/if}><div class="V">&amp;nbsp;</div></td>
</tr>
{/if}
{if $data.hVB}

(The lines with - are removed, those with + are added)

In a few hours, sometimes as long as eight, the change will show up in the CVS source code on SourceForge. To get the latest G2 source, you can use these instructions to download it with WinCVS or download a nightly snapshot. If you have any trouble installing a new version, do a clean install, by removing the database tables and deleting all the files in both the main gallery folder and the data folder before installing the new version.

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 14:17

Manitoba, this bug happens only with Internet Explorer. On Firefox/Mozilla etc it looked alright. We still have some issues with IE things since we got rid of the IE7-hacks, but we will tackle them one by one.

I've just found out the origin of this particular bug and fixed it in CVS. So on next CVS snapshot it should work as intended.

The next problem you have is that we are using PNGs with alpha-blending, which looks amazingly nice on Firefox/etc, but doesn't work at all on Internet Explorer. So the "shadow" you see isn't really that nice there. :( The problem without alpha-transparency comes up when you choose a different background color: GIFs with just a fixed transparency color will look ugly...

See the comparison below:

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 14:25
baschny wrote:
The next problem you have is that we are using PNGs with alpha-blending, which looks amazingly nice on Firefox/etc, but doesn't work at all on Internet Explorer. So the "shadow" you see isn't really that nice there. :( The problem without alpha-transparency comes up when you choose a different background color: GIFs with just a fixed transparency color will look ugly...

We could always use (or offer theme-writers) just the PNG transparency JavaScript hack or a variation of it, applied just to the shadows (perhaps that will speed it up)

Or perhaps we should have theme-able versions of the image borders ...

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 14:34

CSpotkill, I was thinking of the javascript png-hack, as we used to have it in our code (its part of IE7). Maybe we could get back just that one hack, if it doesn't slow us down too much. Is there somewhere a minimalistic version of this hack? Would it hurt the performance too much to use it on all g2-pages?

The gallery2-logo at top used to be a nice alpha-transparencied PNG, but it looked ugly on IE (gray background). Now its a GIF. :(

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 14:50

Why yes, there is - it's on the page I linked to ;)

http://homepage.ntlworld.com/bobosola/pnghowto.htm

I've used it at cszen.com with a 100KB alpha-transparent PNG. I'm not sure if the script slowed down the site or the PNG download, but it's worth experimenting with. If the performance out-of-the-box isn't acceptable, we could probably try tweaking the JavaScript so it doesn't apply to *every* .png image, and only applies to the ones we really need alpha-transparent. Although the delay could be the ActiveX component loading, which is an unfortunate, but necessary evil, to get the script to work.

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 14:53

CSpotkill, I just followed the link you gave to the bobosola page, and applied that proposed png-fix to g2. It works nice for <img> tags, but doesn't apply to background-images (which is how our imageframe's work). The "cons" at that site state that it would be possible, but then it would have problems with the repeat-x/y etc, which is what we use. Any ideas?

And.. could this code be applied to a GPL code like g2? There doesn't seem to be any license indication on that page, so I assume its "freeware", but still its his copyright, right?

Cheers,
Ernesto

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 14:57

CSpotkill, and about your quote above of the CVS diff, I didn't add ampersands to the <div>'s, I added "& nbps ;" entities (non-breakable spaces). Which is a content, but doesn't appear.

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 15:08
baschny wrote:
... but doesn't apply to background-images (which is how our imageframe's work). The "cons" at that site state that it would be possible, but then it would have problems with the repeat-x/y etc, which is what we use. Any ideas?

I'll take a look at it.

baschny wrote:
And.. could this code be applied to a GPL code like g2? There doesn't seem to be any license indication on that page, so I assume its "freeware", but still its his copyright, right?

With CSS code, people usually aren't as strict about licensing. If you asked him directly by email, he'd probably have no problem with it. Besides, it's based on ideas from other people. The great thing about the current web standards/web design culture is that so much of it is shared, "for the greater good" almost. And as a last resort, couldn't we put it in lib/ and avoid the copyright issue, like what we might have done with my script?

baschny wrote:
and about your quote above of the CVS diff, I didn't add ampersands to the <div>'s, I added "& nbps ;" entities (non-breakable spaces). Which is a content, but doesn't appear.

Excellent. I was actually just about to suggest that, it must have been Thunderbird's fault. I'll edit my post to reflect that.

By the way, to post &amp;nbsp;, use &amp;amp; instead of &amp;. So it looks like &amp;amp;nbsp; ;)

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 16:00

I don't think it's possible to apply the Microsoft-provided fix it uses for background-image alpha-transparency in IE/Win. Perhaps we can change the shadow method to use an image without repeat-x/repeat-y? Or we could use the !important "hack" to feed IE a non-alpha shadow, like Phil Baines did here. Or we could use overlapping boxes for the shadow, though it's not the same. ;)

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 17:13

CSpotkill, the "frames" framework of the imageframes module allows more than just the "shadow" frame, so this should be as generic as possible. Take a look at how this module works. Maybe you can find some easy solution while still maintaining a generic framework where all our frames work.