Вёрстка просмотра списка статей под видео для InstantCMS 1.10.6 3 438 просмотров

Всем здравствуйте.

Шаблон

Вёрстка просмотра списка статей под видео

Сегодня по работе верстал страницу просмотра видео. Ничего необычного — есть список публикаций, по клику открывается модальное окно с видео через youtube. Показалось, что такая реализация может быть полезна и здешнему сообществу, потому представляю на ваше обозрение.

Демо

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

Как пользоваться: скачиваем архив отсюда, распаковываем, заливаем файл com_content_video_view.tpl в папку /templates/_default_/components, картинку — в папку /templates/_default_/images. Открываем файл template.php в директории /templates/ваш_шаблон/, перед закрывающим тэгом body (</body>) вставляем скрипт:

 
    <script type="text/javascript">
        $(document).on('load ready', function() {
            $.each($(".contentlist.contentlist-video .contentlist-video-item .con_title a:contains('*video='), .pathway a:contains('*video='), .con_heading:contains('*video='), .sp-thumbnail:contains('*video='), a:contains('*video=')"), function(i, cuth) {
                cuth.innerHTML = cuth.innerHTML.replace('*video=', '<span class="video_youtube_code" style="display:none">') + "</span>";
            });
        });
    </script>

Далее переходим в редактирование раздела и устанавливаем шаблоном раздела com_content_video_view.tpl (скриншот).

Важно:
В конце заголовка создаваемой записи пишем *video=КОД_ВИДЕО_ЮТУБ (скриншот). Отсюда будет браться ссылка для вставки в модальное окно.

Благодарность — спасибо было бы достаточно joke

Как сделать аякс-подгрузку контента для InstantCMS 1.10.6

Адаптивный шаблон Anima Strawberry для InstantCMS 1.10.6

1.10.6 видео статьи

11 комментариев

Реклама #

Kreator 8 лет назад #

+ Спасибо

P.s. а если кликнуть не по картинке а по названию, то открывается страница с превьюшкой и текстом. Видео там нигде не должно быть?

Джехутимери 8 лет назад #

Да, внутри видео вставляется штатными средствами через визуальный редактор. Просто на демо забыл разместить.

Майкл 8 лет назад #

И как там будет выглядеть видео, тоже со своим плеером?

Джехутимери 8 лет назад #

Нет.

Майкл 8 лет назад #

Лично я не совсем понимаю где можно применить эту разработку. scratch

Джехутимери 8 лет назад #

Разумеется, не понимаете, если смешиваете понятия вывода плеера в поп-апе и стилизацию плеера.

lezginka.ru 8 лет назад #

Станислав Григорьевич (Мозголом) 8 лет назад #

Большое спасибо!

Upliner 8 лет назад #

Автору однозначно +
За качество. За щедрость.
Интересный способ выкрутится тем, кто желает красиво подать видео контент, но не имея возможности приобрести премиум видео компонент.
Для небольшого видео каталога отлично подойдет.
Да еще и плагином оформлено.
Возьму в коллекцию. Полюбасу пригодится!

edd 8 лет назад #

спасибо за работу
на основе вашей верстки я делаю для 2
http://fimgi.ru/Video
немного не доделал

Apsent 8 лет назад #

Жаль что для 1.10.5 нет

Вёрстка просмотра списка статей под видео для InstantCMS 1.10.6

Вёрстка просмотра списка статей под видео

Реклама #

Kreator 8 лет назад #

Джехутимери 8 лет назад #

Майкл 8 лет назад #

Джехутимери 8 лет назад #

Майкл 8 лет назад #

Джехутимери 8 лет назад #

lezginka.ru 8 лет назад #

Станислав Григорьевич (Мозголом) 8 лет назад #

Upliner 8 лет назад #

edd 8 лет назад #

Apsent 8 лет назад #

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление

Виджет "Список групп" для InstantCMS 2.5.1

Портальный шаблон MTheme

InstantCMS Team

О проекте

Поддержка

Дополнения