Entradas sobre "templatetags":

oEmbed y Django: incrusta contenidos de servicios web con django-oembed

oEmbed es un formato que permite usar una representación embebida de una URL en sitios web de terceros. La API de oEmbed permite a un sitio web incrustar contenido (como fotos o vídeos) de otros servicios web simplemente con un enlace al recurso que quiere se publicar. De esta forma se evita tener que utilizar una API distinta para incrustar contenidos de cada servicio web. Varios sitios como Flickr, Viddler, Qik, Hulu o Vimeo permiten acceder a sus contenidos mediante oEmbed. Además el sitio web oohEmbed sirve como wrapper para acceder a contenidos de otros sitios como YouTube, Wikipedia ó Wordpress.com entre otros.

Por ejemplo, la URL http://www.flickr.com/services/oembed?url=http://www.flickr.com/photos/ccgd/107274692/ devuelve el XML:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<oembed>
    <version>1.0</version>
    <type>photo</type>
    <title>Trees Snow and Shadows</title>
    <author_name>ccgd</author_name>
    <author_url>http://www.flickr.com/photos/ccgd/</author_url>
    <cache_age>3600</cache_age>
    <provider_name>Flickr</provider_name>
    <provider_url>http://www.flickr.com/</provider_url>
    <width>500</width>
    <height>363</height>
    <url>http://farm1.static.flickr.com/44/107274692_c6c32bba58.jpg</url>
</oembed>

Si preferimos recibirlo en formato JSON basta con añadir el parámetro format=json a la misma URL.

Django-oembed es una aplicación que facilita transformar los enlaces a estos servicios que aparecen en el texto introducido por nuestros usuarios en el contenido embebido al que enlazan (vídeos, imágenes, etc.). De esta forma cuando un usuario enlaza a una imagen de Flickr ó un vídeo de Viddler podemos incluirlos directamente.

Para utilizar django-oembed basta con seguir los siguientes pasos:

1. Descargamos django-oembed e incluimos 'oembed' en el setting INSTALLED_APPS de nuestro settings.py

2. En la plantilla que queramos utilizar django-oembed para incrustar los contenidos enlazados cargamos los tags de oEmbed:

   {% load oembed_tags %}
   

3. Utilizamos el tag oembed para reemplazar las URLs con enlaces de sitios que soportan oEmbed por los contenidos a los que éstos apuntan:

   {% oembed %}
      Una foto muy buena: http://www.flickr.com/photos/ccgd/107274692/
   {% endoembed %}
   

4. Opcional: Algunos recursos soportan definir un ancho y alto concreto para el contenido a incrustar. Basta con definirlo en el tag oEmbed de la siguiente manera:

   {% oembed 320x240 %} ...URL con contenido... {% endoembed %}
   

Templatetag {% if %} con más comparaciones

Este snippet reemplaza la funcionalidad del templatetag {% if %} permitiendo realizar comparaciones con operadores >, <, >=, <=, != además de las comparaciones que permite hacer {% if %} por defecto. Por ejemplo una comparación con el operador mayor-igual-que para mostrar algo si hay más de 5 artículos sería:

{% if articulos|length >= 5 %} ... {% endif %}

Para utilizarlo en nuestro proyecto nos basta con seguir los siguientes pasos:

1. Descargamos smart_if desde djangosnippets.
2. Lo guardamos como smart_if.py en la carpeta templatetags de alguna de las aplicaciones de nuestro proyecto.
3. Añadimos el tag {% load smartif %} en las plantillas que queramos utilizarlo y listo.

También hay otro snippet, elif for smart if tag, que permite utilizar el tag {% elif %} para realizar otras comparaciones dentro de un bucle if con nuestro tag smart_if. Este snippet incluye sólo la función smart_if para que la reemplacemos en nuestro smart_if.py original.

Expires headers lejanos y versiones de media

Un buen truco para mejorar el tiempo de carga de nuestras páginas es añadir a los archivos de media (imágenes, css, js) el header Expires (ver headers de HTML) con una fecha lejana (por ejemplo un año de diferencia). Este header define cuándo expira el archivo, es decir, hasta cuando el navegador puede considerar la respuesta del archivo válida. Esto significa que cuando el navegador descarga un archivo con header Expires puede almacenarlo en caché y utilizarlo sin tener que volver a descargarlo otra vez cuando el usuario visite de nuevo el sitio web, hasta que llegue la fecha descrita en el header Expires.

Utilizar un header Expires lejano nos ahorrará tráfico y disminuirá el tiempo de carga de nuestro sitio web para aquellos usuarios que nos vuelven a visitar. El problema se nos presenta cuando modificamos alguno de los archivos de media: Los navegadores de muchos visitantes seguirán utilizando los archivos almacenados en caché en vez de los nuevos. Para solucionar este problema conviene utilizar versiones en nuestros archivos de media.

Podríamos renombrar los archivos de media cada vez que los modificáramos, pero tendríamos que hacerlo a su vez en las plantillas que los utilizan. Por ello vamos a utilizar otro método que consiste en añadir un parámetro de versión a todos los archivos media independientemente de cuando hayan sido modificados. Vamos a crear un templatetag que nos permita cambiar de versión fácilmente y sin necesidad de renombrar nuestros archivos.

Dentro de la carpeta templatetags de nuestar aplicación añadimos un archivo media.py con el siguiente contenido:

from django.conf import settings
from django import template

register = template.Library()

def media_url(url):
    return '%s%s?%s' % (settings.MEDIA_URL, url, settings.MEDIA_VERSION)

register.simple_tag(media_url)

En este archivo hemos definido el templatetag media_url. Nuestro templatetag utiliza el setting MEDIA_URL, una URL que recibe como argumento y el setting MEDIA_VERSION para generar una URL del tipo http://misitio.com/media/base.css?001. Debemos editar el settings.py de nuestro proyecto para añadir el setting MEDIA_VERSION con el que llevaremos el control de versiones de media. De esta forma nuestro settings.py incluirá tanto MEDIA_URL como MEDIA_VERSION definiendo la URL de media de nuestro proyecto como la versión actual de nuestros archivos de media:

# ...
MEDIA_URL = 'http://misitio.com/media/'
MEDIA_VERSION = '001'

Cuando modifiquemos alguno de los archivos de media bastará con modificar el setting MEDIA_VERSION para que los navegadores no sigan utilizando la versión de los archivos que mantienen caché.

En nuestras plantillas bastará con utilizar el templatetag que hemos creado cada vez que necesitemos incluir una URL de media:

<html>
    <head>
        {% load media %}
        <link rel="stylesheet" href="{% media_url 'css/base.css' %}" type="text/css" />
    </head>
    ...
</html>

Templatetags globales en nuestros proyectos Django

Los templatetags de Django son a nivel de aplicación. Sin embargo a veces nos gustaría que distintas aplicaciones compartieran templatetags ó evitarnos tener que cargarlos en todas las plantillas mediante {% load ... %}.

Este sencillo snippet muestra cómo registrar templatetags de modo global para todo el proyecto gracias a la función add_to_builtins de django.template.

Para crear templatetags globales haremos lo siguiente:

1. Creamos un directorio en el que copiamos todos los templatetags que queramos utilizar de forma global (en sus archivos .py correspondientes). Por ejemplo un directorio globaltags/.

2. Añadimos al directorio un archivo __init__.py en el que cargamos los templatetags que queramos a nivel global de la siguiente manera:

   from django.template import add_to_builtins
   
   add_to_builtins('globaltags.mi_template_tag_1')
   add_to_builtins('globaltags.mi_template_tag_2')
   

3. Añadimos dicho directorio al setting INSTALLED_APPS como si se tratara de una aplicación más instalada en nuestro proyecto.

Siguiendo estos pasos podemos utilizar en cualquier plantilla los templatetags que hayamos registrado globalmente y sin tener que cargarlos mediante {% load ... %}.