DLE - ролики с Youtube через доп. поле с помощью картинки превью

DLE - ролики с Youtube через доп. поле с помощью картинки превью


Итак, на скриншоте выше каталог сайта на движке DLE, разделенный на три части, где в виде коротких новостей выводятся плитки видеороликов.

Создавал сайт с сериалами и стояла задача создать такой раздел. Трейлеры решил брать с YouTube и нужно было как-то максимально автоматизировать добавление этих роликов в новости DLE.

Разобрался! Придумал! Сделал даже больше, чем планировал! Естественно, код ролика я собирался добавлять через дополнительные поля и с этим проблем нет, ролик добавляется на ура, но!

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

Единственный вариант это создавать мини превью, заливать на сайт и публиковать в статью и тогда она попадает под тег image-1. Но это откровенный геморой, куча лишних телодвижений!

И тут я случайно узнал, что для каждого ролика на YouTube создается несколько превью-картинок разного размера и то, что фон для ролика это не видео, а именно эта картинка.

Вот ее то я и решил вытягивать и выводить в шаблон shortstory.tpl, а также и для топа новостей и выборки через тег custom

В итоге я добавляю в доп. поле только хвост ссылки и у меня сразу в трех блоках появляется ролик и из неоткуда картинка. А теперь пошагово настроим такой каталог:

1. Код ролика


Ниже код ролика: http://www.youtube.com/watch?v=jW-zxbIcfIs&

В конце ссылки, после знака "="(равно) добавляется хвост. Это уникальный код, котрый объединяет адрес страницы на YouTube, код видеоплеера и базу картинок. Выделено красным!

<iframe width="560" height="315" src="//www.youtube.com/embed/jW-zxbIcfIs" frameborder="0" allowfullscreen></iframe>


2. Адреса картинок



http://img.youtube.com/vi/jW-zxbIcfIs/3.jpg
DLE - ролики с Youtube через доп. поле с помощью картинки превью

http://img.youtube.com/vi/jW-zxbIcfIs/2.jpg
DLE - ролики с Youtube через доп. поле с помощью картинки превью

http://img.youtube.com/vi/jW-zxbIcfIs/1.jpg
DLE - ролики с Youtube через доп. поле с помощью картинки превью

http://img.youtube.com/vi/jW-zxbIcfIs/default.jpg
DLE - ролики с Youtube через доп. поле с помощью картинки превью

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

http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg (320х180)

http://img.youtube.com/vi/jW-zxbIcfIs/0.jpg (480 x 360)

http://img.youtube.com/vi/jW-zxbIcfIs/hqdefault.jpg (480 x 360)

http://img.youtube.com/vi/jW-zxbIcfIs/sddefault.jpg (640 x 480)

http://img.youtube.com/vi/jW-zxbIcfIs/maxresdefault.jpg (1307 x 742)


3. Объединяем


Объединяем код ролика и превью и выводим на сайте. Для этого в файле shortstory.tpl не должно быть ничего кроме кода ролика. Пошагово:

Доп. поле


Создаем дополнительное поле, называем как угодно, например preview

Файл


Редактируем файл shortstory.tpl относительно нового доп. поля:
<div class="short">
[full-link]
<img src="http://img.youtube.com/vi/[xfvalue_preview]/mqdefault.jpg" width="200px" height="130px" />
<h3>{title}</h3>
[/full-link]
</div>

Как видно из кода выше код доп. поля стал именно там, где ссылка отличается от остальных, т.е. вместо хвоста!

Размещаем


Открываем fullstory.tpl и там, где планируется вывод плеера вставляем такой кодец:
<div class="full" >
<h1>{title}</h1>

<iframe width="600" height="400" src="//www.youtube.com/embed/[xfvalue_preview]" frameborder="0" allowfullscreen></iframe>

{full-story}

</div>


И теперь при добавлении нового ролика достаточно в графу дополнительного поля вставить хвост ссылки и он автоматически добавится к коду ролика для полных новостей и в код картинки для коротких новостей.

DLE - ролики с Youtube через доп. поле с помощью картинки превью


Просто и менее 30 секунд времени. Самое сложное в данном способе, так это придумать название и выбрать нужные категории :)

Для топа новостей делается аналогично. Достаточно выдернуть код картинки из файла коротких новостей!

Нюансы с одной категорией


Как можно догадаться, в данном решении задействуется весь функционал постинга и если нам необходимо создать дополнительные разделы, например, с фото, статьями и др, заготовка видео будет везде. Решения ниже.

Отдельные шаблоны


Заходим в раздел категорий и находим там место для вставки названия файлов-шаблонов новых категорий (как вариант, fullstory-video.tpl, shortstory-video.tpl).

Названия не играют никакой роли, главное код и формат — .tpl. Дублируете код шаблонов в новые файлы и вписываете в форму.

Все, для выбранной категории используется отдельный шаблон.

Условия



Встроенный тег catlist служит условием: если id категории совпадает — показывать код внутри тегов. Пример ниже.

DLE - ролики с Youtube через доп. поле с помощью картинки превью



Понравилась статья "DLE - ролики с Youtube через доп. поле с помощью картинки превью" из раздела Веб разработка » Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 4 •  Просмотров: 4934   Дата: 11-мар-2014, 17:53

Похожие статьи

Комментарии


Гости
Статья просто супер! 5 баллов. Давно искал такую инструкцию
(16 октября 2016 14:07) • цитировать • •
#2 devarts   

admin
Цитата: rekapostra
Статья просто супер! 5 баллов. Давно искал такую инструкцию


Спасибо, старался)
(23 октября 2016 00:25) • цитировать • •
#3 Eduard   

Гости
Здравствуйте, а если у меня только одна категория на сайте для видео,остальные выводятся картинки тогда как быть с shortstory для видео?
(16 марта 2018 13:51) • цитировать • •
#4 devarts   

admin
Цитата: Eduard
Здравствуйте, а если у меня только одна категория на сайте для видео,остальные выводятся картинки тогда как быть с shortstory для видео?


Два варианта: использовать отдельные файлы для короткой и полной новостей (см. категории) или на xf_given вывести в основном шаблоне.

Точнее, на [catlist=id-категории

Обновил текст статьи
(24 марта 2018 23:14) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика