Добавляем картинку в поле навигации 2.X

488
Добрый день.

Речь пойдет о поле навигации от Fuze. Надеюсь, он будет не против. Само поле представляет собой ссылки на следующую и предыдущую записи (если кто не знает). Но мне понадобилось внутрь этой ссылки вставить также картинку. Ну и оформить как-то красивее. Возможно, кому-нибудь это пригодится.

Итак, я сделал правки всего в двух файлах.

По совету Fuze создал свой шаблон вывода.

1. Создаем файл templates/default/assets/fields/navigation_dk.tpl.php с таким содержимым:
Спойлер
2. Создаем файл templates/default/css/fild_navigation/styles_dk.css с таким содержимым:
Спойлер
3. В настройках поля выбираем шаблон вывода navigation_dk
Спойлер
Возможно, для вашего шаблона придется внести еще какие-то правки в файле css.

Вот, что получилось:

Добавляем картинку в поле навигации
Поле - позиция для виджетов. Выводим виджеты в теле записи
Комментарии (10)
Kantona 9 сентября 2017 в 14:52 0
small user social cms
Однозначно плюс! Но положение заголовков как то не ровно расположены.
DолбаK 9 сентября 2017 в 14:57 0
small user social cms
Попробуйте нажать ctrl+f5, если не поможет, то в 44 строке (css) - left: calc(40% + 10px);
добавьте пикселей еще, например - left: calc(40% + 25px);
в каждом шаблоне могут быть свои нюансы.
Fuze 9 сентября 2017 в 15:08 +3
small user social cms
Конечно же я не против)
Небольшой совет. В опциях поля можно выбрать шаблон для вывода. Назовите свой шаблон navigation_dk.tpl.php и после попросту в настройках поля выберите его. Подобно можно решить и с файлом стилей.
DолбаK 9 сентября 2017 в 15:48 0
small user social cms
Хороший совет, сделал так, как Вы сказали. Спасибо.
Kantona 9 сентября 2017 в 15:21 0
small user social cms
Проблему решил! Подскажите, можно ли добавить описание под названием? Вот так:


Или подправить стили так, чтобы не было таким большим, например так:

или
DолбаK 9 сентября 2017 в 16:34 0
small user social cms
Чтобы добавить текст в первом файле вместо <div class="naviarrow previous"></div> вставляем код:
Код PHP:
  1. <div class="navigationtext"><?php $text = $previous['content'];
  2. $text = strip_tags($text);
  3. echo mb_substr($text,0,200,'UTF-8'); ?></div>
вместо <div class="naviarrow next"></div> вставляем это:
Код PHP:
  1. <div class="navigationtext"><?php $text = $next['content'];
  2. $text = strip_tags($text);
  3. echo mb_substr($text,0,200,'UTF-8'); ?></div>
Во втором файле находим .previous_ctype_navigation_dk span, .next_ctype_navigation_dk span
и убираем там строки

left: calc(40% + 10px);
positin:absolute;

В этот же файл в самый низ добавляем код:
Код CSS:
  1. .navigationtext{
  2. font-size:14px;
  3. padding:10px 10px 10px 0;
  4. box-sizing:border-box;
  5. line-height:19px;
  6. height:67px;
  7. overflow:hidden;
  8. }
получается так
Kantona 9 сентября 2017 в 16:46 +1
small user social cms
Большое СПАСИБО!!! За помощь, отличную доработку и оперативное решение)))) Очень признателен!
al955 3 октября 2017 в 22:42 0
small user social cms
Спасибо! Единственное, что заметил - в типе контента Блоги (/posts) не выводится картинка

В статьях (/articles) все работает как надо
DолбаK 3 октября 2017 в 23:42 -1
small user social cms
Всё верно. Потому что здесь выводится картинка из поля с системным именем photo. А в блогах у картинки системное имя picture. Самый простой способ это исправить - создать в папке templates/default/assets/fields/ еще один файл navigation_posts.tpl.php, в него добавить код:
Спойлер
Ну и в настройках поля в Блогах указать этот шаблон вывода.
al955 5 октября 2017 в 22:17 0
small user social cms
Спасибо огромное!