Previous Thread
Next Thread
Print Thread
Hop To
Joined: Oct 2005
Posts: 50
F
journeyman
journeyman
F Offline
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
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
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
journeyman
F Offline
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
spam issues
by ECNet - 03/19/2024 11:45 PM
Looking for a forum
by azr - 03/15/2024 11:26 PM
Editing Links in Post
by Outdoorking - 03/15/2024 9:31 AM
Question on barkrowler and the like
by Mors - 02/29/2024 6:51 PM
Member Permissions Help
by domspeak - 02/27/2024 6:31 PM
Who's Online Now
2 members (Gizmo, Nightcrawler), 553 guests, and 186 robots.
Key: Admin, Global Mod, Mod
Random Gallery Image
Latest Gallery Images
Los Angeles
Los Angeles
by isaac, August 6
3D Creations
3D Creations
by JAISP, December 30
Artistic structures
Artistic structures
by isaac, August 29
Stones
Stones
by isaac, August 19
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20230217)