Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера

Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера | n-wp.ru

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

Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера

Специально для создания отзывчивого в изменениям размеров, гибкого дизайна были придуманы специальные элементы CSS-разметки, описывающие поведение HTML-элементов на страницах, просматриваемых на экранах с определенной шириной. Давайте создадим шорткод, позволяющий публиковать изображения, обладающие отзывчивой шириной (автоматически подстраивающиеся под изменение ширины браузера, в котором просматривается сайт).

Для создания шорткода нужно вставить нижеприведенный код в файл functions.php:

function responsive_images($atts, $content = null) {
     return '
' . $content .'
'; } add_shortcode('responsive', 'responsive_images');

В этом шорткоде мы помещаем изображение в элемент DIV класса image-resized. Теперь нужно описать этот класс в файле style.css:

.image-resized img {
        width:100%;
        height:auto;
    }

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

/* экраны шириной 240px */
@media only screen and (max-width: 319px) {
    .image-resized img {
        width:240px;
        height:auto;
    }
}
 
/* экраны шириной 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .image-resized img {
        width:320px;
        height:auto;
    }
}
 
/* экраны шириной 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .image-resized img {
        width:480px;
        height:auto;
    }
}

Задаются несколько параметров, указывающих изображению автоматически сужаться до размеров экрана устройства, на котором они просматриваются. Таким образом можно добиться автоматического уменьшения ширины изображения без нарушения пропорциональности и выхода изображения за пределы экрана.

Так как у шорткода нет дополнительных аргументов, то использовать его очень легко:

[responsive]alt[/responsive]
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

3 Комментарии

  1. Я очень извиняюсь, но.. ЩИТО??? У меня этот вопрос вызывает аж несколько кусков всей этой истории.

    1) Зачем вообще использовать шорткод? Дописать див с классом (или, даю хинт, просто класс к изображению) не сложнее, чем дописывать шорткод.
    2) Адаптивность этой картинки почти бесполезна на неадаптивном сайте
    3) Зачем использовать медиа-кверис, и зачем использовать абсолютные значения ширины изображения в них, когда достаточно одной только 100% ширины и авто-высоты?
    4) Зачем вообще давать изображению какую-то обертку? В большинстве тем можно просто добавить селектор .post img – и тогда все изображения будут адаптироваться под ширину экрана. Для изображений, которым это не нужно, нужно просто установить в css стили для стандартных вордпрессовских классов alignone, alignleft и alignright.

    И последнее – если человек установил себе адаптивный шаблон, то всё это вообще не нужно – все и так уже настроено до него, и ему остается только картинку вставлять стандартными способами.

    P.S. “Отзывчивый дизайн” – вполне себе общепринятый термин. Взять хоть, к примеру, книгу Итана Маркотта “Отзывчивый веб-дизайн”. Кроме того, в русском языке принято переводить responsive как “адаптивный”, хотя это уже не совсем верно – “adaptive” – это более широкое понятие, включающее в себя “responsive”.

    • С высоты своего опыта многие посты в этом блоге вам могут показаться наивными, нелепыми и даже смешными, настолько несущественные в них описываются проблемы и решения. Однако смею напомнить, что это блог для новичков. Вы не поверите, какие вопросы задают некоторые посетители (например, как на отдельной странице вывести посты определенной категории, не подозревая, что такая страница у них уже есть). А если отмотать в первым постам, то вам и вовсе покажутся описываемые темы жутко наивными и очевидными. Когда-то я тоже был наивным новичком, смотрящим на все эти коды, как на египетские иероглифы.

      Шорткод – чтобы на примере показать, как создавать простейший шорткод. К тому же многие используют не отзывчивые темы, а редактировать CSS и PHP побаиваются или не умеют, а тут им предлагается и объясняется простейший шорткод. Разметка @media – для того, чтобы познакомить новичков с этим приемом. Освоив эти базовые приемы, некоторые смогут перейти к созданию собственных шорткодов, а может и к адаптации темы.

      • Но ведь для того, чтобы создать этот шорткод, придется редактировать и CSS и PHP, разве нет?
        В качестве непосредственно элементарного примера – может быть, ок.

        И опыт тут совершенно ни при чем: это, я бы сказал, первый пост в этом блоге, который вызвал у меня такое удивление – дело не в его простоте, а напротив – в его чрезмерной усложненности. Поставленная задача решается одной строчкой в CSS в практически любом шаблоне.

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*