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

Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера | n-wp.ru
Шорткод для изображений, которые должны автоматически подстраиваться под изменение ширины браузера без потери пропорций и выхода за пределы видимой обрасти экрана.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
}
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][/responsive]
Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. Apathetic

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

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

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

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

    Ответить
    1. tiaurus автор

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

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

      Ответить
      1. Apathetic

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

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

        Ответить