Personal tools
You are here: Home Продукты Руководство по работе с продуктом smartimage
Document Actions

Руководство по работе с продуктом smartimage

by cray last modified 2007-10-15 13:43

Компания "Ключевые решения" рада сообщить, что вышла первая официальная публичная версия продуктка ks.smartimage-1.1.3.experimental, которая доступна тут: http://code.keysolutions.ru/svn/ks.smartimage/tags/1.1.3.experimental/ . Ее основное отличие от предыдущих версий не только в том, что она официально опубликована, но и в том, что теперь продукт стал "самодостаточным" - т.е. нет необходимости дополнительного программирования для использования smartimage после установки, в то же время, некоторые базовые классы, использовавшиеся ранее для такой работы убраны из продукта.

Продукт ks.smartimage :

Введение:

Ни один сайт, претендующий хоть на какую-то симпатичность и популярность не может обойтись без изображений и работы с ними. При работе часто возникают ситуации, когда одно и то же изображение, в зависимости от контекста, представляется в некотором специальном масштабе. Облегчить решение этой задачи призван продукт smartimage, обеспечивающий масштабирование и хранение отмасштабированных изображений.

Состав:

Продукт состоит из утилиты SmartImageCache, выполняющей масштабирование и сохранение отмасштабированных изображений. Утилита получает изображения несколькими путями:

  1. ловушкой, в которую попадают все изображения, обладающие интерфейсом ks.smartimage.interfaces.ISmartImage;
  2. в момент запроса отмасштабированного изображения: если оно устарело, исходное изображение находится по идентификатору;
  3. прямой передачей исходного изображения: если его нет в кеше отмасштабированных изображений, оно масштабируется;

Благодаря последнему пути, даже частичная потеря кеша не приведет к нарушению работы сайта, а ловушка обеспечит масштабирование изображения в момент размещения - т.е. в то время, когда сайт наименее всего нагружен.

Вторая часть продукта позволяет с минимальными усилями по любому данному изображению сгенерировать или извлечь из кеша изображение специального вида (отмасштабированное и преобразованное). Эта возможность обеспечивается двумя инструментами:

  • Адаптером, применяемым к изображению, чтобы получить интерфейс, соответствующий изображению, размещенному в хранилище, и позволяющему для этого изображения выполнить ряд операций, таких как:
    • сгененерировать URL'ы для получения изображения (которые могут быть разного вида);
    • сгенерировать код вызова изображения (с участием разных параметров).

Разработчики скинов могу написать свой вид для этого интерфейса, чтобы отображать изображение на сайте каким-то специальным образом;

  • Адаптер, позволяющий вызвать кешированное изображение. Существуют два таких адаптера:
    • адаптер, применимый к любому объекту, который предназначен, на самом деле, для того чтобы вызывать изображение каким-то независимым способом (например, от корня);
    • адаптер действующий от текущего изображения.

Последний способ значительно проще в использовании, тогда как первый дает возможность точной настройки процедур кеширования изображений так, чтобы минимизировать (или вообще исключить) обращения к Zope за ними.

Данный продукт позволяет незаметно для пользователя подменять оригиналы изображений их смасштабированными копиями. Изображения масштабируются в момент их добавления, редактирования или запросе браузером пользователя. При работе с оригинальным изображением происходит его преобразование к размерам, не превосходящим заданные, после чего результаты этих преобразований сохраняются в кеше для последующего использования.

Принцип действия:

Идея использования продукта проста: создается кеш изображений, при добавлении или изменении изображения оно масштабируется (и преобразуется) ко всем вариантами, перечисленными в кеше. Изображение никогда не запрашивается и не указывается в коде сайта непосредственно. Вместо этого существует специальный универсальный адаптер (или свой собственный, порожденный от базового адаптера).

Установка:

Для установки продукта необходимо выполнить следующую последовательность действий:

  • Установить Python версии не ниже 2.4.4 (http://python.org/download/)';
  • Установить Zope версии не ниже 3.3.1 (http://www.zope.org/Products/);
  • Установить PIL (http://effbot.org/downloads/#Imaging), обратите внимание, что PIL должен быть пересобран с поддержкой интересующих вас форматов и преобразований;
  • Взять исходники продукта smartimage по адресу http://code.keysolutions.ru/svn/ks.smartimage/tags/1.1.3.experimental/;
  • скопировать папку с продуктом в ZOPE_INSTANCE/lib/python/ks
  • скопировать файл smartimage-configure.zcml из папки etc продукта в папку ZOPE_INSTANCE/etc/package-includes

Продукт установлен. Для его использования осталось произвести лишь небольшую настройку: создать пару объектов в Zope.

Эти объекты - собственно IIntIds (который скорее всего у вас уже создан) и, собственно, SmartImageCache. Предополагая, что читатель - достаточно подготовленный разработчик Zope3 - будем краткими:

Создание IIntIds
Следует войти в сайт-менеджер, для которого вы хотите использовать SmartImageCache, создать в нем продукт IntIds (zope.app.intid.IntIds), называемый также "Unique Id Utility" и зарегистрировать ее c пустым именем и интерфейсом zope.app.intid.interfaces.IIntIds. Все эти действия должны быть проделаны до размещения каких-либо объектов.
Создание SmartImageCache
Следует войти в сайт-менеджер сайта, для которого вы хотите использовать SmartImageCache, создать в нем продукт SmartImageCache и зарегестрировать его под произвольным именем и интерфейсом ks.smartimage.smartimagecache.interfaces.ISmartImageProp. Создание множественных утилит для одного сайта на данном этапе развития продукта не рекомендуется.

Продукт SmartImageCache имеет три вкладки:

Edit
настройки под конкретный сайт;
Stat
статистика кеша (в текущей версии отключена);
Contents
здесь хранится содержимое кеша;

На самом деле, единственная страница, которая действительно может быть вам полезна это страница Edit (настройка).

Настройка:

Самый лучший способ описать настройку - сделать это на конкретном примере. Рассмотрим вариант настройки smartcacheimage для преобразования изображений в формат jpeg двух типоразмеров: размером не более 100x160 (будем ссылаться на них как на small) и не более 200x320 (будем ссылаться на них как на big).

Указанные имена big и small, о которых идёт речь выше, будут необходимы для использования в коде скина сайта при выборе того или иного типоразмера изображений.

Зайдите в форму Edit продукта SmartImage. На форме, расположенной на странице нажмите дважды на кнопку "Add Scales" и заполните появившиеся поля следующим образом:

Scale
(первый типоразмер),
Name
small (это имя типоразмера),
Image width
100 (это ширина типоразмера),
Image height
160 (это высота типоразмера),
Scale
(второй типоразмер, смысл полей аналогичен),
Name
big,
Image width
200,
Image height
320,

Остальные поля формы оставьте без изменений (их смысл будет изложен в приложении), и нажмите "Change", чтобы сохранить настройки.

Проверим, правильность наших настроек: где-то на сайте создайте картинку SmartImage и зайдите в кеш (содержимое) только что созданного продукта SmartImageCache. Там должны появится два объекта типа Image, с именами примерно small-478079686 и big-478079686, размеры которых соответствуют типоразмерам small и big соответсвенно.

Пример кодирования в скине:

Хороший пример кодирования (главное, достаточно полный), содержится в файле smartimage_sample.pt, вы можете воспользоваться им, если создадите в папке Zope объект SmartImage с именем sample, а потом там же создадите объект "ZPT Page", в содержимое которого положите smartimage_sample.pt. Другой вариант кодирования - smartimage_sample_eval.py - показывает, как использовать более продвинутые возможности адаптера (например, сделать цикл по всем типоразмерам).

Здесь же будут прокомментированы только типовые способы использования.

Пример 1 :

            <tal:block 
                tal:content="context/sample/@@smartimageselect/small/url"
                />

Эта строчка даст url для отображения изображения.

Пример 2 :

            <tal:block 
                tal:content="structure context/sample/@@smartimageselect/small/tag"
                />

Эта строчка даст уже заполненный тег > для отображения изображения с URL'ом из примера 1.

Немного о URL:

URL изображения может строится в двух формах: контекстно-зависимой и контекстно-независимой. Выбор формы определяется настройками параметров "Use Base Path" и "Base Path" утилиты кеширования. В контексно-зависимой форме URL строится от текущего объекта, что может быть не очень удобно с точки зрения кеширования. В контекстно-независимой форме URL строится от любого объекта, но с указанием его уникального идентификатора в базе. Контекстно- независимая форма включается флагом "Use Base Path", а содержимое параметра "Base Path" будет использовано в качестве пути к корневому объекту в URL. Приведем примеры:

Пусть рисунок лежит в :

                /++skin++Basic/Root/Sample/sample;

Пусть Base Path :

                /Root

Тогда, контекстно-независимый URL :

               /Root/@@smartimagebyid/580034874/small/get

А контекстно-зависимый URL :

               /Root/Sample/sample/@@smartimagecontainer/small/get

Помните, URL-ы составляются автоматически, командами из примера 1 и 2, выбор между контсекстно зависимым и независимым URL должен оставаться прерогативой администратора и делатся тольк за счет переключателей в настройках утилиты SmartImageCache.

Использование smartimage в интерфейсах:

Крайне полезно бывает использование полей с рисунками в интерфейсах объектов. Для рисунков smartimage создано специальное поле и два виджета к нему: только для чтения и с возможностью редактирования. Использование поля в интерефейсе потребует от вас примерно такого кода:

            from ks.smartimage.smartimageschema.smartimagefield import SmartImage

            class IDocumentLogo(Interface):

                logo = SmartImage(title = _(u"Logo"),
                      description = _(u"Logo"),
                      required = False,
                      )

И обычной регистрации страницы в zcml:

            <editform
              schema="..interfaces.IDocumentLogo"
              for="..interfaces.IDocumentLogo"
              label="Logo edit"
              name="logoedit.html"
              permission="logo.Edit"
              />

После этого вы можете вызвать в контексте объекта с интерфейсом IDocumentLogo страницу logoedit.html и увидеть поле редактирования картинки smartimage, содержащее четыре поля:

Data
Выбор файла изображения;
Title
Выбор названия;
Content Type
Выбор MIME-типа. Обычно данное поле заполняется правильным значением автоматически.
Clear Data
флаг очистки изображения (по умолчанию, изображение сделано так, что при загрузке пустого файла не происходит замещения старого изображения, что очень удобно при использовании в интерфейсах с множеством полей, однако если старое изображение надо все-таки стереть, то это можно сделать, отметив при сохранении это флаг).

Если изображение загружено, то оно отображается сверху над формой редактирования. То, какой типоразмер будет отображатся, выбирается либо параметром "Default Scale" утилиты SmartImageCache (рекомендуемый способ), либо указанием параметра "scale" в определении поля типа SmartImage.

Если поле имеет режим readonly, то используется виджет только для чтения, следующий тем же соглашениям о типоразмере виджета.

Для виджета также действуют два режима отображения: контекстно- зависимый и нет. Но, кроме этого, виджет будет нормальн работать даже в отсутствии утилиты SmartImageCache вообще: в этом случае будет показываться исходное изображение без участия кеша.

Заключение:

Продукт smartimagecache не является панацеей, он просто хорошо решает одну простую задачу: масштабировать изображения и делать это только один раз. Его использование на самом деле необходимо почти на любом сайте, содержащем изображения, хотя не для любого сайта он подойдет. Основное требование пригодности этого решения - вы имеете достаточно много изображений и все они отображаются на сайте с использованием одного и того же (относительно небольшого) списка типоразмеров. Как только это правило перестаёт соблюдаться (например, появляется редко используемый типоразмер), использование smartimagecache начинает приводить к излишнему расходу ресурсов (вместо их экономии).

Приложение A: Полный список опций настройки SmartImageCache

Image Mode
(RGB) цветовая модель изображения, используемого PIL'ом, смотрите описание там (или в учебнике по преобразованиям изображений);
Image Format
(JPEG) формат изображения, которое будет сгененрено PIL'ом, обратите внимание, не все цветовые модели существуют для конкретного формата. Подробное описание, опять же, в PIL;
Max Image Resize Ratio
(100) максимальное масштабирование, которое может быть сделано. При его превышении при попытке сохранения соответствующего изображения возникнет исключение и сообщение об ошибке. Хотя по умолчанию указано 100, на самом деле, рекомендуется значение не более 2 - 5, чтобы исключить дикий расход ресурсов сайта загрузкой изображений типографского качества;
Use cache headers
(Истинно) использовать заголовки кеширования. Если установлено - то при отдаче откешированного изображения стандартным способом будут использованы заголовки кеширования, позволяющие управлять рекомендуемой продолжительностью кеширования;
Cache interval in seconds
(900) если выбрана опция "Use cache headers", то изображение будет кешироваться (в браузерах и промежуточных кешах) в течении этого интервала;
Quality of Conversion
(90) качество преобразования изображения. Рекомендуется подбирать опытным путем (чем выше качество, тем выше размер). Данная опция работает не для всех цветовых моделей и форматов (см. доки на PIL);
Resample Type
(Antialias), возможны также None (никакого), Bilinear, Bicubic (подробности см. в доках на PIL);
Base Path
(), базовый путь при выборе контекстно-независимого URL'а изображения;
Use Base Path
(Ложно), использовать контекстно-независимый URL изображения;

Использованные в приложении настройки по умолчанию не являются оптимальными, но почти всегда работают. В действительности, вдумчивая настройка указанных параметров требемым образом под ваш случай крайне рекомендуется.

Приложение Б: Полное описание интерфейсов адаптеров изображений

Приложение В: Планы на будущее

  1. Изучить вопрос с использованием нескольких SmartImageCache, может в этом есть смысл?
  2. Изучить вопрос с возможностью указания отдельного хранилища для отмасштабированных изображний, может быть имеет смысл хранить их на диске?
  3. Изучить вопрос с IntIds - на самом указание специального имени не должно быть требованием к настройке;

Приложение Г: Что никогда не надо делать

  1. Создавать несколько утилит smartimagecache одновременно. Поведение в этом случае не определено и никогда не продумывалось;
  2. Входить во вкладку contents утилиты smartimagecache -- там могут быть тысячи объектов и это потребует времени;

Powered by Plone CMS, the Open Source Content Management System