Sep 202014
 

Add Google Photos Using WP Photonic Plugin shows you how to setup Google photos in your site to display your albums, photos and more.

Last Updated: June 20, 2020

Latest News: Updated the documentation.

The following instructions shows  you how to add Google photos or albums into your post or pages in your WordPress site. These steps are very easy to follow. I have also included an error message that some of you might run into when you first setup your Google API in your Google account.

Important: If you are reading this tutorial is because you have a Google account set up.

What You Need:

Add Google Photos Using WP Photonic Plugin

Step 1 ) If you see the following error message, it means you have not yet enabled photos library API in your Google account.

1-add-google-photos-using-wp-photonic-plugin-error-message

Step 2 ) Visit the link shared above and click on Enable button as illustrated in the image below.

2-enable-google-photos-library-api-using-wp-photonic-plugin

Step 3 ) The following image shows you Photos Library API enabled. You can choose to disable the API when ever you want. It also allows you to view the following settings/options in your Google account.

Photos Library API

  • Overview
  • Metrics
  • Quotas
  • Credentials

3-enabled-google-photos-library-api-using-wp-photonic-plugin

Step 4 ) Before you begin adding photos and albums to your site, check your photos and albums in your Google account first. While you are still logged into your Google account from carrying out the steps above, click on Photos app as illustrated in the image below. This can be found in Google Chrome browser.

4-google-photos-app-using-wp-photonic-plugin

Start Adding Google Photos / Albums

Step 5 ) Click on Add / Edit Photonic Gallery button as illustrated in the image below to start the process of adding photos to your post.

5-add-google-photos-using-wp-photonic-add-media-button

Step 6 ) Click on Google Photos button and then click on Next button as illustrated in the image below.

6-click-google-photos-tab-wp-photonic

Step 7 ) The following image Choose Type Of Gallery allows you to choose the type of gallery you want to use to display your photos or albums.

7-google-photos-type-of-gallery-wp-photonic

Step 8 ) The following image Pick your album allows you to choose the album you want to share in your site.

Note: This option is displayed because on the previous step above Photos from an Album was selected.

8-pick-album-google-photos-wp-photonic

Step 9 ) The following image Pick Your Layout allows you to choose the layout you want to use to display your photos.  The are many different layouts you can choose from. It is up to you to select the best one for your site. Below is a list of layouts for you to choose from.

Note: You can also configure this settings in Photonic -> Settings -> Generic Options -> Generic Settings -> Layouts.

Available Layouts

  • Square Grid
  • Circular Icon Grid
  • Justified Grid
  • Masonry
  • Mosaic
  • Slideshow

9-pick-layout-google-photos-wp-photonic

Step 10 ) The following image Configure Your Layout allows you to setup your layout options. The following is list of layout features for you to play with. Make sure you keep viewing the outcome before you make a final decision. 

Layout Configuration Options

  • Number of columns in output
  • How do you want the title?
  • Number of photos to show
  • “More” button text
  • “Show Gallery” button text
  • Main image size
  • Thumbnail size
  • Crop Thumbnail
  • Media to Show
  • Photo titles and captions

10-configure-layout-google-photos-wp-photonic

Step 11 ) The following image Your shortcode displays the shortcode created by Photonic based on the previous step configuration options. 

Click on Insert Gallery button as illustrated in the image below and the shortcode will be inserted into your post.

11-insert-google-photos-shortcode-wp-photonic

Step 12 ) The following image displays two images from an album in the post.

12-google-photos-displayed-wp-photonic

Troubleshooting Tips

Q1 I am using classic mode, I added a custom parameter “gallery” to the shortcode and I see the following error message. How do I fix this?

“There are no photos with those IDs or post 1151 does not have any attached images!”

Answer: That’s because another plugin is using the gallery shortcode parameter and is preventing a display of Photonic’s gallery. Change the custom shortcode to something like photonic and use that for your gallery. Check the following forum post for more information.

=========================================

That is how simple it is to share your Google Photos albums or photos in your WordPress site.

I will be updating this tutorial from time to time. So keep coming back for the latest update.

If you have any question please let me know.

Enjoy.

Photonic Plugin Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

  6 Responses to “Add Google Photos Using WP Photonic Plugin”

  1. I don’t understand the instructions. I don’t understand what adding shortcode to a page is, nor what a slug is.

  2. Hi Manuel,

    Thanks for the excellent tutorial – I found it to be very clear. MY problem, however, is that the album I am trying pull photos from has been converted to Google+. The album slug is now a numeric string but the bigger problem is probably that the root is not PicasaWeb but plus.google.com. I tried putting the numeric slug into the shortcode but it didn’t work; neither did using the full path. I would be grateful for any suggestions you might have.

    Theron

  3. Manuel, before I consider using Photonic again, I’d like to know if alums still must be set to ‘public’? If so, do you know if there are any plans to change this so that you can include an authkey and have acess to albums with limited access?

Leave a Reply to Theron Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)