Встроить слайдер в текст ноды

Главные вкладки

Аватар пользователя marat M marat M 28 мая 2018 в 12:50

Есть новостной сайт. Статьи добавляются через CKEditor 4. Если фоток к статье несколько, они автоматом выводятся через слайдер Flexslider над текстом. Всё хорошо.
Теперь внезапно надо, чтобы группа фоток могла выводиться в виде слайдера непосредственно в тексте. И таких групп может быть несколько.
Кто-нибудь решал такое? В какой стороне искать?

Комментарии

Аватар пользователя pselfin pselfin 28 мая 2018 в 13:14

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

Аватар пользователя sas@drupal.org sas@drupal.org 28 мая 2018 в 13:35

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

Аватар пользователя marat M marat M 28 мая 2018 в 13:40

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

Аватар пользователя postgres postgres 28 мая 2018 в 13:49

Если делать решение на коленке, без сильных заморочек, я бы так поступил - менеджеру даю инструкцию добавь пустой параграф с классом "for-slider" туда где он должен крутится в середине текста.
Затем jQuery скрипт, который соберет все картинки из нужного элемента и запустит экземпляр слайдера в этом месте.
Для СЕО без разницы где картинки лежат, для посетителя - будет конечно момент отмигивания... но там все можно по разному сделать и скрфть их до поры до времени и вообще ..

Аватар пользователя marat M marat M 28 мая 2018 в 13:55

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

Аватар пользователя postgres postgres 28 мая 2018 в 14:51

нет, я имею в виду не php скрипт - а javascript -- то есть делать вставку слайдера уже не клиенте...

var myimgs = $(".content img").hide(); // собираем все изображения из контента и скрываем их...

var flex = (".for-slider").append('

'); // создаем новый слайдер
myimgs.each(function(index){
$("div.flexslider").append('

Аватар пользователя marat M marat M 28 мая 2018 в 15:04

мысль понятна. наверное... значит, есть у менеджера три пачки фоток. их надо вставить в разные места текста. он грузит их тремя пакетами, в три разных image-поля. потом переходит в редактор и где надо вставляет метку - параграф с классом. далее работает скрипт. так?

Аватар пользователя postgres postgres 28 мая 2018 в 15:11

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

Аватар пользователя postgres postgres 28 мая 2018 в 15:13

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

Аватар пользователя marat M marat M 28 мая 2018 в 15:17

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

Аватар пользователя postgres postgres 28 мая 2018 в 17:28

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

Аватар пользователя marat M marat M 28 мая 2018 в 17:40

да, похоже путь будет тернист. скорее всего:
1. добавить еще штук 5 полей (с запасом, множественных, типа image). всё ж таки добавлять оптом фоты в поле удобнее.
2. если менеджеру нужда будет, он заполнит фотами столько полей, сколько ему надо.
3. в текстовом поле менеджер ставит метки (1-й слайдер, 2-й слайдер) в нужных местах.
4. скрипт проверяет наличие метки, оборачивает массив фоток в слайдер и выводит его.
4'. вот тут засада: как воткнуть в вывод CKEditor скрипт. подумаем.

Аватар пользователя miu miu 28 мая 2018 в 18:01

Скрипт надо написать в отдельном файле .js, поместить например рядом со скриптами текущей темы и вставлять на страницу одним из способов - самый простой через файл info темы...
СКEditor - это --- не отдельное поле, это frontend для поля

Аватар пользователя marat M marat M 28 мая 2018 в 18:04

ага, спасибо, принято.
да, CKEditor не поле, конечно, но меня интересует в нем как раз контент, который вписывается в поле body админки.

Аватар пользователя miu miu 28 мая 2018 в 18:10

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

Аватар пользователя marat M marat M 28 мая 2018 в 18:17

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

Аватар пользователя fairrandir fairrandir 28 мая 2018 в 18:18

Какая-то жесть, а не топик.
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html
Позволяет одной кнопкой добавлять шаблоны под заполнение, с предустановленными классами.

https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_styles.html
Позволяет делать врапперы вокруг контента.

Аватар пользователя miu miu 28 мая 2018 в 18:31

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