How to embed a Google Photo album into your site using an animation
This article is addressed to orphans of Picasa Web Album and its practical function to put an album slideshow in a web page, not to mention the useful filter for Drupal and CKEditor that with a special tag allowed you to embed a specified album without using HTML. Google Photo has replaced this service and does not allow it anymore, but with several steps you can create an animation that can be easily embedded. Let's see how.
Starting from may 2016, Picasa1 was stopped and the collected photos were moved to Google Photo, a new service with less features but with an interface more easy to use. Among all the functions, there was one that I had started to use just before the service was closed: the embedding. I just wanted to share some photos without keeping physically in my website (to save bandwith and space!). I liked very much the slideshow effect and the possibility to incorporate it in my website.
Besides in Drupal 7 there was a fantastic module (Picasa Slideshow Input Filter) that provides an input filter to add a Picasa Webalbum slideshow anywhere, in this manner:
where the number was the id of the webalbum in Picasa.
I had tried for a while to embed my album in Google Photos through the use of iframe and the shareable link of the album but the result is always a gray screen.
After googling I found two tips that helped me alot:
- If You Have Used Embedded Slideshows from Picasa Web Albums, You Need To Read This;
- Embedding videos from google photo into posts.
Mixing them I have obtained a satisfying solution for me that I want to share with you.
Compared to the albums shared with Picasa, there are some restrictions that it is better to highlight:
- 50 photos maximum;
- this is only a gif animation, not a real slideshow;
- the animation delay (750 ms) is fixed and you need to change it manually using external software or other webapps.
Probably it is not the only one, but if you want to create a simple animation that rapresent a series of photos like a slideshow, you can do so:
- in Google Photo select the photos;
- create the animation with them;
- open the animation in Google Drive and create a public link;
- open the link in a new window;
- click on the "Embed item" in the menu at the top right of the screen;
- copy the code and paste it in the HTML source or by your editor using the source button.
In the gallery below I summed up the process with some screenshots.
- 1Picasa was an image organizer and image viewer for organizing and editing digital photos, plus an integrated photo-sharing website, originally created by a company named Lifescape (which at that time may have resided at Idealab) in 2002. In July 2004, Google acquired Picasa from Lifescape and began offering it as freeware. "Picasa" is a blend of the name of Spanish painter Pablo Picasso, the phrase mi casa (Spanish for "my house") and "pic" for pictures. Picasa. (2017, January 26). In Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/w/index.php?title=Picasa&oldid=762141171