На скриншоте выше пример каталога трейлеров сериалов на движке 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>
Адреса картинок
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>
И теперь при добавлении нового ролика достаточно в графу дополнительного поля вставить хвост ссылки и он автоматически добавится к коду ролика для полных новостей и в код картинки для коротких новостей.
Для топа новостей делается аналогично. Достаточно выдернуть код картинки из файла коротких новостей!
Нюансы с шаблоном
Как можно догадаться, в данном решении шаблоны коротких и полных новостей по умолчанию, вместе с кодами выше будут применяться для всех остальных категорий, где они не нужны (статьи, фото и т.д.). Решения ниже.
Отдельные шаблоны
Заходим в раздел категорий и находим там место для вставки названия файлов-шаблонов новых категорий (как вариант, fullstory-video.tpl, shortstory-video.tpl).
Названия не играют никакой роли, главное код и формат — .tpl. Дублируете код шаблонов в новые файлы и вписываете в форму.
Скрываем лишнее
Встроенный тег catlist служит условием: если id категории совпадает — показывать код внутри тегов. Достаточно обернуть код видео, как в примере ниже и он будет показываться только для тех категорий, номер которых указан в теге.
<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>
Статья просто супер! 5 баллов. Давно искал такую инструкцию
Спасибо, старался)
Здравствуйте, а если у меня только одна категория на сайте для видео,остальные выводятся картинки тогда как быть с shortstory для видео?
Два варианта: использовать отдельные файлы для короткой и полной новостей (см. категории) или на xf_given вывести в основном шаблоне.
Точнее, на [catlist=id-категории
Обновил текст статьи