Previous Thread
Next Thread
Print Thread
Hop To
Joined: Oct 2005
Posts: 50
F
journeyman
OP Offline
journeyman
F
Joined: Oct 2005
Posts: 50
Hi there,
Purely an aesthetics question, is there a way I can make thumbnails in the gallery section display with a background of...

[Linked Image from lovethegarden.com]

For landscape images, and...

[Linked Image from lovethegarden.com]

So for example, the landscape images displays like this...

[Linked Image from lovethegarden.com]

I could wrap the thumbnails within a div with those images set as a css background and some padding, but there are obviously the 2 orientations of images: landscape and portrait, and they are dynamically created.

Does part of the UBBthreads code handle the placing of the 2 different image orientations or are they purely produced within GD2/ImageMagick?

Cheers,
Phil

Joined: Apr 2007
Posts: 3,940
SD Offline
Former Developer
Offline
Former Developer
Joined: Apr 2007
Posts: 3,940
with the proper css framing technique, it wouldn't matter landscape/portrait. the frame would be elastic..

although you chose a specific frame look that seems not to lend itself to elasticity .. at least the bottom part looks that way.

2c

Joined: Oct 2005
Posts: 50
F
journeyman
OP Offline
journeyman
F
Joined: Oct 2005
Posts: 50
OK I have created a solution, it involves using another table which I tend to avoid usually but as the rest of UBBthreads is table based another one is not going to make any difference really.

So first decide on the minimum width a thumbnail will be, so in my case portrait thumbnails have a width of 93px, make an image slice with an extra 5px either side (so 103px) as below...

[Linked Image from lovethegarden.com]

Then create the table code with padding/border css on the image for the other parts of the shadowing...

HTML
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div>
<img src="/thumbnail.jpg" alt="Image" style="border-right:2px solid #e6e6e6; border-left:2px solid #e6e6e6;padding:3px;"/>
</div>
</td>
</tr>
<tr>
<td>
<img src="thumb-shadow.gif" alt="Shadowing" width="100%" height="3" />
</td>
</tr>
</table>

As the div wrapping the image is a block element, this forces the table width to the width of the image (plus the css padding/borders). The shadow image in the second table row is set to a width of 100%, so extends to the width of the table element. If you place an image with a larger width in the div the shadow image extends in width as desired.

Not the most graceful code but it works, see it in action here.


Link Copied to Clipboard
ShoutChat
Comment Guidelines: Do post respectful and insightful comments. Don't flame, hate, spam.
Recent Topics
Scroll Up Button
by JAISP - 04/28/2021 7:39 AM
[Cannot Replicate] Unapprove Post Bug
by Larry Miller - 04/26/2021 10:07 AM
Just popping in
by Harold - 04/25/2021 9:05 PM
Moving Forum/Category location
by ECNet - 04/25/2021 12:11 PM
7.7.5 become member issue
by Ruben - 04/15/2021 10:06 AM
Who's Online Now
1 members (Ruben), 76 guests, and 54 robots.
Key: Admin, Global Mod, Mod
Random Gallery Image
Latest Gallery Images
gallery test
gallery test
by Mors, September 23
Los Angeles
Los Angeles
by isaac, August 6
3D Creations
3D Creations
by JAISP, December 30
Artistic structures
Artistic structures
by isaac, August 29
Powered by UBB.threads™ PHP Forum Software 7.7.5