#100

Product support

Visit this product's website for support.

Categories

  • Utility

This plugin can display a photos gallery based on albums from Google Photos. This way you don't need to care about images resizing, compression, thumbnails storage or server bandwith for large galleries.

demonstration

Features

  • Uses OAuth authentication to access private albums
  • Customizable thumbnail sizes
  • Also provides page snippets to embed an album in a static page
  • Optional caching of API requests
  • No CSS or JS out of the box, it's up to you to style or override the default layout

Installation

Prerequisites

This plugin is shipped with an OAuth client app that will only work on localhost to allow you to test the plugin. If you want to deploy it on a remote server, you will need to create your own OAuth app credentials (or use an existing app for your domain).

Follow these steps to get your credentials: Google documentation. At a point this doc will tell you that "the Authorized redirect URI does not require a value", but in this case it needs so set it to https://example.com/backend/inetis/googlephotos/oauth/callback. Of course, replace example.com/backend by your domain and your backend url.

When done, you will be given a Client ID and a Client Secret.

With these credentials, you can override the config of the plugin (see official doc): Copy the file /plugins/inetis/googlephotos/config/config.php to /config/inetis/googlephotos/config.php and put your app credentials inside.

Configure the component

From the settings page of the plugin, login to your Google account. If you get a 404 error when clicking on the "Sign in" link, you have missed something while setting up your OAuth app.

In the settings, you can also define a cache duration. Cache is used on requests to the Google API to retrieve informations about the albums. The images are not cached, only their urls are.

You may want to hide some specific albums, such as the auto-generated "Auto Backup" or "Profile image". The names of these album may change depending on the language of your Google account, so it is advised to use the album id instead of the name.

Pages setup

You need to create two CMS pages:

One to display the albums of a single gallery

single gallery image

For this one you need an additional "albumId" parameter in the url (you may name it differently if you change it in the component parameters).

On this page, include the Google Photos album component.

One to display all galleries

single gallery image

On this page, include the Google Photos albums list component. In the components parameter, set the Album Page parameter to the Page you just created before.

Settings page of the plugin

Components / Snippets properties

The plugin comes with 2 components, also available as page snippets, used to display the galleries. Here are described the properties of these component:

Property Components Description
Album ID Single album Determine what album to display. In a component usage, it's typically extracted from an url parameter. When used as a snippet, a dropdown listing all albums on the account is shown.
Album Page Albums list Determine which CMS page should be used to display a single album.
Visibility Both Determine the visibility level of the albums to show. See API doc for possible values
Thumbnail size Both This is used with Crop mode to compute to generate thumbnails.
Crop mode Both To which dimension of each image should apply the Thumbnail size property. There is no documented way to do it in the API, so the plugin is using this method instead
Square crop thumbnails Both If true, generated thumbnails will have a 1:1 ratio. If false, images will be resized according to the Thumbnail size, but the original ratio will be preserved.

Accessible parameters

When overriding the component views, the following properties are available from Twig:

In the GooglePhotosAlbum component:

Property Description
images An array of images contained inside the album.
albumTitle The actual name of the album being displayed.

Each entry of the images array contains the following properties:

Property Description
photoTitle The title of the photo given by the user.
photoUrl The url of the photo in original size.
thumbUrl The url of the generated thumbnail for the photo.
photoSummary A description of the image given by the user.
photoPublished The date when the photo was initially published.
photoUpdated The last modification date of the photo.
imageHeight The height in px of the original image.
imageWidth The width in px of the original image.

In the GooglePhotosAlbums component:

Property Description
albums An array of albums from the account.

Each entry of the albums array contains the following properties:

Property Description
albumId The unique id of the album.
albumTitle The name of the album given by the user.
photoUrl The url of the photo to use as album cover in original size.
thumbUrl The url of the generated thumbnail for the album cover image.
albumNumPhotos The total amount of images inside the album.
  • Found the plugin not useful on 19 Aug, 2017

    Signin seems not to be working anymore. Any updates in plan to fix this? :)

  • author

    Replied on 20 Aug, 2017

    As stated in the prerequisites paragraph of the installation section, you have to create an OAuth app in Google API console and whitelist the callback route for your(s) site(s).

    If you don't follow these steps, you will get a 404 when clicking on the sign in button. The OAuth app that is shipped with the plugin is for testing and only works if the callback route points to localhost.

    If you need support, please use the plugin support on GitHub instead of the plugin reviews

  • Found the plugin useful on 9 Aug, 2017

    Nice plugin and nice documentation, thanks!

1.1.0

!!! Rename plugin into GooglePhotos

Aug 08, 2017

1.0.1

First version of googleimages

Aug 08, 2017