Board index PBase Show and Tell Bigger thumbnails in galleries + tutorial

Show and Tell

Bigger thumbnails in galleries + tutorial

Announce and discuss your photos.
dremeaux
 
Posts: 10

Bigger thumbnails in galleries + tutorial

Post Mon Aug 06, 2012 1:06 am


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
 
Posts: 4

Re: Bigger thumbnails in galleries + tutorial

Post Mon Aug 06, 2012 3:54 pm


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

kirstenmary
 
Posts: 512

Re: Bigger thumbnails in galleries + tutorial

Post Mon Aug 06, 2012 7:22 pm


Same here.

dremeaux
 
Posts: 10

Re: Bigger thumbnails in galleries + tutorial

Post Tue Aug 07, 2012 2:11 am


What browser are you guys using?

dremeaux
 
Posts: 10

Re: Bigger thumbnails in galleries + tutorial

Post Tue Aug 07, 2012 2:36 am


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
 
Posts: 1738
Location: Walnut Creek, CA

Re: Bigger thumbnails in galleries + tutorial

Post Tue Aug 07, 2012 4:32 am


digitalorogeny wrote: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.
Flo
Cits 4 Pets where Happy Pets Go with the Flo
http://www.pbase.com/cits_4_pets/
My Firefox Tthemes/skins for your web browser)

keenimages
 
Posts: 338
Location: Southern California

Re: Bigger thumbnails in galleries + tutorial

Post Wed Aug 08, 2012 1:28 am


Looks good in Firefox. Nice work!


Board index PBase Show and Tell Bigger thumbnails in galleries + tutorial

Who is online

Users browsing this forum: No registered users and 2 guests

cron