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.
- 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
This plugin comes with an OAuth client application that will only work on
localhostto allow you to test the plugin. Before deploying it on any hostname other than
localhost, you must create your own OAuth app credentials or use existing credentials for the hostname in question (i.e.
Follow these steps to get your credentials: Google documentation. The documentation will say that "the Authorized redirect URI does not require a value", but it is required for this use case. You will need to set the Authorized redirect URI to
example.com/backend with your domain name and backend URL.
When done, you will be given a
Client ID and a
Client Secret, which you will need to provide to the plugin by overriding the configuration file. See the official documentation on doing this. Basically, just copy the file
/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.
By default, Google Photos shows all albums related to your Google account or Google+ profile including automatically generated ones like "Auto Backup" and "Profile Photos". You can hide these albums from the plugin settings by adding as many albums as you want to the "Hidden albums" section. Just click on "Add new item" and fill the field with either an album ID or an album name. 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.
You need to create two CMS pages:
One to display the albums of a single gallery
For this one you need an additional
:albumId routing parameter in the URL of the page.
Add the Google Photos album component and in the component settings set the
Album ID property to the name of the routing parameter you setup for this page (i.e.
One to display all galleries
Add the Google Photos albums list component to this page, setting the
Album Page parameter to the page you created for the albums of a single gallery.
Please use GitHub Issues to report any issues with this plugin.
Reviews should not be used for getting support or reporting bugs, if you need support please use the Plugin support link.
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:
|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||Both||To which dimension of each image should apply the
|Square crop thumbnails||Both||If true, generated thumbnails will have a 1:1 ratio. If false, images will be resized according to the
When overriding the component views, the following properties are available from Twig:
In the GooglePhotosAlbum component:
|images||An array of images contained inside the album (see table below for details).|
|albumTitle||The actual name of the album being displayed.|
Each entry of the
images array contains the following properties:
|photoTitle||The title of the photo given by the user.|
|photoUrl||The url of the photo in original size. In the case of a video, this is the url of the best resolution stream|
|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.|
|type||The element type, can be
|streams||Only available if
Each entry of the
streams array (for videos) contains the following properties:
|url||The url of the video stream|
|height||The height in px of the target|
|width||The width in px of the target|
|contentType||The MIME type of the target|
In the GooglePhotosAlbums component:
|albums||An array of albums from the account (see table below for details).|
Each entry of the
albums array contains the following properties:
|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.|
|type||The element type, will always be
Found the plugin useful on 9 Aug, 2017
Nice plugin and nice documentation, thanks!
Use deprecation extension for the api
Jan 18, 2019
Fix an error on the single album snippet
Jan 18, 2018
Fix an error on albums list when caching is enabled
Oct 09, 2017
Add support for videos
Oct 09, 2017
Fix single album snippet generating an error on 32bits php
Sep 12, 2017
!!! Rename plugin into GooglePhotos
Aug 08, 2017
First version of googleimages
Aug 08, 2017