Picasa Albums

 

Displaying Public Albums (#)

To display public albums for a user in Picasa use the following syntax:

 [gallery type='picasa' user_id='xyz' kind='album'] 

Alternatively if you drop the kind attribute that should work too:

 [gallery type='picasa' user_id='xyz'] 

Here are the public albums from Sayontan Sinha:

Filtered List of Albums (#)

In the above example the “Album for profile photos” is something coming from Google to accommodate Google+. If you want to eliminate it, you can use the optional filter attribute, wherein you only provide a comma-separated list of albums that you wish, i.e. filter='x,y':

The above is generated using:

[gallery type='picasa' user_id='sayontan' filter='VaibhavSBirthday']

Google Photos vs. PicasaWeb (#)

In its infinite wisdom, Google’s current Google Photos doesn’t have a public API, and the old Picasa API remains. As a result Photonic is compelled to use Picasa’s API. In the opinion of many, Google Photos is a giant leap backwards:

  1. Unlike PicasaWeb there is no easy way to determine the ID of an album. I have gotten around this by providing a “Helper” for it. You can go to Photonic → Helpers → Picasa / Google Photos, put in your user name, and get the IDs. To get the IDs of Google Photos albums you will need to authenticate.
  2. As outlined above, PicasaWeb used to support a mode for “Limited” sharing. As long as it was still around, in PicasaWeb, restricted albums created in Google Photos showed up as “Limited”, while the classical PicasaWeb option of “Limited, anyone with the link” also existed for the same album. This permitted you to use the authkey provided by PicasaWeb. But now that PicasaWeb is fully gone, this option doesn’t exist. Google introduces something similar at first glance, wherein it generates a shortcode for an album that you can hand out. E.g. for one of my albums it gives me the link https://goo.gl/photos/TuWyKAdameiXTmdo6. I can visit the link, which expands out, but none of the details in the link help in the API. Moreover the shortcode cannot be expanded by the API without authentication! Try this link. For older albums created with PicasaWeb, the authkey still works, as shown above.
  3. In perhaps the least thought out move, Google made it very, very hard to make an album public. In fact, there is no way currently to determine a user’s public albums in Google Photos – you only see the older PicasaWeb albums. There are certain third-party workarounds that let you make albums public, but the process is very convoluted.

Back-End vs. Front-End Authentication (#)

In an attempt to overcome shortcomings of Google Photos’ sharing model, Photonic has baked in a nice little form of authentication. Traditionally Photonic had one option, to enable “Private Photos”. This presents a login box that looked like this:

Picasa Login Box

Picasa Login Box


Visitors to your site can then log in and see your photos.

The above is an example of “Client-Side Authentication”, or “Front-End Authentication”, and with the changes to Google’s API, this has some serious shortcomings:

  1. Because Google makes it nearly impossible to make photos public, even showing photos that you have no hesitation in making public creates quite a disruptive user experience, often requiring users to login.
  2. It assumes that your site’s visitors have Google logins, and have been added to your whitelist of who can see your photos. With the ubiquity of Google it is likely that most of your visitors have logins, but no level of omniscience can help you whitelist all your visitors.

Enter “Server-Side Authentication”, or “Back-End Authentication”, introduced in Photonic 1.59. This capability has the server authenticate you (rather than your visitors), then display photos that you are allowed to see (your own, or others’). Your visitors won’t have to login, and can see what you choose to share through your WP site.

In a nutshell, Client-Side Authentication lets your visitors see what they are authorized to see, and Server-Side Authentication lets your visitors see what you are authorized to see. Of course, you can use parameters such as filter in your shortcode to restrict what is shown to your visitors.

Setting this up is a brief process with a few steps:

  1. The first step requires you to set the Google Client ID and Google Client Secret at Photonic → Settings → Picasa → Picasa Settings, the same as you would in the front-end mechanism.
  2. Next, head over to Photonic → Helpers → Picasa / Google Refresh Token Getter, then start the authentication:
    First, login and provide Photonic the permission to access your photos.

    First, login and provide Photonic the permission to access your photos.


    Clicking on the button will take you to Google’s website.
  3. Once you approve the application on Google’s website, you will need to obtain the token:
    Success in the first step activates the second step.

    Success in the first step activates the second step.


    Click on the button, and Photonic will try to fetch the “Refresh Token” for you.
  4. Upon a successful execution, you will see the “Refresh Token”:
    The token shows up upon success

    The token shows up upon success


    Copy this token, and paste it in Photonic → Settings → Picasa → Picasa Settings → Refresh Token (for Back-end / Server-side Authentication). Save, and you are good to go!

Once done, your albums will behave very much like the old Picasa albums and will show all your public content. Additionally, see the next section for other ways to control what is shown.

Note that the Server-Side authentication overrides the Client-Side authentication. So, if you have both activated (you shouldn’t, but just saying), your visitors will see whatever you are showing, not just what they are authorized to see.

Private / Protected Albums (#)

The messed-up landscape of Google Photos now has albums with the following access types:

  1. Public – This is only applicable to legacy Picasa albums. Photos here have no access control applied to them by Google.
  2. Private – This is only applicable to legacy Picasa albums. Photos here are locked with the legacy authkey code. Legacy Picasa albums used to have a security setting, “Limited, anyone with the link”, wherein the authkey would be appended to the album URL. E.g. https://picasaweb.google.com/111233011352590794218/Maui?authkey=xxxxxxxxx. This setting is no longer available, but albums protected thus continue to be protected.
  3. Protected – This is only applicable to new Google Photos albums. All new albums in Google Photos are set up as protected. There is no true way to make photos public, and the short-link that Google provides when you click on “Share” is basically useless – where and how do you provide this URL on a public website?

In the previous section we saw how to get all public albums for a user using back-end authentication. But what if we wanted to show only some selected albums, and put in some sort of protection? Enter the access and protection attributes.

The access attribute takes a comma-separated list specifying public, protected and private. If you do not specify a value for access it assumes a value of public, i.e. your public photos are shown.

To show all albums of mine, I put in:

[gallery type='picasa' user_id='sayontan' access='public,protected,private' layout='random']

Clicking on any of the above thumbnails will show you the photos in that album. I have set access='public,protected,private' and no protection has been set.

Now, if I wanted to show only my public and private albums and prompt the users for an authkey when they click on the thumbnail for private albums, I tweak the shortcode this way:

[gallery type='picasa' user_id='sayontan' access='public,private' layout='random' protection='authkey' filter='6372940824126557521,6354351428035793137,Maui,VaibhavSBirthday,SantaCruzAugust2006,IT']
Maui

This album is protected. Please provide a valid authorization key.

Access
These photos were taken during a trip to Santa Cruz beach, with Vaibhav and Swati, Pankaj and Shilpa and Tanuka's parents

This album is protected. Please provide a valid authorization key.

Access
IT

This album is protected. Please provide a valid authorization key.

Access

The protection='authkey' lets the album behave like a password-protected album in SmugMug or Zenfolio. You can try entering “Gv1sRgCPmkisnbtbz5twE” for the Maui album.

If you haven’t got the authkey for an album that was created before Google ditched Picasaweb you can find out the same from Photonic → Helpers → Picasa / Google Photos. Note that the helper will only show you data that exists in the system; it will not create an authkey for you.

Note that you could pass the additional filter attribute to further restrict the displayed albums to a few named albums.

To display photos from private / protected albums, you don’t need to provide any authkey. This is a Picasa album from me:

[gallery type='picasa' user_id='sayontan' album='Maui' layout='random']
Fun on the JetSki
DSC_3254.JPG
DSC_3255.JPG

… And this is a Google Photos album:

[gallery type='picasa' user_id='sayontan' album='6372940824126557521' layout='random']
Zebra
Giraffe
Kingfisher
Water Monitor
Kudu
Rhino
Elephant
Hippo

Note the difference in the ID structure of both. You can get the ID from Photonic → Helpers → Picasa / Google Photos

“Show More” and Paged Results (#)

If a search result has a lot of photos and you want to reduce the count, Photonic offers a couple of approaches:

  1. For Picasa, use the max_results attribute documented above, and add an additional tag, more. This will initially show you the number of photos specified in max_results, and a button to load more images. Upon clicking the button you will see an additional set of photos as limited by max_results. The button will continue to show until you have exhausted the entire set of photos.
  2. Photonic can be used in conjunction with <!-- nextpage --> to display photos in a paged manner. For this you can structure your page content thus in the WP Editor:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta enim vel tellus dignissim, a venenatis neque congue. Nunc ornare cursus leo ac viverra. Pellentesque suscipit pulvinar metus, non aliquam odio egestas quis. Vestibulum porta viverra magna, vel malesuada ante fermentum vitae.
    [gallery type='picasa' user_id='kokonad' album='CorningGlassMuseum' max_results=10 layout='random' start_index=1]
    <!-- nextpage -->
    [gallery type='picasa' user_id='kokonad' album='CorningGlassMuseum' max_results=10 layout='random' start_index=11]
    <!-- nextpage -->
    [gallery type='picasa' user_id='kokonad' album='CorningGlassMuseum' max_results=10 layout='random' start_index=21]
    

Here is an example using the first approach. The text you provide to the more parameter controls what is shown in the button:

[gallery type='picasa' user_id='kokonad' album='CorningGlassMuseum' max_results=10 layout='circle' more='Show More']