Bigger thumbnails in galleries + tutorial

[dremeaux]

I've finally solved the riddle of how to get bigger thumbnails for my images without being stuck with the PBlog format.

Check it out:
http://www.pbase.com/dremeaux/egypt

This is a fairly advanced tutorial, so if you aren't comfortable with CSS you may want to seek some help. This isn't a one-stop shop, due to pbase's absolutely archaic HTML implementation, so we need a bit of trickery to get things done.

This tutorial will be assuming my stylesheet you can see there (ignoring the large thumbnails bit) will be used. If you want to use your own stylesheet, you'll have to do some hacking.

For those that want to use this with their own stylesheet, the only important parts of the core CSS is the img.thumbnail selector. You should be able to only use that piece (and remove border and box-shadow stuff if you want) and be fine.

The secret here is setting the width and height of the img.thumnails to 0, setting the background image to its /medium.jpg counterpart, and then setting the width/height with the padding element.

1. First thing is first: create a new stylesheet, and paste this text into it: http://pastebin.com/raw.php?i=Ey4vNmFP

2. Now, go to your gallery page and do "view source". Find the section that has all the <TD>s and copy all of it to the clipboard. The selection should look like this, but obviously with your data in it instead of mine: http://pastebin.com/raw.php?i=qzJe315M

3. Go here: http://andydremeaux.com/pbase/

4. Paste your HTML where it says to paste it. Make sure you replace the text that is there.

5. See the box up top where it says "dremeaux"? That's me. Replace that with your pbase account name.

6. Click process. Your output should look like the following. If it doesn't, you did something wrong; start again from step 2. http://pastebin.com/sMpPsHNV

7. Copy the output text to the end of your new stylesheet. Note that, using this method, each gallery will need its own unique stylesheet.

8. Update the gallery to use the new stylesheet on its edit page. Voila.

[digitalorogeny]

I actually see little black squares for each picture rather than enlarged thumbnails in your Egypt gallery.

[kirstenmary]

Same here.

[dremeaux]

What browser are you guys using?

[dremeaux]

Alright the page should look (relatively) normal in IE. The thumbs will be small though. This is only supported in legitimate browsers. It would be supported in IE, too, if pbase declared a doctype (welcome to 2004!), but that's probably too much to ask.

[cits_4_pets]

I actually see little black squares for each picture rather than enlarged thumbnails in your Egypt gallery.

I see medium size images and the page looks great. I use Firefox.

[keenimages]

Looks good in Firefox. Nice work!