Entradas sobre "media":

Utilizar javascript o CSS en el admin de Django

Es realmente sencillo utilizar javascript o CSS propio en el sitio de administración de nuestro proyecto Django. Para ello podemos añadir en nuestros ModelAdmin los archivos JS o CSS que necesitemos utilizando la clase Media en los modelos de administración. Aquí tenemos un ejemplo:

from django.db import models
from django.contrib import admin

from myapp.hotels.models import Modelo

class ModeloAdmin(admin.ModelAdmin):
    ...
    class Media:
        css = { "all": ("mis_estilos.css",) }
        js = ("/media/javascript/mi_javascript.js",)

admin.site.register(Modelo, ModeloAdmin)

Como el admin de Django utiliza jQuery podemos utilizar la función $(document).ready() de jQuery para que nuestro javascript se ejecute cuando el DOM se haya terminado de cargar. De esta forma nuestro archivo mi_javascript.js quedaría de la siguiente manera:

(function($) {
    $(document).ready(function($) {
         // aquí podemos utilizar jquery / javascript...
         alert('¡Ha funcionado!');
    });
})(django.jQuery);

Publicado por Antonio Melé el Jueves 13 de Octubre de 2011 | 1 comentario | Categorías: admin, javascript, media

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>

Publicado por Antonio Melé el Viernes 22 de Mayo de 2009 | 1 comentario | Categorías: media, settings, templatetags, trucos

Feed RSS

Suscríbete a nuestro feed RSS y al feed de la comunidad para estar al tanto de todo lo que ocurre entorno a Django.

Proyectos

django-thumbs te permite crear miniaturas de imágenes con Django.

Escribe en el blog

Tú también puedes escribir en éste blog. Para hacerlo basta con que nos digas sobre qué quieres escribir un artículo relacionado con Django.

Entradas sobre "media":

Utilizar javascript o CSS en el admin de Django

Expires headers lejanos y versiones de media

Feed RSS

Proyectos

Categorías

Escribe en el blog

Lo más leído

Recomendado