Делаем встраиваемое видео и галереи адаптивными
Все знают, что вставлять видео в wordpress невероятно просто и удобно? Просто вставьте в текст ссылку на видео с youtube, vimeo или другой популярной площадки, и все готово. Но мало кто знает, что таким же образом можно делать и другие интересные штуки – например, вставить ссылку на твит:
It doesn’t really matter what HTML/CSS/JS framework/preprocessor/technique you use. It matters if the work you create helps people.
— Tom Kenny ? (@tkenny) February 19, 2015
или добавить фотогалерею.
Единственное неудобство, что на данный момент встраиваемые функции не поддерживают адаптивный дизайн по умолчанию. Видео имеет фиксированную ширину, для галерей прописана жесткая разбивка на колонки, которая не меняется при изменении экрана. Предлагаю вам небольшой патч, который исправит эту неприятность до тех пор, пока wordpress сам не введет подобную поддержку на уровне ядра.
Вот этот код вставьте в файл functions.php вашей темы:
1 2 3 4 5 6 7 8 | /* Добавляем адаптивный контейнер вокруг нашего embed /* ------------------------------------ */ function alx_embed_html( $html ) { return '<div class="video-container">' . $html . '</div>'; } add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 ); add_filter( 'video_embed_html', 'alx_embed_html' ); |
назначение понятно из комментария.
И добавляем вот этот код в файл стилей:
1 2 | .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Украдено Подсмотрено здесь: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/
Чтобы сделать адаптивной вашу галерею, добавьте следующий код в файл стилей:
1 2 3 4 5 6 7 8 9 | /* Адаптивная галерея /* ------------------------------------------ */ @media only screen and (max-width: 767px) { .gallery .gallery-item {width: 49% !important;} .gallery br {clear: none !important;} } @media only screen and (max-width: 480px) { .gallery .gallery-item {width: 100% !important;} } |
Что делает код: на экранах меньше 767 пикселей картинки будут выстраиваться в две колонки, независимо от настроек галереи. А на еще более маленьких экранах – в одну колонку.
Анонс: по просьбам некоторых своих клиентов я готовлю новый видеокурс: “Wordpress для контент-менеджера”. Думаю, по названию понятно, о чем это. Серия небольших видео на все или, хотя бы, большинство аспектов работы с контентом на wordpress-сайте. Курс будет бесплатным