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

dle preview youtube - DLE - ролики с Youtube через доп. поле с помощью картинки превью
DLE — картинки подтягиваются из Youtube

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

Задача: Брать видео из Youtube и максимально автоматизировать и упростить их публикацию на сайте DLE

Алгоритм публикаций

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

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

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

Код ролика

Ниже базовый адрес страницы с видео на Youtube: http://www.youtube.com/watch?v=jW-zxbIcfIs

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

Связующий параметр ссылки выше и кода видео ниже — jW-zxbIcfIs

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

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

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

http://img.youtube.com/vi/jW-zxbIcfIs/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)

Несложно догадаться, что здесь также, как и выше, заменив связующий параметр — jW-zxbIcfIs, картинка изменится

Объединяем

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

Дополнительное поле

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

Шаблон коротких новостей

В короткие новости мы будем добавлять одну из тех картинок, которые Youtube автоматически генерирует для каждого загруженного видео. Для этого в файл 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>

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

mf dle youtube - DLE - ролики с Youtube через доп. поле с помощью картинки превью
В редакторе копируем код видео и получаем готовую новость.

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

Нюансы с шаблоном

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

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

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

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

Скрываем лишнее

Встроенный тег catlist служит условием: если id категории совпадает — показывать код внутри тегов. Достаточно обернуть код видео, как в примере ниже и он будет показываться только для тех категорий, номер которых указан в теге.

catlist dle - DLE - ролики с Youtube через доп. поле с помощью картинки превью
<div class="full" >
<h1>{title}</h1>

[catlist=номер_категории_где_используется_код_ниже]
<iframe width="600" height="400" src="//www.youtube.com/embed/[xfvalue_preview]" frameborder="0" allowfullscreen></iframe>
[/catlist]

{full-story}

</div>

Похожие записи


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

Комментарии

  1. @rekapostra пишет:

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

  2. @devarts пишет:

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

    Спасибо, старался)

  3. @Eduard пишет:

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

  4. @devarts пишет:

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

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

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

    Обновил текст статьи

Добавить комментарий