Page 1 of 1
Picasa layout of thumb nails in album
Posted: Wed Sep 26, 2007 5:01 am
by Gregor
Hello,
Got the picasa module running
If I click on a album, all thumbnails are shown, however they overlap each other. Is there a way how to give them a little space between each other? I've been playing with the default templates, but without any luck.
http://www.wsv-herkingen.nl/index.php?page=test
Thanks for your help!
Gregor
Re: Picasa layout of thumb nails in album
Posted: Wed Sep 26, 2007 2:42 pm
by Dr.CSS
You don't use the {stylesheet} tag?...
Try...
#main div{margin:35px 5px;}
Re: Picasa layout of thumb nails in album
Posted: Wed Sep 26, 2007 4:10 pm
by Gregor
Thanks Mark, I'll give it try. The picasa-module has it's own two templates. I don't know how I should create all tags for the picasa album. Any suggestions are more than welcome.
The two templates are:
Album template
Code: Select all
{section name=thumbnails loop=$thumbnails}
<div class='pwaAlbum' style='width:180px;height:200px;float:left;text-align:center;'>
<a title="{$titles[titles]}" href="{$links[thumbnails]}" style='display:block;width: 160px;margin: auto auto;'>
<img src='{$thumbnails[thumbnails]}' style='padding:0px;' />
</a>
<div style='clear:both;width:180px;float:left;text-align:center;'>
{$titles[thumbnails]}
</div>
</div>
{/section}
Images template
Code: Select all
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/scriptaculous.js?load=effects"></__script>
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/lightbox.js"></__script>
<link rel="stylesheet" href="modules/PicasaWebAlbumBrowser/templates/lightbox/css/lightbox.css" type="text/css" media="screen" />
{section name=thumbnails loop=$thumbnails}
<div style='float:left; text-align:center; vertical-align: bottom; height:80px; width:80px;'>
<a rel="lightbox[{$album}]" title="{$titles[thumbnails]|default:' '}" href="{$images[thumbnails]}">
<img src='{$thumbnails[thumbnails]}' style='padding:0px;'/>
<br/>
</a>
</div>
{/section}
{if $albumDrillDown}
<div style='clear:both; text-align:center; height:80px; width:100%;'>
<a href='{$linkBack}'>{$linkBackText}</a>
</div>
{/if}
Gregor
Re: Picasa layout of thumb nails in album
Posted: Thu Sep 27, 2007 6:23 am
by Gregor
I made some changes to the images template so the images get some space around each other
Code: Select all
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/scriptaculous.js?load=effects"></__script>
<__script__ type="text/javascript" src="modules/PicasaWebAlbumBrowser/templates/lightbox/js/lightbox.js"></__script>
<link rel="stylesheet" href="modules/PicasaWebAlbumBrowser/templates/lightbox/css/lightbox.css" type="text/css" media="screen" />
{section name=thumbnails loop=$thumbnails}
<div style='float:left; text-align:center; vertical-align: bottom; height:auto; width:auto; margin:5px;'>
<a rel="lightbox[{$album}]" title="{$titles[thumbnails]|default:' '}" href="{$images[thumbnails]}">
<img src='{$thumbnails[thumbnails]}' style='padding: 0px;'/>
</a>
</div>
{/section}
{if $albumDrillDown}
<div style='clear:both; text-align:center; height:80px; width:100%;'>
<a href='{$linkBack}'>{$linkBackText}</a>
</div>
{/if}
I don't know how to high light text inside the code, I changed:
bottom; height:auto; width:auto; margin:5px;
One imprevement left, while showing the album, the line with '^Top' is shown through the album pictures. There is no problem with the thumbnails. Any suggestions?
Gregor
Re: Picasa layout of thumb nails in album
Posted: Thu Sep 27, 2007 6:57 am
by Dr.CSS
Your Album list on the first page I'm assuming is the problem, you will need a clear:both div below the images, they float left so the HR and ^Top are floating up behind them...
Re: Picasa layout of thumb nails in album
Posted: Thu Sep 27, 2007 8:01 am
by Gregor
Thanks Mark! That's the solution. It now looks:
Code: Select all
{section name=thumbnails loop=$thumbnails}
<div class='pwaAlbum' style='width:180px;height:200px;float:left;text-align:center;'>
<a title="{$titles[titles]}" href="{$links[thumbnails]}" style='display:block; height:auto; width:auto; margin: auto auto;'>
<img src='{$thumbnails[thumbnails]}' style='padding:0px;' />
</a>
<div style='clear:both;width:180px;float:left;text-align:center;'>
{$titles[thumbnails]}
</div>
</div>
{/section}
<div style='clear:both;'>
I think I'm finally there. If I integrate it with the Album module, there is one thing left:
1. There is quite some white space between the Album pictures and the Picasa pictures.
http://www.wsv-herkingen.nl/index.php?page=test
Is there a way to solve this as well?
Thanks,
Gregor
Re: Picasa layout of thumb nails in album
Posted: Fri Sep 28, 2007 1:59 pm
by Dr.CSS
The reason they don't have the same space between them, your descriptions are diff. lengths, try 2 words for each and see if they have same spacing...
Re: Picasa layout of thumb nails in album
Posted: Sat Sep 29, 2007 7:17 am
by Gregor
I think I did not explain correct what I meant. Between the Album and the Picasa album there is (vertical) quite some white space. I don't know where that comes from. There are no extra placed. I looked through the various stylesheets, but I could not figure out where the vertical space coms from.
Thanks,
Gregor
Re: Picasa layout of thumb nails in album
Posted: Sat Sep 29, 2007 2:46 pm
by Dr.CSS
I think it's in the piccasa template, clear:both will make it move below or out of the way of any thing on either side, so it's going below the weather thing on the left...
Bruinvis in de Grevelingen
(19 images)
Albums bij Picasa
Re: Picasa layout of thumb nails in album
Posted: Sat Sep 29, 2007 4:37 pm
by Gregor
Mark,
I found the 'clear:both', it's in the Album stylesheet "Thickbox-with-next-prev-links". However, if I remove it there, than in 'Fotoalbum' the dotted line, Vorige pagina, Volgende pagina and ^Top are placed right through and under the pictures. One solution, is to make a seperate page with pictures that are on Picasa. I think this is not a user friendly solution: how does the user know where to look for what photo
Changing the "clear:both" in :right or :left, does not do the trick.
Do you have any other suggestions I can try?
Gregor
Re: Picasa layout of thumb nails in album
Posted: Sat Sep 29, 2007 5:14 pm
by Dr.CSS
You could take it out of there and put it in your template above this...
here
Re: Picasa layout of thumb nails in album
Posted: Sun Sep 30, 2007 10:26 am
by Gregor
That did do the trick. Thanks Mark!
Next step I'd like to to make is to the Picasa thumbnails look equal to the Album thumbnails... But that probably means changing the thumbnail size via the template or so.
The changes made to the template, can I suggest them to the core of the Picasa module? If so, how can I do that?
Gregor
Re: Picasa layout of thumb nails in album
Posted: Sun Sep 30, 2007 7:24 pm
by TJINAK
Being curious about the Picasa module and I'm wondering if the images are stored on googles servers does that mean if they change something on thier end it will break the functionality of your images, perhap access?
I'm doing a real estate site and like the idea of picassa being the end user managment program but would rather keep all images on the company's hosting site.
Thanks,
TJ
Re: Picasa layout of thumb nails in album
Posted: Mon Oct 01, 2007 6:38 am
by Gregor
The images are stored on Google's servers, and I think if they change something, I have a problem... Hoewever, in the way I'm using Picasa, it's a pitty if it breaks down, but it is not the end of the world.
Gregor