Работа с изображениями (изменение изображения, размещение) в Друпале

Перейдя на седьмой друпал нужно быть готовым, что старый вариант работы прикреплённых картинок к постам/тизерам (с авторесайзом) перестанет работать. Вот и здесь всё поломалось. Я особо не переживал, всё равно хотел "прошерстить" весь материал сайта, но очень неприятно. Вообще, переход на семёрку оказался очень даже болезненным, несколько раз (на данном сайте) пришлось откатываться (на шестёрку), получал опыт.

В частности, видимый перерыв в жизни сайта в том числе связан был с этим - неоднократными накатами-откатами.

Совет в результате - не пробуйте разные темы на "живом-рабочем" сайте, это может привести к таким проблемам, что даже откатиться будет сложно (т.к. не сразу заметны проблемы, приводящие при этом к необратимым последствиям, материал уже накопился и просто жалко всё убивать-откатывать). Т.е. на "рабочий" сайт желательно ставить только "рабочие" темы.

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

Настройка в Друпал 7 для картинкам к постам с авторесайзом

  1. Включаем в админке модуль Image (раздел "Core modules" - "модули Ядра").
  2. В разделе "Виды показа изображений" (/admin/config/media/image-styles) добавляем свой стиль (можно пользоваться и "предуставновленными", но я предпочитаю "свои"), называем его, например, "img128x128".
  3. Добавляем ему эффект, выбрав из выпадающего меню "Scale" и задаём нужные размеры (это будет "маленький" вариант картинки).
  4. Аналогично (если нужно) добавляем "средний", "большой" и т.д. (сколько нужно, обычно хватает маленького и среднего) варианты картинки.
  5. Теперь добавляем поле картинки в нужный тип материала (/admin/structure/types).
  6. Напротив требуемого типа материала (например, Articles-Статьи) жмём "manage fields" ("Управлять полями").
  7. Добавляем новое поле ("Add new field"), выбрав в выпадающем списке вариант Image(который становится доступным благодаря действиям в п.1), элемент не трогаем (тоже будетImage).
  8. Нажимаем Сохранить и теперь новое поле можно будет настроить (в т.ч. его расположение при редактировании статьи - обычно я ставлю в самый верх, сразу после Заголовка).
  9. Нажимаем Изменить напротив новодобавленного поля Изображение (Image).
  10. Из многочисленных, но достаточно понятных настроек, нас интересует в первую очередь лишь проставление галок в пунктах "Показывать поле для ввода атрибута «alt»" и "Показывать поле для ввода атрибута «title»", чтобы после загрузки изображения можно было прописать ему альт и тайтл.
  11. Также я обычно дополнительно выбираю удобный мне вид (размер) картинки при редактировании статьи ("Стиль просмотра") плюс изменяю "Индикатор прогресса" на полоску (но всё это - по вкусу).
  12. Жмём "Сохранить настройки".
  13. Возвращаемся на предыдущий экран, где выбираем "Управлять отображением" (нужного/выбранного типа материала).
  14. Перетаскиваем поле Изображение в самый верх, ставим для всех элементов колонки "Заголовок" вариат "<Скрыто>" (иначе в текст поста будет выводиться и само слово "Изображение" или "Словарь" и т.п.) и сохраняем.
  15. Теперь кликаем справа "колёсико настройки" Изображения, чтобы задать его вид. В раскрывшемся меню выбираем стиль (например, "средний" вариант) отображения картинки в статье, а пункте "Изображение как ссылка на" выбираем вариант "File", чтобы изображение было в виде ссылки на "полную версию".
  16. Жмём Обновить и Сохранить.
  17. Сходную операцию проводим для тизера (как будет отображаться изображение в анонсе на главной), отличие будет в стиле (например, меньший размер) и ссылку сделать не на файл, а на "Содержимое", чтобы кликнув по картинке мы бы попадали на саму статью.

Редактирование css для отображения добавляемой картинки

Теперь нужно отредактировать стиль (css), чтобы картинка, например, была слева с какой-то отбивкой. Для этого в текущей теме смотрим исходный исходный добавленной по вышеописанной схеме картинки. В FireFox удобно выделить текст в районе самой картинки и выбрать по правой клавише мыши "Исходный код выделенного фрагмента" (чтобы не ковырять весь исходник страницы). Например, это будет что-то типа (как сейчас на сайте):

 7 </a></h2>

<div class="submitted">
<div class="author">
Автор: <a href="/user/nofollow" title="Информация о пользователе." class="username" xml:lang="" about="/user/nofollow" typeof="sioc:UserAccount" property="foaf:name">nofollow</a>          </div>
<div class="submitted-date">
Jun 09 2012, 13:53:24          </div>
</div>
</header>

<div class="content">
<div class="field field-name-field-img field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/drupal/kartinki-k-postam-s-avtomaticheskim-resayzom-dlya-drupala-7"><img typeof="foaf:Image" src="http://noindex.by/files/styles/img256/public/kartinki-k-postam-s-avtoresayzom-v-drupal-7.png" alt="Картинки к постам с автоматическим ресайзом для Друпала 7 " title="Картинки к постам с автоматическим ресайзом для Друпала 7 " height="242" width="256"></a></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>
Пе

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

div.field.field-name-field-image.field-type-image.field-label-hidden img{
float: left;
margin-right: 10px;
margin-bottom: 5px;
}

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

Всё, делаем полный сброс кэша сайта и получаем красивые картинки с удобным авторесайзом в тизере и основном теле статьи.

Автора автора