Photo gallery on Django using Google Picasa as a hosting

Hi habraedi.

In this post I want to share the experience of organizing a photo gallery on my website using Google Picasa as a photo repository. A similar solution for php has already been on Habré , here is the implementation on Django. Who is interested in this topic, welcome.
')


Some time ago, I attended to the choice of the engine for organizing a photo gallery on my website. The requirements were quite simple: organizing photos into albums, showing the entire gallery as thumbnails of albums, as well as photos in albums.

For those who do not want to read further, the result is immediately ready .

Introduction

There are a lot of ready-made galleries for Django, for example, it’s worth a look here . In this photo, thumbnails, created caches are stored on our server, the proposed method uses the same Google server for all the black work, thereby reducing the load and saving space on ours. Immediately I’ll make a reservation that I didn’t carry out any load and other tests, which allows me to be trashed for unfounded words about improving performance, etc.

Google Picasa, like many Google products, has its own API, which can be found in detail in the documentation .
What we need:

• Google Data Python Client Library Google Data API Python Client
• prettyPhoto jQuery engine to display our pho

Application Description

Let us turn to the description of our picasagallery application. The basis of the application will be two views (views), and templates for them.
First, we define two functions that return a list of albums and photos in the album, respectively:

from gdata.photos.service import PhotosService def get_albums(): pws = PhotosService() uf = pws.GetUserFeed(user = settings.PICASAGALLERY_USER) feed = '{uri}&thumbsize={thumbsize}'.format( uri = uf.GetAlbumsUri(), thumbsize = ALBUM_THUMBSIZE ) print feed return pws.GetFeed(feed).entry def get_photos(album): feed = '{uri}&imgmax={imgmax}&thumbsize={thumbsize}'.format( uri = album.GetPhotosUri(), imgmax = PHOTO_IMGMAXSIZE, thumbsize = PHOTO_THUMBSIZE ) return PhotosService().GetFeed(feed).entry 

It's all very simple (as well as in the future). Probably it is worth commenting on the parameters passed to the request:

• user - username in Picasa;
• thumbsize - thumbnail size of the requested objects, i.e. albums and photos in this case. Available thumbnail sizes can be found in the documentation. Thumbnails can be cropped, i.e. square, and uncropped, for example '160c' or '128u'. You can also specify multiple values ​​separated by commas;
• imgmax - maximum photo size (thanks to cap), i.e. This is the size of the images returned by our get_photos () function.

For convenience, put these settings in settings.py:

 # Picasagallery settings PICASAGALLERY_USER = 'your_email' PICASAGALLERY_PHOTO_THUMBSIZE = '128' PICASAGALLERY_PHOTO_IMGMAXSIZE = '1024' PICASAGALLERY_ALBUM_THUMBSIZE = '160c' 

With the help of django shell you can experiment with this economy:

 >>> from picasagallery.utils import get_albums, get_photos >>> my_first_album = get_albums()[0] >>> print my_first_album.title.text #   >>> print my_first_album.media.thumbnail[0].url # url    https://lh3.googleusercontent.com/-aWPQC60j9zQ/TwCXlTD6CtE/AAAAAAAAAJk/E90Hu9OPiyg/s160-c/FotoLife.jpg >>> my_first_photo = get_photos(my_first_album)[0] >>> print my_first_photo.media.thumbnail[0].url # url     https://lh3.googleusercontent.com/-3Hb7VwUTBNg/TwCXlXqdAQI/AAAAAAAAAH8/v8ecBJtjV6k/s128/261799.jpg >>> print my_first_photo.content.src # url   ,      imgmax 

The my_first_album.media.thumbnail list contains thumbnails of photos, its size is equal to the number of comma-separated values ​​in the thumbsize parameter.

The album thumbnail is the thumbnail of its main photo, by default it is the first photo uploaded to the album, but this can be changed in the album settings on Google Picasa . The ability to change the main photo through the API did not find, if anyone knows, tell me in the comments.

Representation

We define two views for the gallery and album pages, respectively.

 from django.shortcuts import render from django.http import Http404 from picasagallery.utils import get_albums, get_photos def gallery(request): albums = get_albums() return render(request, 'picasagallery/gallery.html', {'albums': albums}) def album_list(request, album_id): for album in get_albums(): if album.gphoto_id.text == album_id: photos = get_photos(album) return render(request, 'picasagallery/album.html', {'photos': photos}) raise Http404() 

Templates

Gallery template:

 {% extends 'base.html' %} {% load extras %} {% load i18n %} {% block head %} <link rel="stylesheet" href="{{ STATIC_URL }}picasagallery/css/base.css" type="text/css" media="screen" charset="utf-8" /> {% endblock %} {% block content %} {% for album in albums %} <div class='album'> <div class='album-head'> <a href="{% url picasagallery.views.album_list album.GetAlbumId %}" > <img class="album-preview" src="{% thumbnail_url album %}"> </a> </div> <div class="album-name"> <a href="{% url picasagallery.views.album_list album.GetAlbumId %}">{{ album.title.text }}</a> </div> </div> {% endfor %} <p> <a href="/media/picasa_gdata.zip">{% trans 'Download source' %}</a> </p> {% endblock %} 

Template for the album:

 {% extends 'base.html' %} {% load extras %} {% load i18n %} {% block head %} {% include 'picasagallery/pphoto.html' %} <link rel="stylesheet" href="{{ STATIC_URL }}picasagallery/css/base.css" type="text/css" media="screen" charset="utf-8" /> {% endblock %} {% block content %} <a href='{% url picasagallery.views.gallery %}' >{% trans "Back to gallery" %}</a> <p>{% trans "Album:" %} {{ album.title.text }}</p> <div class='gallery'> {% for photo in photos %} <div class='image-preview-div'> <a class='image-preview-link' style='{% thumbnail_style photo %}' rel='gallery-image[pp_gal]' href='{{ photo.content.src }}'> <img class='image-preview-img' style='{% thumbnail_style photo %}' src='{% thumbnail_url photo %}'> </a> </div> {% endfor %} <p> <a href='{{ album.GetHtmlLink.href }}' target='_blank'>{% trans "Show in Google Picasa" %}</a> </p> </div> {% endblock %} 

To get the url of album thumbnails and photos, these templates use the thumbnail_url tag, which returns the url of the first thumbnail from the list. It also uses the thumbnail_style tag, which returns a string of the form 'width: 48; height: 48; ' for use as an argument for

 <img ... /> 

These tags will be defined in the extras.py file of the templatetags folder:

 from django.template import Library register = Library() def get_thumbnail(obj): return obj.media.thumbnail[0] @register.simple_tag def thumbnail_url(obj): return get_thumbnail(obj).url @register.simple_tag def thumbnail_style(obj): thumb = get_thumbnail(obj) return 'width: %spx; height: %spx;' % (thumb.width, thumb.height) 

The template for the album contains the code for the prettyPhoto connection:

 {% include 'picasagallery/pphoto.html' %} 

At this moment I will not dwell in detail, who are interested, you can look at the source code .

Well, in conclusion, what came of it , and the same thing here .

Thanks for attention.