Фото-галерея Django(3): Шаблоны, Sorl Thumbnail и prettyPhoto

категория: Django
Для оформления картинок галереи cryptohistory.ru нужны будут пакеты sorl-thumbnail - для обрезки превьюшек - маленького размера квадратные изображения с обрезкой по центру. А для красивого отображения изображений и навигации по ним - prettyPhoto, очень симпатичная оболочка jQuery, сразу понравилась из всех аналогов. Начнем с установки sorl.thumbnail:
pip install sorl-thumbnail
И добавляем в settings.py в INSTALL_APPS:
sorl.thumbnail
Если используем кеширование БД:
python manage.py syncdb
У меня на локальном сервере был установлен форк графической библиотеки PIL - Pillow==2.0.0, выдавало кучу ошибок, пока не подключил Pillow==1.7.8. К применению вернемся чуть позже, когда будем писать шаблоны, а сейчас подключим prettyPhoto. Скачиваем последнюю версию и распихиваем по папкам css, image, js вашего проекта и прописываем в html между тегами head нужные ссылки:
<link rel="stylesheet" href="{{ STATIC_URL }}css/prettyPhoto.css" 
  type="text/css" media="screen" charset="utf-8" />
<script src="{{ STATIC_URL }}js/jquery-1.7.1.min.js" type="text/javascript" 
  charset="utf-8"></script>
<script src="{{ STATIC_URL }}js/jquery.prettyPhoto.js" type="text/javascript" 
  charset="utf-8"></script>
С последней версией jQuery работать не хотело, пришлось поставить по древнее. Далее пишем шаблоны и будем применять установленные пакеты. Начнем с шаблона для отображения альбомов галереи "album.html":
Расширяем родительский шаблон
{% extends 'main.html' %}
*
Подгружаем шаблонные теги sorl.thumbnail
*
{% load thumbnail %}
*
Выводим превьюшки альбомов
*
{% block text %}
    {% for album in my_album %}
        <div class="album">
        <a href='{{ album.slug }}'>
	    *
	    Обрезаем изображения по центру размером 200 на 200
	    *
            {% thumbnail album.img "200x200" crop='center' as im %}
            <img src='{{ im.url }}' alt="{{ im.title }}" width="{{ im.width }}" 
		height="{{ im.height }}">
            {% endthumbnail %}
        </a>
        <p>{{ album.title }}</p>
        </div>
    {% endfor %}
{% endblock %}
*
Небольшой jQuery скриптик для выделения изображений при наведении курсора.
Просто цвет блока становиться белым и появляется название.
*
{% block script %}
    <script type="text/javascript">
    $(document).ready(function(){
        var photo_title = $("div.album p");
        var album = $("div.album");
        photo_title.hide();
        album.hover(
                function(){
                    $(this).css({"backgroundColor":"#fff"});
                    photo_title.show();
                },
                function(){
                    photo_title.hide();
                    $(this).css({"backgroundColor": ""});
                }
        );
    });
    </script>
{% endblock %}
Пишем по аналогии шаблон "photo.html":
{% extends 'main.html' %}
{% load thumbnail %}
{% block text %}
  {% for photo in photos.photo_set.all %}
    <div class="photo">
    *
    Превьюшки режем по центру размером 100 на 100
    *
    {% thumbnail photo.img "100x100" crop='center' as im %}
      *
      Тут подключаем prettyPhoto
      *
      <a href="{{ MEDIA_URL }}{{ photo.img }}" rel="prettyPhoto[pp_gal]">
      <img src='{{ im.url }}' alt="{{ photo.title }}" width="{{ im.width }}" 
              height="{{ im.height }}">
      </a>
    {% endthumbnail %}
    <p>{{ photo.title }}</p>
    </div>
  {% endfor %}
{% endblock %}
До закрывающего тега body прописываем скрипт для выборки фотографии:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
Всю эту "вкуснятину" набиваем стилями CSS и все готово, вроде ничего не пропустил.


blog comments powered by Disqus