(1) Требуемые модули (версия: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Установите модули
В Drupal7 вы можете устанавливать модули из раздела администратора, но я все еще чувствую, что эта новая функция не имеет никакого смысла, потому что мы должны найти ссылку на модуль на сайте Druapl, а затем скопировать вставку в область установки модуля администратора, действительно сумасшедший. Было бы так хорошо, если бы они сделали что-то вроде WordPress небольшим поисковым праздником. Во всяком случае, я просто собираюсь скачать и установить его по-старому (я все еще рекомендую этот старый способ).
Загрузите все модули с сайта Drupal и установите в каталоге yoursitename / sites / all / modules. Перейдите по адресу http://www.yoursitename.com/node#overlay=admin/modules и включите эти модули, как показано ниже;
(1) Представления (2) Представления Пользовательский интерфейс (3) Представления Слайд-шоу (4) Представления Слайд-шоу: Цикл (5) Инструменты хаоса (6) Ссылка (7) Библиотеки (8) Токен (Необязательно) (3) Создать кэш изображений
В Drupal7 imagecache является частью основного модуля и называется стилем изображения. Итак, давайте создадим два кеша отсюда, один для полноразмерного слайдера и другой для миниатюрного изображения. В этом уроке я использую размер 935x293 (в пикселях) для полноразмерного изображения слайдера и размер 210x100 (в пикселях) для миниатюрного изображения. Примечание. Эти конфигурации могут быть защищены в зависимости от ваших потребностей.
- Настройки полноразмерного слайдера
Перейдите по адресу http://www.yoursitename.com/node#overlay=admin/config/media/image-styles и нажмите ссылку «Добавить новый стиль» (1). Укажите имя стиля изображения и нажмите кнопку «Создать новый стиль» (2). ) На следующем экране конфигурации выберите новый стиль, который вы хотите, и затем нажмите кнопку добавления (В этом уроке я выбираю стиль изменения размера) (3) На следующем экране установите ширину и высоту и нажмите кнопку добавления эффекта. (Настройки могут отличаться в зависимости от выбранного вами стиля). Я установил ширину как 935 и высоту как 293 пикселей.
Сделайте то же самое для миниатюрного изображения. (для размера миниатюрного изображения я установил ширину 210 и высоту 100 пикселей.) (4) Создать новый тип контента
Давайте создадим новый тип контента. В строке меню панели инструментов выберите «Структура», затем «Типы контента», затем нажмите на ссылку «Добавить новый тип контента».
(1) Дайте удобочитаемое имя, я назвал его «Featured Slider» (имя машины будет автоматически сгенерировано на основе читабельного имени) (2) Дайте краткое и соответствующее описание (3) Настройки формы представления, я оставляю как настройки по умолчанию (4) Параметры публикации, я проверил только опубликованные (все остальные параметры сняты) (5) Настройки отображения, я снял флажки с информацией об авторе и дате. (6) Настройки комментариев, я установил скрытый (отключено) (7) Настройки меню, я оставляю как настройки по умолчанию. (8) Нажмите Сохранить и добавить поля. Кнопка (5) Создать новые поля.
Здесь в этом примере я создаю только два поля, и это поле изображения и поле ссылки. Мы будем использовать поле изображения для загрузки изображения слайдера и поле ссылки для создания пользовательской ссылки, где мы хотим, чтобы наш слайдер был связан.
Настройки поля изображения
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Я установил это поле по мере необходимости, я добавил имя директора файлов с именем slider-image, чтобы эти изображения были расположены отдельно от других изображений. Вы можете установить максимальный размер загрузки и разрешение здесь, у меня есть поле alt и title, и, наконец, нажмите кнопку «Сохранить настройки».
Используя тот же метод, создайте поле ссылки тоже.
Настройки поля ссылки (1) Метка: ползунок Ссылка (2) Поле: slider_link (3) Тип поля: ссылка (4) Виджет (элемент формы): ссылка (5) Нажмите кнопку Сохранить, чтобы настройки поля ссылки оставляли все до настроек по умолчанию , Я перестроил поле, как показано ниже; Поле заголовка Поле изображения Поле ссылки Поле тела (вы можете даже удалить это поле, если в этом нет необходимости) Управление отображением На вкладке управления отображением вы можете настроить способ вывода поля для отображения. Я установил поле ссылки как скрытое, и я также установил метку изображения как скрытое Drupal7: управление полями (6) Создание содержимого слайдера функций
Я создал четыре показанных слайдера для этого урока.
(1) Нажмите на ссылку «Добавить контент» (2) Создать контент «Слайдер» (3) Дайте правильное название заголовка (4) Загрузите изображение слайдера (5) Дайте названия полей alt и title (6) Дайте название и URL ссылки, где вы хотите слайдер, который будет связан (7) Оставьте все остальные настройки по умолчанию, за исключением поля пути, если вы хотите, чтобы вы могли дать SEO-дружественный URL-псевдоним. (8) Сохраните содержимое.
Таким же образом создайте больше содержимого Featured Slider (я создал четыре содержимого) (7) Создать новый вид
Теперь пришло время создать наш новый вид слайд-шоу. В меню Dashboard нажмите на Structure, а затем нажмите на Views.
(1) Нажмите «Добавить ссылку на новый вид» (2) Дайте имя вида, я назвал его «Featured Slider» (имя машины будет создано автоматически) (3) Дайте подходящее описание вида (4) Выберите «Показать содержимое» типа «Featured Slider» (ваш контент) введите имя). (5) Снимите флажок «Создать Pge» и установите флажок «Создать блок». (6) Введите заголовок блока и выберите формат отображения «Слайд-шоу» для «полей» элементов на странице 5 (вы можете ввести количество элементов, которые хотите отобразить) (7 ) Нажмите кнопку «Продолжить и редактировать». Параметры поля представлений. Сначала давайте добавим поле ссылки (ссылка должна быть первым полем, чтобы все работало должным образом), поэтому нажмите на значок добавления, а из фильтра Группы выберите Содержимое Добавить содержимое: Ссылка, нажмите Кнопка «Добавить и настроить» в следующем окне конфигурации снимите флажок «Создать ярлык». "Проверьте" Исключить из отображения. Нажмите кнопку «Применить»
Далее давайте добавим поле изображения, поэтому нажмите на значок добавления и в фильтре Группы выберите контент Добавить контент: поле изображения (Примечание: убедитесь, что вы выбрали поле изображения, которое мы создали только для этого типа контента слайдера.) Нажмите «Добавить и настроить». кнопка "в следующем окне конфигурации снимите флажок" Создать ярлык ".
Форматтер: Изображение (если вы установили Colorbox или лайтбокс, вы можете выбрать их здесь!) Стиль изображения: Полноразмерный (выберите кэш изображений, созданный вами на предыдущем шаге). Ссылка на изображение: Ничего Настройки стиля: Оставить настройки по умолчанию Нет поведения результата: Оставить настройки по умолчанию. Перезаписать результаты: установите флажок Вывести это поле в виде ссылки. Путь к ссылке: [view_node] (Примечание: прокрутите немного вниз, и вы увидите шаблоны замены, созданные модулем Core Token (если мы не установили поле ссылки в качестве первого здесь не отображается опция поля ссылки) скопируйте только [view_node], затем прокрутите вверх и вставьте его в поле пути ссылки.) Нажмите кнопку «Применить»
Наконец, нам нужно еще одно поле для миниатюры, поэтому давайте щёлкнем по значку добавления и в фильтре Группы выберите Содержимое Добавить содержимое: поле изображения (Примечание: убедитесь, что вы выбрали поле изображения, которое мы создали только для этого типа содержимого слайдера.) Нажмите кнопку «Добавить и настроить» в следующем окне настройки, снимите флажок «Создать ярлык» и ПРОВЕРЬТЕ ИСКЛЮЧИТЬ ИЗ ОТОБРАЖЕНИЯ, Форматер: Изображение (если вы установили Colorbox или лайтбокс, вы можете выбрать их здесь!) Стиль изображения: Миниатюра (Выберите изображение кэша Вы создали на шаге выше) Связать изображение с: Ничего Настройки стиля: Оставить настройки по умолчанию Нет поведения результата: Оставить настройки по умолчанию Перезаписать результаты: Отметьте Вывести это поле как ссылку Путь ссылки: [view_node] (Примечание: прокрутите немного вниз и вы можете увидеть шаблоны замены, созданные модулем Core Token, (если мы неустановите поле ссылки, так как сначала мы не видим здесь параметр поля ссылки) скопируйте только [view_node], затем прокрутите вверх и вставьте его в поле пути ссылки.) Нажмите кнопку «Применить»
Настройки фильтров просмотров
В views3 фильтры создаются в начале, пока мы выбираем тип контента и другие настройки! Если вам нужна дополнительная фильтрация, вы можете создать ее здесь!
Настройки стиля просмотров
Нажмите на Формат слайд-шоу | settigs и в следующем окне конфигурации, как показано ниже; (1) Тип списка: неупорядоченный список (2) Класс оболочки: оставить настройки по умолчанию (3) Стиль> Скин: deafult (4) Слайды> Тип слайд-шоу: цикл (5) Параметры цикла Вам необходимо скачать плагин jQuery для цикла и скопировать jquery. cycle.all.min.js к sites / all / library / jquery.cycle Вы можете найти плагин по адресу http://malsup.com/jquery/cycle .
НА ПРОСТО АНГЛИЙСКОМ ЯЗЫКЕ Создайте папку с именем «library» в каталоге site / all, а затем создайте в этом каталоге еще одну папку с именем «jquery.cycle» и, наконец, скопируйте и вставьте только «jquery.cycle.all.min.js» в этот каталог.
(6) Переход: исчезновение (7) Действие: пауза при наведении (8) Настройка Internet Explorer: по умолчанию (9) Виджеты: Вы можете выбрать один или оба варианта сверху и снизу (здесь я выбираю нижнюю часть, а также дополнительные настройки, как показано ниже;) (10) Виджеты снизу> Пейджер> Тип пейджера: Поля (11) Поле пейджера: Содержимое: Изображение (Примечание: последнее, которое мы добавили для большого пальца, не ошибайтесь, поскольку оба поля будут названы одинаково.) (12) Активировать слайд и Pause on Pager Hove: проверено, элементы управления и счетчик ползунка не проверены. (13) Нажмите кнопку «Применить».
Формат Показать настройки поля
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Создать пользовательский регион (необязательный шаг)
(1) В вашей папке с темами откройте файл your_theme_name.info и добавьте новый регион, как показано ниже; region [featured_slider] = Избранный слайдер и сохраните файл .info. (2) Откройте файл theme.pp.tpl.php и добавьте этот код там, где вы хотите, чтобы ваш слайд отображался, как показано ниже;
Вы даже можете создать собственный шаблон лицевой страницы, такой как page - front.tpl.php, чтобы вам не нужно было вносить какие-либо изменения в шаблон page.tpl.php по умолчанию. [9] Включить и настроить блок
Теперь этот блок будет виден в области блокировки блоков, поэтому из меню Dashboard перейдите в Structure> Block и включите блок в область тем по умолчанию или в созданный нами пользовательский регион (featured_slider). (Регионы варьируются в зависимости от темы, которую вы используете.)
Настройки конфигурации блока После включения блока вы получаете ссылку для настройки блока, поэтому нажмите на ссылку Настроить и в разделе настроек установите, как показано ниже;
(1) Заголовок блока (если вы не хотите, чтобы заголовок блоба отображался, просто введите текст) (2) Снова вы получите все включенные настройки области для конкретной темы. В настройках видимости (3) Страницы> Показать блок на определенной странице: выберите Только перечисленные страницы и введите, чтобы этот блок отображался только на первой странице. CSS СОВЕТЫ, ЧТОБЫ ПОКАЗАТЬ ВНУТРЕННИЕ ПЕРЕКЛЮЧАТЕЛИ
Добавьте эти CSS-коды в таблицу стилей тем, чтобы отобразить миниатюры. .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float: left; поле: 20px 6px; } Сделайте необходимые корректировки.
Взгляните на этот подкаст Mustardseed Media: Themes .
Во время подкаста Боб знакомится с некоторыми основами слайд-шоу «Виды», а также с темой оформления выходных данных. Он основан на Drupal 6, но я верю, что большинство основ и уроков будут одинаковыми. С только немного CSS, слайд - шоу может выглядеть тонну лучше. Я настоятельно рекомендую смотреть этот подкаст, если вы хотите красиво выглядящие слайд-шоу.
источник
Если вы хотите узнать больше о слайд-шоу видов (например, с миниатюрами), вы должны увидеть этот хороший учебник: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7
источник