Отзывчивая тема в Drupal 7 - часть 3 Создание изображений адаптивным

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

Как это сделать...

1. Настройка ImageCache для точек останова. Первый шаг - понять, как изображения меняются в зависимости от точки останова на вашем сайте. Это сделано для того, чтобы мы не загружали большие изображения в меньшие точки останова

Это сделано для того, чтобы мы не загружали большие изображения в меньшие точки останова

а. Добавьте точки останова в файл yourtheme.info

точки останова [мобильные] = (минимальная ширина: 0 пикселей) точки останова [узкие] = (минимальная ширина: 600 пикселей) точки останова [широкие] = (минимальная ширина: 960 пикселей)

б. Установите и включите модуль точек останова:

http://drupal.org/project/breakpoints , Необходимым условием для этого модуля является Ctools: http://drupal.org/project/ctools

Поскольку мы уже определили точки останова в информационном файле, при установке модуля точек останова мы получаем сообщение: точки останова из темы RoboSmartare импортированы, и создается новая группа ».

Вы можете посетить: admin / config / media / точки останова / группы / robosmart, чтобы просмотреть точки останова. 3 точки останова становятся доступными.

3 точки останова становятся доступными

с. Создать стили изображения

Модуль точек останова предоставляет интерфейс для автоматизации создания стиля изображения для нескольких точек останова одним щелчком мыши, используя страницу конфигурации добавления адаптивного стиля, доступную, нажав вкладку «Добавить отзывчивый стиль» по адресу: admin / config / media / breakpoints / create_style. Отредактируйте эффект масштаба каждого из стилей изображения в соответствии с требованиями.

д. Установите и включите модуль адаптивных изображений и стилей по адресу http://drupal.org/project/resp_img , Предварительные условия для этого модуля: Точки останова, Ctools (установлен на шаге 1-а) и Модуль API настроек форматера поля: http://drupal.org/project/field_formatter_settings

Модуль «Адаптивные изображения и стили» предоставляет интерфейс для сопоставления существующих стилей изображения с точками останова. Выберите группу, связанную с используемой темой, и сопоставьте точки останова стилям изображения на странице конфигурации «Адаптивное изображение и стили»: admin / config / media / resp_img

В нашем случае выберите группу robosmart, созданную при установке модуля точки останова на шаге 1-b. Стиль изображения карты, созданный в шаге 1-c, для точек останова. В нашем случае ширина изображения, сопоставленная с различными точками останова: Мобильный: 284 пикселей, Узкий: 304 пикселей, Широкий: 504 пикселей

е. Свяжите стили изображения с типами контента

я. Перейдите к администрированию типов контента на странице «Администрирование типов контента»:
администратор / структура / типов

II. Нажмите на управление дисплеем

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

внутривенно Свяжите стиль изображения с группой, созданной для вашей темы

v. Сохранить ...

Посетите контентную страницу, чтобы увидеть, как меняются изображения с вашими точками останова

2. Создание быстрой галереи изображений с использованием галереи CCK и модуля FlexiSlider:

а. Разберитесь в дизайне галереи изображений, которую мы собираемся создать. Верхняя половина этой страницы - узел Галерея.

б. Чтобы узел галереи работал как слайд-шоу, создайте новый тип контента Галерея. Добавить поле изображения с неограниченной возможностью загрузки файлов для этого типа контента.

с. Установить и включить модуль Flex-слайдер: http://drupal.org/project/flexslider Слайдер Flexi имеет 4 подмодуля. Включите модули Flex Slider и Flex Slider Fields.

Для этого модуля необходимы следующие компоненты: библиотеки, инструменты Chaos, изображение, файл, поле, поле хранения SQL. Пожалуйста, прочитайте файл README для инструкций по установке. Загрузите плагины и переместите их в папку библиотеки, как указано в инструкции.

Посетите admin / config / media / flexslider / edit / default, чтобы настроить, как вы хотите, чтобы ваш flex-слайдер работал. Поочередно создайте свой собственный набор параметров в admin / config / media / flexslider.
Свяжите стиль изображения с группой, созданной для вашей темы.

д. Посетите страницу конфигурации содержимого галереи и нажмите вкладку управления отображением. Выберите формат в качестве ползунка Flex для поля Галерея изображений.

Нажмите на вкладку настроек в поле Галерея изображений, чтобы настроить набор параметров на основе параметров, настроенных на шаге 2-c.

е. Нажмите «Сохранить», чтобы включить ползунок Flex для поля «Галерея изображений» в типе содержимого «Галерея».

3. Настройте навигацию между галереями внизу страницы.

а. Установите и активируйте модули Views, Views UI и Views Fluid Grid:

http://drupal.org/project/views & http://drupal.org/project/views_fluid_grid
б. Настройте представление, которое будет отображать последние узлы галереи. Установите отображение как жидкостную сетку. Включить блокировку дисплея.
с. Включите блок Галерея, установите видимость только на страницах узла Галерея.

type) && ($ node-> type == 'image_gallery')) {return true; }?>

4. Чтобы создать адаптивный баннер, добавьте собственный файл js и включите приведенный ниже код. Загрузите js в page.tpl.php

$ ('# slider'). flexslider ({directionNav: false, keyboardNav: false});

Создайте баннер HTML с атрибутом id = "slider".
Вуаля! У вас есть отзывчивый баннер.

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

Модуль «Адаптивные изображения и стили» использует информацию, захваченную в интерфейсе, для сопоставления существующих стилей изображения с точками останова для динамического построения рендеринга изображений html5 с использованием тега изображения и медиазапросов. Осмотрите раздел, используя firebug, чтобы понять сгенерированный код рендеринга изображений. Ниже приведен фрагмент из сгенерированного кода.

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

Flexi Slider использует плагин jQuery Cycle, который обеспечивает эффект слайд-шоу и различные переходы.

Type) && ($ node-> type == 'image_gallery')) {return true; }?

Отзывчивая тема в Drupal 7 - часть 3: адаптация изображений