Bigger thumbnails in galleries + tutorial
Posted: Mon Aug 06, 2012 1:06 amI'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.
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.