Picasa layout of thumb nails in album

[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

[Dr.CSS]

You don't use the {stylesheet} tag?...

Try...

#main div{margin:35px 5px;}

[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

[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

[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...

[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

[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...

[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

[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
 

[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

[Dr.CSS]

You could take it out of there and put it in your template above this...
             
              here
       

[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

[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

[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