→ Teaser Thumbnail - Автоматическая генерация превьюшек для анонса из картинок в теле материала

Эта запись относится к серии How to. Мы настолько привыкли к автоматизации, что банальная картинка в анонсе становится головной болью. Ну хорошо, упростим и автоматизируем сию задачу. Главное поставить цель: уменьшенные картинки в анонсе. Идем искать модуль по словам thumbnail и teaser и … надо же, находим — teaserthumbnail, пробуем…

Из описания к модулю

Модуль Teaser Thumbnail позволяет вам автоматически генерировать превьюшки для анонсов вашего материала и RSS-лент с изображениями, включенными в тело или вложения. Этот модуль зависит от ImageCache 2 и работ с views.

Пробуем…

Берем 5ый друпал (на 6ом у меня не сработал imagecache, да и imageapi не видит библиотеку; достаточно лишь взглянуть в Отчет состояния) и ставим teaserthumbnail-5.x-2.2. Заглянув в папочку этого модуля видим, что он и с views интегрирует — это просто замечательно. На странице модулей обнаруживаем, что ему требуется модуль Imagecache и это не удивительно, должен же кто-то картинки уменьшать и кромсать. С модулем Imagecache я уже работала и сразу могу сказать, что нам потребуется еще и Imageapi, а вот как раз сам Image нам и не потребуется Громкий смех Т.о. мы имеем такой список требуемых модулей:

  1. Teaser Thumbnail
  2. ImageCache (лимит памяти не менее 96 МБ!)
  3. ImageAPI

Включаем модули: ImageAPI, ImageAPI GD2 ИЛИ ImageAPI ImageMagick, ImageCache, Imagecache UI — чтобы можно было настроить размеры превьюшек, и наконец — Teaser Thumbnail.

Настройка

Создание установки ImagecacheДля начала устанавливаем размеры для превьюшек на странице настройки Imagecache UI (admin/build/imagecache) — Add New Preset (т.е. создаем новую установку) и назовем, к примеру, tumba.

Настройка превьюшки для анонсов по умолчаниюИщем в меню Teaser thumbnail (admin/settings/teaserthumbnail) и выбираем какая установка будет по умолчанию.
ВНИМАНИЕ: На этой странице задаются МИНИМАЛЬНЫЕ высота и ширина изображения, которые должны быть использованы как превью. Если вы установили здесь 300х300, а ваша картинка размером 200х200, то она не будет использована как превьюшка.

Включение функции создания превьюшек в настройках типа материалаТеперь переходим в Типы материалов и настраиваем тот, в котором вам нужно превью (да хоть все Улыбка).
Заметьте, что вы можете установить разные установки ImageCache, при настройке Teaser thumbnail для каждого типа материала!

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

Темизация (Оформление)

Теперь вы можете оформить превьюшку так как пожелаете. К примеру сделаем выравнивание картинок в анонсе по правому или левому краю. Модуль ImageCache предоставляет нам такую возможность, добавив к сгенерированному изображению класс = imagecache, таким образом мы можем "выловить" наши превьюшки в тизере и взяться за ее темизирование.

Примеры темизации

Чтобы картинки превьюшек материала отображались слева — добавьте в файл style.css вашей темы следующее:

div.content img.imagecache {
float:left;
margin-right:10px;
}

То же справа:
div.content img.imagecache {
float:right;
margin-left:10px;
}

Есть одно но. Так как создатели модуля imagecache, до сих пор, не могут склеить класс для изображения во что-то целое, то мы имеем примерно следующее imagecache imagecache-tumba. Т.о. если вы настраиваете использование превьюшек для разных типов материала вы не сможете оформить их по разному так как img.imagecache один для всего сайта. Но и это не беда, вы же знаете что делать‽ Если не знаете куда лезть и что править — примените мой патч к модулю imagecache (для imagecache-5.x-2.3) и тогда сможете задавать разное оформление для разных установок imagecache, вот так (tumba — это название моей установки — смените на свое):

div.content img.imagecache-imagecache-tumba {ваш стиль}

Внимание: патч применяется из папки modules, а не из корня.

Напоминаю как применять патч:

patch -p0 < imagecache-5.x-2.3.patch

Ну, и конечно, я сделала для вас Скринкаст из серии How to: "Превьюшки картинок в анонсе любого типа материала".

Вот видите как все просто! (10 мин — максимум)

ПредпросмотрВложениеРазмер
imagecache-5.x-2.3.zip452 байта
RSS-материал

25 Комментариев [Нет новых]

Аватар пользователя sadmin

Классная заметка, полезная. Каждый раз буду вспоминать о ней при вставке нового материала с картинкой)

Аватар пользователя EllECTRONC

Для шестерки вышел работающий ImageCache.

Аватар пользователя Cmn

А где запускать этот самый
patch -p0 < imagecache-5.x-2.3.patch

Аватар пользователя EllECTRONC

@Cmn: Хорошо записала в ToDo оформить и опубликовать статью про patch на Windows.
А если коротко, то скачайте пакет улит UnxUlits, в архиве найдете patch.exe. Положите patch.exe и сам патч imagecache-5.x-2.3.patch в папку модулей. Зайдите в эту папку через Cmd (Windows Commander) и выполните эту команду. Команду пропатчивания можно так же выполнить в командной строке TotalCommander, находясь в папке модулей, где находятся patch.exe и imagecache-5.x-2.3.patch

Аватар пользователя Мишка Михайло

Хорошая статья, как раз то что искал, спасибо. Ждём больше полезных статьей. Подмигивание

Аватар пользователя EllECTRONC

хотя IE вроде понимает как работать с такими классами: imagecache imagecache-tumba, так что мой патч не обязателен к использованию.

Аватар пользователя Oleg

Добрый день!
Попробовал это, не получилось Грустный
Drupal 6, modules последние, ImageCache - работает, создает файлы превью из примера в админке в настройке модуля, проверял в папке files/cache/… , использую tinymce в него же и вставляю картинки через imce. На сколько понимаю то надо использовать (прикреплять отдельно к материалу через upload) или же можно как-то из тела материала картинки выцеплять?
Пожалуйста объясните. Googl-ить не отправляйте уже 2-ю неделю везде роюсь ничего не подходит

Аватар пользователя EllECTRONC

@Oleg: Вот недавно обновляла на 6-ом модули последних версий и все работает. Правда там не используется tinymce.

Oleg :

На сколько понимаю то надо использовать (прикреплять отдельно к материалу через upload) или же можно как-то из тела материала картинки выцеплять?

Да, достаточно просто в тело ноды добавить изображение в теге img и модуль сам его найдет (так же показано и в скринкасте), это и есть фишка. Не помню точно, поддерживает ли последний релиз прикрепленные изображения, мне кажется да. Проверьте еще раз настройки модуля teaserthumbnail в типе материала, включили ли вы его. А так же минимальный размер изображения, который может быть использован для превьюшки (ваше изображение должно быть больше заданного минимального размера).

UPD: Замечание по поводу редактирования template.php, к текущим вышедшим релизам, применять не нужно.

Аватар пользователя Oleg

Попробовал, работает только если картинку прикреплять через "Прикрепленные файлы", а вот если же вставлять в "содержимое" через tinymce with imce, то не работает Грустный я уже потерялся с решением подскажите пожалуйста wwww.vkusnovse.ru

Аватар пользователя EllECTRONC

Oleg, попробуйте в тело материала, где-нибудь в середине вставить изображение вручную, без использования tinymce with imce, т.е.:

<img src=”путь_к_файлу_изображения” alt=”алт_текст” />

Если сработает, значит траблы в «tinymce with imce» — изучайте код изображения после обработки tinymce.

Аватар пользователя Oleg

Пробовал в HTML вставлял ручками, из body не хочет ссылки выхватывать Грустный , tinymce вставляет корректный HTML code, работает только через "прикрепленные файлы", может там где модулек Teaser Thumbnail подправить надо ?

Аватар пользователя EllECTRONC

@Oleg: Да нет, править ничего не надо. Грустный А с отключенными модулями tinymce и imce у вас работает?

Аватар пользователя Oleg

Все решено!
Помогла замена редактора, Tinymce -> FCKeditor !
Всем Спасибо !

Аватар пользователя Петр

Сделал все по инструкции и не пашет
вместо тубнейла показывается полная картинка
капча не пашет,точнее криво пашет

Аватар пользователя очень злой Игнат

Аффтар ты что меня запутал, да за такую оплошность надо вешать авторов в лесах…

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

Аватар пользователя EllECTRONC

Это было старое описание модуля. Откорректировано.

Аватар пользователя очень злой Игнат, попстило малец

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

Аватар пользователя EllECTRONC

Это, скорее всего, ваша ошибка, как о ней может быть сказано‽ О_о Модуль imagecache не может совершать действия над файлами, находящимися на другом сайте (сервере), так как не имеет к ним доступа.

Вот вы наступили на эти грабли и отписались — молодец. Другие прочтут и тоже будут знать… Громкий смех

Хотя можно написать в issues к imagecache, может чего придумают…

Аватар пользователя Dalay

Мое почтение, коллеги. Модифицировал Teaser Thumbnail для самостоятельной работы через друпальский имаджтулкит, без ИмаджеКэша с довесками.

Не спама ради - пользы для: http://www.drupalka.ru/node/96

Аватар пользователя Алексей

Отличный подкаст.
Подскажите, пожалуйста. При выводе анонса материала средствами Views оригинал картинки выводится вместе с миниатюрой. Выводимые поля:
Материал: Заголовок
Материал: Teaser thumbnail
Материал: Анонс
Я думал, что произойдет перекрытие - ан нет, "мухи отдельно, котлеты отдельно".

Аватар пользователя EllECTRONC

Оригинал картинки не должен выводиться. Что-то и где-то вы делаете не так, но по предоставленной информации сложно угадать «что».

Аватар пользователя Алексей

Сайт был импортирован из под Wordpress. И так уж было задумано, что каждый пост начинается с картинки, обтекаемый текстом слева (классика постов). Поэтому в анонсе материала они фигурирует всегда.

Может быть поле Материал: Teaser thumbnail вообще не стоит выводит. А как то, через фильтр его задавать, я не знаю.

P.S. Ваш ответ увидел только сейчас, т.к. уведомление на мыло мне не пришло (в спаме тоже нет).

Аватар пользователя EllECTRONC

Если в тексте анонса уже содержится изображение, то и при выводе анонса средствами views оно тоже будет выводиться. Я так полагаю, что и в самой ноде это изображение также выводится? Если так то тут нужен иной подход. Если же тело материала отлично от анонса и изображение там не выводится, то выводите содержимое материала с ограничением длинны и все.

P.S.: На счет уведомлений я недоумеваю… мне все приходит, а вот почему другим не приходит мне, пока, не ясно…

Аватар пользователя Алексей

В тексте анонса изображение содержится. Если обращаться непосредственно через /node или /taxonomy/term/id все прекрасно - миниатюра подменяет оригинал. Другое дело Views. Поле Материал: Teaser thumbnail, содержит только миниатюру, что в общем-то не удивительно. В настройках нашел только два отличных он стандартных опции - "Установить ссылку на полную статью" и "Заменить миниатюру на оригинал". Я уж думал, может там в фильтрах чего поковырять, надеялся найти нечто - если анонс, заменить оригинал миниатюрой. Но, увы…

P.S. Вы наверно гайки подкрутили - сегодня письмо на почту пришло Улыбка

Что ты об этом думаешь?

МультиВход
ИЛИ

Комментарии