Лидеры

Порой возникает необходимость скрыть часть статьи/новости/какой-либо записи для незарегистрированных пользователей, например чтобы привлечь пользователя зарегистрироваться для продолжения прочтения информации, или, если статья несёт в себе нерекомендуемый контент для гостей, дабы не занесли сайт в блокировку, причин множество. Дано: статьи пишутся в приложении Страницы. Результат показан на изображении справа. Принцип работы таков. Мы создаём дополнительное поле - кнопку Да/Нет. Если администратор хочет ограничить контент статьи от гостей сообщества, то при добавлении статьи на сайт он переключает это поле в положение "Да". Соответственно будем редактировать шаблоны приложения Страницы, в частности шаблон просмотра статьи. Создание дополнительного поля - переключателя Переходим в админцентр > Страницы > Базы данных > Поля > Создать новое поле. Заполняем следующие поля: Заголовок - Закрыть контент Тип - Да/Нет Обязательное поле - Нет Ключ шаблона - lockcontent Показать в списке записей - Нет Показать при отображении записи -Нет Остальные поля оставляем как есть. Сохраняем и указываем разрешения. В нашем случае управлять полем могут только администраторы. Готово! Приступаем к редактированию шаблонов. Редактирование шаблонов статьи Переходим в админцентр > Страницы > Шаблоны > Database Templates > Display > record Находим следующий код: <section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages'>{$record->_content|raw}</section> Меняем на: <section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages'> {{if $record->fieldValues()['field_3'] && !\IPS\Member::loggedIn()->member_id}} <div class='ipsType_reset ipsType_blendLinks' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='4 lines'>{$record->_content|raw}<br><br></div><br><br> <span style="color:red">Продолжение статьи доступно только для зарегистрированных пользователей.</span><br> Пожалуйста, <a href="/login" target="_blank">войдите</a> или <a href="/register" target="_blank">зарегистрируйтесь</a>. {{else}} {$record->_content|raw} {{endif}} </section> Здесь вы можете указать количество отображаемых строк - data-ipsTruncate-size='4 lines'. Более подробно об этой конструкции читайте здесь - https://invisionbyte.ru/docs/custom/javascript/ipsuitruncate-r12/. Так же необходимо указать идентификатор созданного нами поля в проверочной конструкции - $record->fieldValues()['field_3'] На этом всё, оставляйте комментарии, делитесь своим мнением, нам будет приятно!

Любой плавающий блок в Invision Community 4 очень просто реализовать с помощью виджета ips.ui.sticky, который довольно просто в применении. Это может быть какой-то рекламный блок, двигающийся вместе с прокруткой страницы, или плавающий весь боковой блок. Пример кода реализации с использованием IPS4 Javascript фреймворка: <div data-ipsSticky data-ipsSticky-relativeTo='#ipsLayout_sidebar' data-ipsSticky-disableIn='tablet,phone'> Плавающий блок </div> Данный виджет закрепляет какой-либо блок внутри сайдбара, который будет его родителем, таким образом блок не выйдет за рамки сайдбара и не будет работать на планшетах и телефонах. У такой реализации есть своеобразный нюанс - при прокрутке страницы боковой блок сразу же закрепляется к верху окна браузера, если блок большой, то основная его часть останется недоступна для просмотра, пока пользователь не доскроллит до конца страницы. Правильней было бы сначала просмотреть весь боковой блок, после чего закрепить его в нижней части окна браузера. Пример: Для реализации такого вариант необходимо заменить шаблон core -> front -> global -> sidebar на следёющий код: В custom.css добавим:

Размещение кода, картинки, текста, и т.д. в нужном разделе форума в шапке. Внешний вид – стили и шаблоны (forums > front > forums > forumDisplay). В этом шаблоне ищем строчку: {$forum->description|raw} Ниже добавим код: {{if $forum->_id == 48}}{block="banner1"}{{endif}} Где 48 – это номер раздела форума, где будет показываться информация; {block="banner1"} – это ключ виджета, вместо него можно сразу написать нужный текст или код; Размещение рекламного баннера на главной странице форума между описанием форума и счётчиком количества сообщений Внешний вид – стили и шаблоны (forums > front > index > forumRow). В этом шаблоне после 60й строки аля после кода: <div class="ipsDataItem_meta ipsType_richText">{$forum->description|raw}</div>{{endif}}</div> Строкой ниже добавляем код {{if $forum->_id == '110'}} <div class="ipsDataItem_stats ipsDataItem_statsLarge ipsBanner_forum"> {advertisement="KEY1"} </div> {{endif}} где 110 это id форума, KEY1 - это ключ для вашего баннера. Если нужен еще баннер, то ниже добавляем второй: {{if $forum->_id == '111'}} <div class="ipsDataItem_stats ipsDataItem_statsLarge ipsBanner_forum"> {advertisement="KEY2"} </div> {{endif}} Далее идем в АЦ - система - продвижение - управление рекламой - жмем кнопку "создать" (подробная инструкция): 1. Вводим заголовок (чтобы потом было понятно, то можно ввести название форума к которому будет прикреплен данный баннер) 2. Тип объявления - Загруженное изображение 3. Вводим нужную ссылку, по которой будут проходить при клике на баннер 4. Загружаем баннер 5. Отображать объявление - выбираем "Укажите собственные расположения" и вводим указанный ранее ключ KEY1 6. указываем группы и сохраняем После этого, ваш баннер будет показываться в месте установленного ключа. Через админку вы легко можете менять баннеры, а также будете видеть кол-во показов и переходов. Размещение рекламы внутри выбранного раздела форума между названием темы и счётчиком количества ответов и просмотров. Внешний вид – стили и шаблоны (forums > front > forums > topicRow) В этом шаблоне после 108й строки аля после кода: {{if count( $row->tags() )}}
 &nbsp;&nbsp;
 {template="tags" group="global" app="core" params="$row->tags(), true, true"}
 {{endif}}
 </div>
 </div> Строкой ниже добавляем код {{if $row->tid == 1707}} <div class="ipsDataItem_stats ipsDataItem_statsLarge ipsBanner_forum"> {advertisement="KEY3"} </div> {{endif}} где 1707 это id темы форума, KEY3 - это ключ для вашего баннера. Если нужны ещё баннера, то ниже добавляем второй и последующие {{if $row->tid == '1078'}} <div class="ipsDataItem_stats ipsDataItem_statsLarge ipsBanner_forum"> {advertisement="KEY4"} </div> {{endif}} Далее идем в АЦ - система - продвижение - управление рекламой - жмем кнопку "создать": 1. Вводим заголовок (чтобы потом было понятно, то можно ввести название форума к которому будет прикреплен данный баннер) 2. Тип объявления - Загруженное изображение 3. Вводим нужную ссылку, по которой будут проходить при клике на баннер 4. Загружаем баннер 5. Отображать объявление - выбираем "Укажите собственные расположения" и вводим указанный ранее ключ KEY1 6. указываем группы и сохраняем После этого, ваш баннер будет показываться в месте установленного ключа. Через админку вы легко можете менять баннеры, а также будете видеть кол-во показов и переходов. Материал предоставил пользователь Dows

Подключение собственных шрифтов в Invision Community Для этого понадобится загрузить шрифт в корень вашего сообщества, например в папку fonts. После чего переходим в файл custom.css и подключаем шрифт таким образом: @font-face { font-family: 'Название'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; } После подключения шрифта, его можно указывать к различным заголовкам или всему сайта: body {font-famuly: 'Название';} Мы добавили несколько интересных шрифтов для примера: Шрифты #1 - Oxygen Подключение Oxygen: @font-face { font-family: Oxygen; src: url('OxygenRegular.eot'); src: url('OxygenRegular.ttf') format('truetype'), url('OxygenRegular.woff') format('woff'); font-weight: normal; font-style: normal; } Сам шрифт: OxygenRegular.zip #2 - LeksaSansPro Подключение LeksaSansPro: @font-face { font-family: leksasanspro; src: url(leksasanspro.ttf); font-weight:400; } @font-face { font-family: leksasanspro; src: url(leksasanspro-lightitalic.ttf); font-weight:300; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-light.ttf); font-weight:300; } @font-face { font-family: leksasanspro; src: url(leksasanspro-italic.ttf); font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extralightitalic.ttf); font-weight:200; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extralight.ttf); font-weight:200; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extrabolditalic.ttf); font-weight:800; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extrabold.ttf); font-weight:800; } @font-face { font-family: leksasanspro; src: url(leksasanspro-demibolditalic.ttf); font-weight:600; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-demibold.ttf); font-weight:600; } @font-face { font-family: leksasanspro; src: url(leksasanspro-bolditalic.ttf); font-weight:700; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-bold.ttf); font-weight:700; } @font-face { font-family: leksasanspro; src: url(leksasanspro-blackitalic.ttf); font-weight:900; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-black.ttf); font-weight:900; } Сам шрифт - leksasanspro.zip

В данной статье мы "подружим" статьи приложения Страницы в Invision Community со слайдером Flexslider. Создадим блок с последними статьями (новости/инструкции/статьи) и заставим их крутиться с помощью слайдера. Получится нечто похожее: Блок размещён в боковой панели, однако его можно переместить в любое место. #1 - шаблон слайдера Первое, что нужно сделать - создать шаблон нашего слайдера. Для этого переходит в меню Страницы > Менеджер страниц -> Шаблоны. Кнопка Новый -> Добавить шаблон блока. Название - flexslider Плагин - Страницы/Лента записи Тема - текущая стандартная тема После этого откроем наш шаблон в группе Шаблоны блока плагина. Добавим в него следующий код: СОхраним шаблон. #2 - создание блока Далее необходимо создать блок. На этот счёт у нас есть специальная пошаговая инструкция -> https://invisionbyte.ru/docs/apps/pages/bloki-r119/ Тип блока - плагин; плагин - лента из вашей базы данных. Укажите произвольное название и ключ блока. На вкладке Конфигурация укажите количество статей, которые будут крутиться в слайдере. На вкладке Контент выберите Шаблон - flexslider. Сохраним блок. #3 - подключение CSS и Javascript Перейдём в меню Внешний вид > Темы -> Управление ресурсами -> Добавить ресурс. Загрузите файл jquery.flexslider.js и скопируйте тег шаблона этого файла. Теперь изменим HTML и CSS код темы. в шаблоне globalTemplate перед закрывающимся тегом </body> вставьте конструкцию: Соответственно поправьте ссылку на ресурс, возможно у вас он будет другой. В строчке slideshowSpeed: 5000 вы можете изменить скорость переключения слайдов. По умолчанию слайды меняются через 5 секунд. Добавим новый CSS файл в шаблонах темы. Файл назовём flexslider.css и изменим theme_css_location с global на front. Так наш файл будет создан рядом с custom.css. Добавим следующий код в css файл: Сохраним и наслаждаемся слайдером. При нестандартном подходе можно сваять что-нибудь интересное и нестандартное. Таким же образом можно подключить другие виды слайдеров flexslider, а прокручивать, например, последние темы или изображения галереи. Ссылка на flexslider - http://flexslider.woothemes.com/ Если будет спрос, напишем инструкцию по применению карусели для Invision Community.

Чтобы понимали о какой карусели идёт речь - посмотрите на нашу главную страницу, на ней вы увидите блок карусели из новостей, реализованных с помощью приложения Pages (он же Страницы). Изображение: Для этого нам понадобится: HTML блок в приложении Pages. Яваскрипт, перемещающий новости. CSS код.