Tutorial: Quickstart¶

Prerequisites¶

In order to import and see our basic photo gallery, we need:

The mg library code
PIL to compute thumbnails.

Goals¶

In this tutorial, we’ll create a new django project with minimal setup to import a bunch of photos in a new library. There will be only photos, without hierarchy facility.

This will be done in 5 steps:

Setting up the django project
Import photos
Mapping URLs
Providing templates
Run the server

Setting up the django project¶

Create the project¶

Let’s create a django project, the usual way:

user@host workdir $ django-admin.py startproject quickstart
user@host workdir $ ls
quickstart
user@host workdir $ cd quickstart/
user@host quickstart $ ls
__init__.py manage.py   settings.py urls.py
user@host quickstart $

Let’s proceed.

`settings.py`¶

Let’s tweak settings a little. In your favourite editor, edit settings.py and do the following changes:

At top of file, add a hack to use mg modules (of course, replace “path/to” with a more useful path):

# Django settings for quickstart project.

import sys
import os, os.path

curdir = os.path.dirname(__file__)
# We'll use curdir below

sys.path.insert(0, '/path/to/django-media-library/lib/python')

Edit database settings to use a local sqlite3 db:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME':   'db/db.sqlite3',
    }
}

Change MEDIA_ROOT, MEDIA_URL and ADMIN_MEDIA_PREFIX to:

MEDIA_ROOT = curdir + "/media"
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/admin_media/'

Add some CONTEXT_PROCESSORS, where it pleases you:

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.contrib.auth.context_processors.auth',
    'django.core.context_processors.media',
    'django.core.context_processors.request',
)

Add a local template directory:

TEMPLATE_DIRS = (
  # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
  # Always use forward slashes, even on Windows.
  # Don't forget to use absolute paths, not relative paths.
  curdir + "/templates",
)

Add media gallery applications:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',

    "mg.core.element",
    "mg.media.photo",
)

That’s it, we’re done with settings. Save the file.

Create some directories¶

settings.py references some directories, let’s create them:

user@host quickstart $ ls
__init__.py manage.py   settings.py urls.py
user@host quickstart $ mkdir db templates media
user@host quickstart $ ls
__init__.py db          manage.py   media       settings.py templates   urls.py
user@host quickstart $

`syncdb`¶

Let’s setup the database:

user@host quickstart $ ./manage.py syncdb
...
You just installed Django's auth system, which means you don't have any superusers defined.
Would you like to create one now? (yes/no): yes
...
(this asks you to create a new user, please do it.)
...
Installing index for element.ThumbnailSize model
Installing index for element.Thumbnail model
Installing index for photo.Photo model
Installing index for photo.PhotoSize model
Installing index for photo.ResizedPhoto model
Installing json fixture 'initial_data' from '/Users/nipo/projects/django-media-gallery/lib/python/mg/media/element/fixtures'.
Installing json fixture 'initial_data' from '/Users/nipo/projects/django-media-gallery/lib/python/mg/media/photo/fixtures'.
Installed 4 object(s) from 2 fixture(s)
user@host quickstart $

Here we can see the element and photo applications installed fixtures, they contain default sizes for thumbnails and reduced photo caches.

Setup is now complete, we can import media in the library.

Import photos¶

Let’s say you have some JPEG files lying around in a directory, let’s import them. For this task, there is a custom management command added by the media gallery element application to the manage.py command:

user@host quickstart $ ./manage.py mg_import --help
...

We’ll just import files:

user@host quickstart $ ./manage.py mg_import --files /path/to/*.jpg
Deleted data associated with IMG_1140
 CreateThumbnail
 CreateResizedPhoto
Deleted data associated with IMG_1141
 CreateThumbnail
 CreateResizedPhoto
Deleted data associated with IMG_1142
 CreateThumbnail
 CreateResizedPhoto
Deleted data associated with IMG_1143
 CreateThumbnail
 CreateResizedPhoto
Deleted data associated with IMG_1144
 CreateThumbnail
 CreateResizedPhoto

Here we are, database contains the data. media contains the photos, for all versions:

user@host quickstart $ find media/
media/
media/reduced
media/reduced/IMG_1140_1024x768.jpg
media/reduced/IMG_1140_800x600.jpg
...
media/spool
media/spool/IMG_1140.JPG
...
media/thumbnail
media/thumbnail/IMG_1140_120x120.jpg
media/thumbnail/IMG_1140_200x200.jpg
...

Mapping URLs¶

Let’s edit the urls.py file. We’ll only set two generic views (a list of elements, and a view for each element), plus the static server for media:

from django.conf.urls.defaults import *
from mg.core.element.models import Element
from django.conf import settings

urlpatterns = patterns(
     'django.views.generic.list_detail',

     url(r'^$', 'object_list', dict(
       queryset = Element.objects.all(),
       ),
     ),

     url(r'^(?P<object_id>\d+)/$', 'object_detail', dict(
       queryset = Element.objects.all(),
       ),
     ),
) + patterns(
    'django.views.static',

    url(r'^media/(?P<path>.*)$', 'serve', dict(
       document_root = settings.MEDIA_ROOT,
       )
    ),
)

Providing templates¶

We probably want to make it live online, let’s create some templates for our two views !

`element/element_detail.html`¶

Let’s create its parent directory:

user@host quickstart $ mkdir templates/element

Edit the templates/element/element_detail.html template file and put this inside:

{% extends "base.html" %}
{% load mg_element %}

{% block title %}{{object.name}}{% endblock %}

{% block content %}
<p><a href="/">Back to list</a></p>
{% elem_view object %}
<dl>
 <dt>Name</dt>
 <dd>{{ object.name }}</dd>
 <dt>Timestamp</dt>
 <dd>{{ object.timestamp }}</dd>
</dl>
{% endblock %}

`element/element_list.html`¶

Edit the templates/element/element_list.html template file and put this inside:

{% extends "base.html" %}
{% load mg_element %}

{% block title %}List of elements{% endblock %}

{% block content %}
<p>
  {% for object in object_list %}
  <a href="{{ object.pk }}/">
    {% elem_preview object %}
  </a>
  {% endfor %}
</p>
{% endblock %}

`base.html`¶

As you can see, we factored-out some of our template, we’ll now define the base template file in templates/base.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
    <title>{% block title %}{% endblock %}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 </head>
 <body>
   {% block content %}
   {% endblock %}
 </body>
</html>

Run the server¶

Let’s run the server, and open http://localhost:8000/ :

user@host quickstart $ ./manage.py runserver
Validating models...
0 errors found

Django version 1.2.4, using settings 'quickstart.settings'
Development server is running at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
...

Here we are. This is the end of this tutorial.

What’s next ?¶

You may want to

add the django.contrib.admin to this project to inspect the database. See relevant documentation on django’s website. This could help you perform the following tasks:
- Give the correct rotation to the images (this is done automatically by exif parser, but is sometimes missing)
- Delete some of them
- Change their names
add the CameraInfo model (from EXIF data), see Tutorial: Adding Camera information to galleries.
add some hierarchical models, to sort your media library your way, see Tutorial: Sorting galleries through rolls.

Navigation