Перегляди, Показ слайд-шоу та підкачки в Drupal 7


8

Ситуація така: у мене є тип вмісту Слайд, і я хочу відобразити три найновіші слайди у слайд-шоу. Слайди повинні кружляти, а слайди також повинні керуватися пейджером. Пейджер повинен мати три кулі / посилання / зображення, щоб мати можливість переходити до певного слайда в слайд-шоу. Пейджер також повинен мати стрілки вліво і вправо для збільшення та зменшення слайду в слайд-шоу.

Цей прийом використовується всюди в Інтернеті, але я не можу зрозуміти, як правильно налаштувати це за допомогою слайд-шоу «Views and Views». Будь-які вказівки від усіх вас досвідчених друпалітів там, просять.

Ура, Лес.

Відповіді:


14

(1) Необхідні модулі (Версія: Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2) Встановити модулі

У Drupal7 ви можете встановити модулі з розділу адміністратора, але я все ще вважаю, що ця нова функція не має жодного значення, оскільки нам потрібно шукати посилання на модуль на сайті Druapl, а потім копіювати пасту в область установки модуля адміністратора, дійсно божевільний. Це було б так добре, якби вони зробили це на кшталт wordpress невеликим пошуком. У будь-якому випадку я просто завантажую та встановлюю його по-старому (я все-таки рекомендую цей старий спосіб).

Завантажте всі модулі з сайту Drupal і встановіть у каталог своє ім'я / сайти / всі / модулі. Перейдіть до http://www.yoursitename.com/node#overlay=admin/modules та включіть ці модулі, як показано нижче;

(1) Перегляди (2) інтерфейс переглядів (3) Перегляди слайд-шоу (4) Перегляди слайд-шоу: Цикл (5) Інструменти хаосу (6) Посилання (7) Бібліотеки (8) Токен (необов’язково) (3) Створення кешу зображень

У Drupal7 imagecache є частиною основного модуля і називається стилями зображення. Тож давайте створимо звідси два кеш-зображення, один для повного повзунка та інший для мініатюрного зображення. У цьому підручнику я використовую розмір 935x293 (пікселів) для повного розміру повзунка та розмір 210x100 (пікселів) для мініатюрного зображення. Примітка. Ці конфігурації csn мають бути захищені залежать від ваших потреб.

  • Параметри зображення повного розміру повзунка

Перейдіть на сторінку 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 та нарешті натисніть кнопку Save settings.

Використовуючи той самий метод, створіть також поле посилання.

Налаштування поля посилання (1) Мітка: Повзунок Посилання (2) Поле: slider_link (3) Тип поля: посилання (4) Віджет (елемент форми): посилання (5) Натисніть кнопку Зберегти, щоб конфігурації поля посилань залишити все за замовчуванням . Я впорядкував поле, як показано нижче; Поле заголовка Поле зображення Поле поля Поле тіла (Ви можете навіть видалити це поле, якщо це не потрібно) Управління дисплеєм На вкладці керування дисплеєм можна визначити спосіб відображення поля, яке відображатиметься. Я встановив поле посилання як приховане, а також я встановив мітку зображення як приховану Drupal7: керуйте полями (6) Створення вмісту слайдера функції

Для цього підручника я створив чотири кращі вміст слайдера.

(1) Клацніть на посилання для додавання вмісту (2) Створення рекомендованого вмісту слайдера (3) Укажіть правильне ім’я заголовка (4) Завантажте зображення слайдера (5) Наведіть імена полів alt та title (6) Наведіть назву та URL-адресу посилання, де ви хочете повзунок для підключення (7) Залиште всі параметри інших параметрів за замовчуванням, окрім поля шляху, якщо ви хочете, ви можете надати псевдонім, зручний для SEO. (8) Збережіть вміст.

Таким же чином створюйте більше вмісту Популярного слайдера (я створив чотири вмісту) (7) Створіть новий перегляд

Тепер настав час створити наш новий перегляд слайд-шоу. У меню панелі інструментів натисніть на Структура, а потім натисніть кнопку Перегляди.

(1) Клацніть на додавання нового посилання перегляду (2) Дайте ім'я перегляду, я назвав Featured Slider (ім’я машини буде створено автоматично) (3) Надайте відповідний опис перегляду (4) Виберіть Показати вміст типу Featured Slider (ваш вміст назва типу). (5) Зніміть прапорець Створити Pge і встановіть прапорець Створити блок (6) Введіть назву блоку та виберіть формат відображення як "Слайд-шоу" елементів "полів" на сторінці 5 (ви можете ввести кількість елементів, які потрібно відобразити) (7 ) Натисніть кнопку "Продовжити та редагувати" Налаштування поля перегляду Спочатку додамо поле посилання (для правильної роботи все посилання повинно бути першим полем), тому натисніть на значок додавання та з фільтра Групи виберіть Вміст Додати вміст: Посилання, Клацніть "Кнопка" Додати та налаштувати "у наступному вікні налаштування зніміть прапорець" Створити мітку ". "Перевірити" Виключити з відображення. Натисніть кнопку "Застосувати"

Далі додамо поле зображення, тому натисніть на значок додавання і з фільтра Групи виберіть вміст Додати вміст: поле зображення (Примітка. Переконайтеся, що ви вибрали поле зображення, яке ми створили лише для цього типу вмісту слайдера.) Натисніть «Додати та налаштувати кнопку "у наступному вікні налаштування зніміть прапорець" Створити мітку ".

Форматтер: зображення (якщо ви встановили Colorbox або лайтбокс, ви можете обрати їх тут!) Стиль зображення: Розширений розмір (Виберіть кеш зображень, який ви створили у вищевказаному кроці). Посилання на зображення: Нічого. Налаштування стилю: Залиште параметри за замовчуванням. налаштування за замовчуванням Перезаписати результати: Позначте Виведіть це поле як посилання Шлях посилання: [view_node] (Примітка: Прокрутіть трохи вниз, і ви можете побачити шаблони заміни, створені модулем Core Token, (якщо ми не встановили поле посилання першим не вдається побачити параметр поля посилання тут).

Нарешті нам знадобиться ще одне поле для мініатюри, тому давайте натискаємо на значок додавання та з фільтра Групи вибираємо Зміст Додати вміст: поле зображення (Примітка. Переконайтеся, що ви вибрали поле зображення, яке ми створили лише для цього типу вмісту слайдера.) Натисніть кнопку "Додати та налаштувати" у наступному вікні конфігурації, зніміть прапорець "Створити мітку" та ПЕРЕВІРИТИСЯ ВІДКЛЮЧИТИ З ДИСПЛЕЙ, Форматор: Зображення (якщо ви встановили Colorbox або лайтбокс, ви можете обрати їх тут!) Стиль зображення: Ескіз (Виберіть кеш зображень ви створили на наведеному вище кроці) Посилання на зображення: Нічого Параметри стилю: Залиште параметри за замовчуванням Не поведінка результатів: Залиште параметри за замовчуванням Перепишіть результати: Перевірте Виведіть це поле як посилання Шлях посилання: [view_node] (Примітка: Прокрутіть трохи вниз і ви можете побачити шаблони заміни, створені модулем Core Token, (якщо ми цього не зробили 't встановіть поле посилання як перше, тут ми не бачимо варіант поля посилання) скопіюйте лише [view_node], потім прокрутіть вгору та вставте його в поле шляху до посилання.) Натисніть кнопку "Застосувати"

Перегляд Налаштування фільтрів

У view3 фільтри створюються на початку, поки ми вибираємо тип вмісту та інші налаштування! Якщо вам потрібні додаткові файли, ви можете створити їх тут!

Параметри стилю переглядів

Клацніть на Формат слайд-шоу | settigs та в наступному конфігураційному вікні, встановленому як показано нижче; (1) Тип списку: Не упорядкований список (2) Клас обгортки: Залиште параметри за замовчуванням (3) Стиль> Шкіра: глухий (4) Слайди> Тип слайд-шоу: цикл (5) Параметри циклу Вам потрібно завантажити плагін циклу jQuery та скопіювати jquery. cycle.all.min.js на сайти / всі / бібліотеки / jquery.cycle Плагін можна знайти на веб- сайті http://malsup.com/jquery/cycle .

ПРОСТО УКРАЇНСЬКУ Створіть папку з назвою "бібліотеки" на сайті / всьому каталозі, а потім створіть іншу папку з назвою "jquery.cycle" у цьому каталозі та, нарешті, скопіюйте та вставте лише "jquery.cycle.all.min.js" у цей каталог.

(6) Перехід: Fade (7) Дія: пауза на наведення курсору (8) Internet Explorer Tweaks: за замовчуванням (9) Widgets: Ви можете вибрати або обидва, і верхній, і нижній (тут я вибираю знизу, і параметри попереднього перегляду, як показано нижче;) (10) Нижні віджети> Пейджер> Тип пейджера: Поля (11) Поле пейджера: Вміст: Зображення (Примітка: останнє, яке ми додали для великого пальця, не помиляйтесь, оскільки обидва поля будуть названі однаковими.) (12) Активуйте слайд і Пауза на 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] = Featured Slider та збережіть файл .info. (2) Відкрийте файл теми теми.t.tl.php і додайте цей код там, де ви бажаєте, щоб ваш слайд відображався, як показано нижче;

Ви навіть можете створити спеціальний шаблон титульної сторінки, наприклад page - front.tpl.php, щоб не потрібно було вносити будь-які зміни до шаблону page.tpl.php за замовчуванням. [9] Увімкнути та налаштувати блок

Тепер цей блок буде видно в блоці, де вимкнений блок, тому з меню інструментальної панелі перейдіть до Структура> Блокувати та включіть блок до області за замовчуванням тем або до створеної нами спеціальної області (Featured_slider). (Регіони залежать від теми, яку ви використовуєте.)

Параметри конфігурації блоку Після ввімкнення блоку ви отримуєте посилання для налаштування блоку, тому натисніть на посилання Налаштувати та на розділ налаштувань, встановлений нижче;

(1) Заголовок блоку (якщо ви не хочете, щоб заголовок блоку відображався просто введіть) (2) Знову ви отримаєте всі включені налаштування регіону для конкретних тем. На розділах видимості (3) Сторінки> Показати блок на певній сторінці: виберіть лише перелічені сторінки та введіть так, щоб цей блок відображався лише на головній сторінці. ПОРАДИ CSS ДЛЯ ВІДКЛЮЧЕННЯ ВІДКРИТИХ ДУМКІВ

Додайте ці CSS-коди до таблиці стилів тем, щоб відобразити в ескізі мініатюри. .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float: зліва; маржа: 20px 6px; } Внесіть необхідні корективи.


4
Я думаю, що тривалість цієї (чудової та ретельної) публікації може вказувати на те, чому я так засмучений, намагаючись вчитися на друпалі
Деймон,

1
Drupal дійсно простий і потужний, але час від часу ви знаходите щось нерозумно просте, і на це вам знадобиться 2 дні, і вам доведеться
копатися

О, до речі, я слідував за вашим підручником від початку до кінця, і мені лише хочеться, щоб був спосіб змінити stackexchange, щоб отримати більше разів. Багато подяк чувак, ти мені справді допоміг!
Дінаїз

2
Я радий, що це допомогло. Я також створив модуль Feature, який зараз переглядається для випуску на Drupal.org. Він пакує всі описані вище кроки, плюс це робить ще крок далі і робить його повністю чуйним і використовує адаптивні зображення на стороні клієнта для використання в таких темах, як Omega. Див drupal.org/sandbox/nicoz/1538528

1
Дінаїз, ви можете набрати більше очок, запустивши суму, а потім вибравши "Нагородити існуючу відповідь" ;-)
uwe

2

Погляньте на цей подкаст "Горчичне медіа": Перегляд слайд-шоу .

Під час подкастів Боб проходить деякі основи слайд-шоу «Перегляди», а також тематизацію результатів. Він базується на Drupal 6, але я вірю, що більшість основ та уроків будуть однаковими. Маючи лише невеликий CSS, слайд-шоу може виглядати на тон краще. Настійно рекомендую переглянути цей подкаст, якщо ви хочете приємно виглядати слайд-шоу.


Хоча це відео може відповісти на питання, краще включити сюди основні частини відповіді та надати посилання для ознайомлення. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться. meta.drupal.stackexchange.com/questions/585/…
user1359

1

Якщо ви хочете дізнатися більше про слайд-шоу переглядів (наприклад, із мініатюрами), ви повинні переглянути цей хороший підручник: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7


Це та сама стаття, яку написав @Nigel
Laxman13

Я думаю, що Найджел скопіював цю сторінку прямо у відповідь :) Хоча це набагато акуратніше, тому я проголосував за це :) Я щойно зайшов у кабінет кілька хвилин тому, і я збираюся сісти і спробувати вирвати це слайд-шоу сьогодні вранці. Я прийму це, якщо все вийде. Дякую.
Лестер Пібоді

Гаразд, тому з усім сказаним і зробленим я фактично вже зробив більшу частину того, що він сказав тобі зробити в цьому підручнику. Він насправді не маніпулював пейджингом таким чином, як я сподівався, що він це зробить. Вам доведеться зробити кілька серйозних злому CSS та jQuery, щоб зробити цю роботу.
Лестер Пібоді
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.