Как сделать резиновые картинки в постах

Изображения в постах отображаются не полностью

Недавно на тестовом сайте редактировал новую резиновую тему для одного из своих блогов. Для того, чтобы просматривать как будет отображаться тема на маленьком мониторе, окно в одном из браузеров было сужено до размера 1028px. Я был в шоке, когда открыл одну из статей в блоге «Программы Windows & WordPress» — многие изображения были обрезаны на 1/5 — 1/4 части. Что делать?!

Для создания пошаговых инструкций я использую много снимков, чтобы начинающим блоггерам было легче разобраться в новом для них материале. Чтобы пост выглядел более опрятным, большие снимки уменьшаю до 600px в ширину. Если уменьшенная картинка имеет большой исходный размер, я делаю её кликабельной, чтобы можно было увеличить изображение при необходимости и все детали на увеличенной картинке отображались полностью. А если снимок не кликабелен — значит, читатели не видят полностью всего того, что мне хотелось бы донести до него.

На моём мониторе размером 1440 × 900 всё отображается замечательно и я даже не подозревал, что обладатели меньших мониторов видят кривые посты с обрезанными снимками.

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

Бывает так, что необходимо показать всё окно браузера и стрелками указать на различные детали на снимке, например:

Вот так должен выглядеть снимок в посте:

Уменьшим ширину окна браузера до стандартного размера 1200px и видим, что две стрелки справа исчезли (обрезаны) и если картинка не кликабельна, то читателю приходится только догадываться, на что указывали исчезнувшие стрелки.

Чтобы исправить подобную неприятность, открываем статью в HTML-редакторе WordPress. Вот так выглядит код картинки:

    Стрелками показаны ширина (width) и высота (height) картинки. По умолчанию размеры изображения  отображаются в пикселях, поэтому значение «px» в коде не указывается. Известно, что пиксель, это фиксированная величина, поэтому, чтобы сделать картинку изменяющуюся в размерах без потери качества при увеличении или уменьшении окна браузера, мы укажем размеры картинки в процентах (%).

Казалось бы, всё просто, но как перевести например, ширину 600 пикселей в проценты?

Как вычислить в процентах занимаемое картинкой место

Чтобы сделать перерасчёт из пикселей в проценты, воспользуемся простой школьной формулой:

L : L1 × 100 = (ширина картинки в процентах)

Где:

• L — ширина картинки в пикселях
• L1 — ширина текстового поля
• 100 — значение в процентах (100 процентов)

Простым языком это звучит как, ширина картинки делённая на ширину текстового поля и умноженная на 100 процентов, получаем ширину картинки в процентах. Ну, допустим ширину картинки мы знаем, а как узнать ширину текстового поля, если в резиновой вёрстке темы, в таблице стилей указана ширина контента в процентах? Относительно чего делать расчёты?

Как узнать ширину текстового поля в резиновой теме

В браузере Mozilla Firefox (до версии 57) установите приложение Firebug, для этого пройдите по ссылке:

 https://addons.mozilla.org/ru/firefox/addon/firebug/?src=ss 

В открывшемся окне нажмите зелёную кнопку: +Добавить в Firefox.

          Если справа вверху откроется вот такое окошко — нажмите: Разрешить.

В следующем открывшемся окне нажмите: Установить сейчас.

Как только дополнение установится, в правом верхнем углу появится значок в виде жучка. На снимке он имеет серую окраску, но после активации значок приобретает цветной окрас. Если предложат перезагрузить браузер — согласитесь, перезагрузка браузера проходит очень быстро.

Откройте свой сайт и откройте статью. Затем, нажмите на значок (стрелка на снимке сверху) или нажмите клавишу F12. По умолчанию дополнение откроется внизу окна. В правом окошке дополнения нажмите кнопку: Макет (стрелка 1). В левом верхнем углу дополнения активируйте (нажмите) кнопку анализа блоков (стрелка 2).

Найдите картинку, которую нужно измерить, а затем изменить её параметры. Наведите курсор на картинку (стрелка 1) и в окошке: Макет увидите реальные размеры картинки (стрелка 2). Запишите их, чтобы не забыть.

На снимке сверху вы видели, что при наведении курсора вокруг картинки появляется тонкая синяя рамка. Медленно сдвигайте курсор влево до появления следующей рамки вокруг изображения (стрелка 1). Это и есть то поле в котором должна находиться картинка. Ширина рамки, это ширина текстового поля, а высота рамки, это высота картинки плюс отступы сверху и снизу, которые я указываю при установке картинки в пост.  В окошке: Макет отображаются размеры этого поля (стрелка 2). Кстати, на снимке очень яркий пример неправильной вёрстки шаблона, картинка выступает за пределы текстового поля в правую сторону. Размеры так же запишите, чтобы не забыть.

Имея полученные размеры начинаем вычислять размеры картинки в процентах. Подставляем наши размеры в формулу: 660 : 662 × 100

Расчёты можно производить на встроенном в систему компьютера калькуляторе или в онлайн-калькуляторе по адресу: Онлайн-калькулятор  или Здесь.

660 : 662 × 100 = 99,69% (округляем до 99%) — ширина картинки в процентах

135 : 202 × 100 = 66,8% (округляем до 67%) — высота картинки в процентах

Как изменить размер картинки в редакторе WordPress

В верхнем горизонтальном меню WordPress нажмите кнопку: Редактировать запись. В моём случае запись уже опубликована, поэтому вход в редактор осуществляется из окна браузера. Если запись ещё не опубликована, к ней можно добраться через: Админ-панель/Все записи/Изменить.

В открывшемся визуальном редакторе найдите изображение, которое нужно отредактировать, кликните по нему левой клавишей мыши и нажмите на значок: Редактировать (указано стрелкой).

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

В окне дополнительных настроек видим размеры картинки в пикселях, а нам надо, чтобы размеры были в процентах.

И так, мы помним, что ширина данной картинки равна — 99%, а высота — 66%. Убираем старые значения, вписываем новые и, обязательно обновляем настройки.

Попав снова в визуальный редактор не пугайтесь, если картинка несколько искажена и отображается не так, как на странице блога. Дело в том, что окно визуального редактора обычно меньше размеров страницы и картинка имея уже процентные значения, отображается иначе. Чтобы проверить мои слова, в нижнем правом углу окошка визуального редактора зажмите заштрихованный уголок левой клавишей мыши и потяните вниз и вправо. Вы тут же увидите, что с картинкой всё в порядке.

Не торопитесь обновлять запись, а нажмите на кнопку: Посмотреть изменения. При этом обычно запись открывается в новой вкладке браузера, но открыть её нужно вручную. Для новичка это важно знать, я когда-то первые три поста опубликовал, так и не посмотрев изменений в статьях, просто не знал ещё, как работает визуальный редактор WordPress.

В открывшейся вкладке браузера подведите курсор к правому краю окна и при появлении двойной стрелки, зажмите левую клавишу мыши и тащите её влево. Окно браузера при этом, будет сужаться. На снимке ниже окно сужено почти до 900px и видно, что картинка и текст чувствуют себя прекрасно. Текст читабельный, картинка отображается корректно, чего и требовалось добиться.

А вот теперь, переходим в соседнюю вкладку, т.е. назад, в визуальный редактор и, смело обновляем запись, нажав на кнопку: Обновить.

Посмотрим, как выглядит код HTML данной картинки, для этого переходим в редактор HTML, нажав на кнопку: Текст. Как видите, я уменьшил размер картинки на один процент. Вместо 99 и 66 процентов, поставил 98 и 65 процентов.

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

И ещё, немаловажный совет! Не стоит каждый раз запускать дополнение браузера для измерения поля страницы. Замерив один раз и записав или запомнив этот размер, вычисления можно производить и без дальнейших замеров. Например: Вы знаете, что ширина поля равна 756px, размеры картинки показаны в дополнительных настройках редактора изображений.  Зная ширину поля и ширину картинки в пикселях, вычисляем ширину картинки в процентах.

Высоту картинки мы так же, видим в дополнительных настройках редактора изображений — прибавляем отступы снизу и сверху, в моём случае, это по 30px, и получаем высоту поля картинки. Вот пример: Размеры картинки 604×446. Значит, 604:756×100=79.89% — это ширина. Теперь: 446+30+30=506px — это высота поля картинки. 446:506×100=88.14% — это высота картинки.

Для более точной подгонки изображения, например, лицо человека, проценты можно округлять до трёх цифр. В этом случае между целым числом и десятой частью обязательно ставить «точку» (не запятую) — 79.9%; 88.1%. И не забывать подставлять знак процента (%).

Редактирование 20-ти картинок в данном посте заняло 10 минут.

Спасибо, что дочитали пост до конца, что не понятно, спрашивайте. До новых встреч!

Удачи Вам!

 © mkoven

Поделиться ссылкой: