Курс по Drupal: основы

Опубликовано: 16.06.2017

видео Курс по Drupal: основы

Как сделать продающий прайс-лист?

Внимание!!! Если вы желаете использовать easySlider прямо на данный момент в течение часа, то безотступно рекомендую использовать модуль, эта статья сначала предназначена чтоб разобраться с шаблонами модуля Views и их темизацией. Чтоб позже настроить вид easySlider вам придется править CSS.



 

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

Давайте настроим jquery-плагин EasySlider для данных выводимых модулем Views. Естественно есть уже готовый модуль встроенный с Views, для вывода EasySlider, вот ссылка на него http://drupal.org/project/easySlider


Установка и настройка плеера Flowplayer

Естественно если необходимо вывести изображения в виде этого слайдера можно установить модуль и все. Эта же статья обучит обращаться с шаблонами VIews.

 Для того чтоб начать нам будет нужно установить модули VIews, CCK, Imagecache, также скачать файлы плагина easySlider тут либо на другом сайте, воспользовавшись поиском. О том как установить плагин в тему друпала я напишу дальше, после описания опции CCK-полей.

Итак, модули установлены, начинаем:

1. Создаем новый контент тип

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

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

2. Сделайте ноду (материал) контент типа (тип материала) Баннер и загрузите пару фото чтоб было что выводить в баннер.

3. Сейчас необходимо сделать пресет (preset) для изображений которые мы будем выводить. Я сделаю пресет 200X200 пикселей, вы же сможете сделать таковой размер какой нужен вам.

Добавляем обработку изображения And scale And crop, снова же повторю что мои размеры 200x200 у вас вероятнее всего будут свои:

 

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

Добавляем новый вид (view, просмотр, отображение)

Добавляем поле Изображения

Опции этого избираем последующие: убираем группировку значений, убираем заголовок поля, размер изображения ставим тот для которого мы сделали пресет.

В фильтрах ставим:
Материал: Опобликованный - да
Материал: Тип - Баннер

В Basic settings:
Style: HTML List

Добавляем отображение в блоке.

Получится таковой вот вид:

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

5. Добавим блок вида в какой-либо регион и поглядим как смотрится.

Мда... На слайдер не похоже. Будем устанавливать easySlider.

6. Разархивируем easySlider, который можно скачать сначала статьи. В папке плагина есть примеры как слайдер смотрится, думаю что мы возьмем 2-ой пример из 2.html. Необходимо скопировать данный там CSS в style.css вашей темы, а рисунки из папки images плагина в папку images вашей темы.

 7. В папке js плагина лежит файл easySlider1.5.js, его также необходимо скопировать в папку с текущей темой Друпала, идеальнее всего сделать папку js для файлов javascript. Вынулотемы имя_темы.info, дописав туда таковой вот код

 

 

Обновим кеш и файл easySlider1.5.js, должен будет подключиться:

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

А сейчас поглядим на наш блок, используя firebug для firefox, dragonfly для Opera, также есть DOM-inspector в Chrome. Я пользуюсь firebug'ом для файерфокса, потому что он удобнее остальных... DOM-inspector'ов.

Как мы лицезреем VIews добавил много div'ов, которые обычно помогают при верстке, но на данный момент они только мешают и необходимо их будет убрать.

 

 

 

и