Advanced Image Styles
Advanced Image Styles это простенький плагин, который позволит вам прямо в редакторе WordPress прописать отступы для медиафайлов. Конечно, никто не мешает вам прописывать эти отступы вручную на вкладке редактора "Текст", но с плагином это сделать намного удобнее и проще.
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1 Распаковываем архив.
2 Копируем папку advanced-image-styles в /wp-content/plugins/.
3 Заходим в админку блога на вкладку "Плагины" и активируем плагин.
Сначала немного теории. Каждый медиафайл в редакторе вы можете выровнять при нажатии на следующие кнопки:
По левому краю, по центру и по правому краю. Думаю, что вам это и так известно. При нажатии на эти кнопки редактор добавит медиафайлам следующие css-классы: alignleft, aligncenter и alignright. В любом более менее приличном шаблоне для этих классов прописаны необходимые отступы. Если нет, то вы можете прописать их сами, добавив в файл styles.css шаблона код:
.alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } |
Тем самым любые медиафайлы в опубликованной записи будут отформатированы согласно отступам, указанным в этом css-коде. Картинки в опубликованных записях будут выводиться с небольшими отступами:
Здесь картинка в записи выравнена по левому краю. С отступами в 2 пиксела снизу и 7 пикселей справа. Плюс еще 4 пикселя составляет невидимая рамка, прописанная в коде как padding. Картинка не прилегает вплотную к тексту и прекрасно вписывается в запись.
Неудобство тут только одно – все картинки в записи имеют совершенно одинаковые отступы. Иногда, это может очень сильно помешать, если картинка нестандартная или картинки вставляются в ряд или еще в каком непредвиденном случае.
Вот для таких ситуаций вам и понадобится плагин Advanced Image Styles, который позволит вам прописать отступы вручную, плюс даст возможность установить границу и ее цвет. Например, вот такие настройки медиафайла:
Дадут в результате более увеличенные отступы и видимую границу:
При этом настройки отступов, указанные в styles.css будут игнорироваться.
Странно, что подобный функционал не встроен в WordPress изначально. Остается только надеяться, что в одном из следующих релизов движка данная функция будет встроена по умолчанию и больше не придется устанавливать сторонний плагин для такой сущей мелочи.
Advanced Image Styles
Автор плагина: Gregory Cornelius
Рассматриваемая версия: 0.2 от 25.04.2014
Текущая версия: 0.4.1 от 10.02.2018
Совместимость с версией WordPress: 3.9 и выше
Активных установок плагина: 10 000+
Скачать плагин версии 0.4.1 (всего скачено 147 055 раз)
Понравился пост? Подпишись на обновления по RSS или Twitter !
#1,
Не могу разобраться с тем, как устанавливать отступы. На примере, который у вас указан написано 5 пикселей Bottom (снизу) и 22 пикселя Right (справа). А на картинке у вас визуально отступы одинаковые, что снизу, что справа. Я этот момент не понимаю, не подскажите?
#2,
ну это совсем просто - полностью вы можете регулировать только отступы справа и слева. а нижний и верхний отступ зависят от текста. то есть левая часть строки же не может под картинкой быть ближе, чем правая часть строки, которая не под картинкой.
как бы выразится точнее - у строк есть свой межстрочный интервал, соответственно вы можете только отодвинуть строку сверху или снизу минимум на величину этого межстрочного интервала. я мог там написать и не 5 пикселей, а 12 - ничего бы не поменялось, так как межстрочный интервал больше. криво объяснил, но надеюсь понятно.
#3,
Я поняла, спасибо. Странно, что сама не догадалась..
#4,
Абсолютно бесполезный плагин! Сложно что ли зайти в "Текст" и прописать margin вручную? Только блог нагружать лишними плагинами!
#5,
две трети всех плагинов для вордпресса можно заменить ручками или кодом в functions.php. только вот вести блог станет намного сложнее. а насчет нагружать - вы правда думаете, что такой маленький плагин, работающий лишь в админке и лишь для админа блога может нагрузить ваш сервер?
#6,
Сам пользоваться не буду, а вот на клиентские сайты поставлю - копирайтеры нынче плохо знают html и css, им вручную margin прописать это как на луну слетать. Причем я даже и не сильно преувеличиваю.