(Редакция 25 февраля 2026)
Это страничка обучающая вставлять фото в код постов. Есть стандартный способ вставки через кнопку «Добавить медиафайл», который не дает достаточной гибкости в управлении положением фото внутри поста.
Чтоб избежать этого, была разработана техника вписывания фото в блоки нескольких стандартных размеров. Эта техника использовалась на сайте несколько лет, но оказалась в некоторых проявлениях сырой. Но мы развили новый формат оформления страниц без прежних недостатков, который прозрачнее и гибче прежнего. Отметим, что прежняя форма размещения фото остается работающей, но все же советуем её избегать.
Новые правила организации страницы с фото
*** Код предлагается явно делить на секции, которые на странице браузера будут размещаются строго друг над другом. Каждая такая секция начинается с тега <SECTION> и кончается тегом </SECTION>.
*** Как и прежде каждое фото нужно оборачивать в особый блок, который будем назвать фоторамкой. Внутри его должен располагаться элемент ссылки с тегом А, внутри ссылки собственно фото. Это делается по следующему шаблону:
<div class=»w# h#»>
<a href=»АДРЕС ФОТО» rel=»lightbox»>
<img src=»АДРЕС ФОТО» />
</a>
</div>
Такая сложная структура блока фото обеспечивает обрезание любых фото под заданный размер, что позволяет красиво разместить фото на странице. Обрезанная часть фото становится невидимой, но если щелкнуть по фото, то фото разворачивается в полном виде на все доступное окно. Чтобы это работало, нужен атрибут rel=»lightbox».
В шаблоне знаки # заменяются на соответствующие проценты. А АДРЕС ФОТО вставляется один и тот же дважды. Второй адрес из них, определяет то фото, которое появится после загрузки страницы в браузер, первый же определит фото, которое будет загружено дополнительно после щелчка по фото уже без обрезки краев. Проще всего использовать в обоих случаях одно и тоже фото, хотя это не оптимально с точки зрения скорости загрузки страницы.
Как выглядит АДРЕС ФОТО
Этот код есть реальный сетевой адрес фотографии.
АДРЕС ФОТО может, например, выглядеть как «https://verenitsa.ru/wp-content/uploads/2020/01/karta-v-uftyuga.jpg», если это фото уже загружено в коллекцию файлов сайта (в библиотеку). Получить этот код в системный буфер для последующей вставки можно нажав в библиотеке кнопку «Скопировать URL в буфер» при выбранной фото.
Часто мы ссылаемся на фото не из библиотеки сайта, а из внешнего источника. Это экономит место на сервере сайта и время программиста, но обычно замедляет загрузку страницы. В таком случае код может быть весьма длинным и, в отличие от кодов внутренних файлов заканчиваться не привычным .JPG, а как угодно. Получить такой код в буфер системы можно в большинстве случаев, если над соответствующей фото любого сайта щелкнуть правой кнопкой мыши и выбрать из контекстного меню строку вроде «Загрузить URL фотографии». Заметим, что фото на внешнем сайте (и даже сайт целиком) может вдруг исчезнуть и тогда на странице нашего сайта возникнет дыра.
Код в таком формате можно вставлять прямо в текст, и тогда фото будет выравниваться по правому краю страницы. Если таким образом подряд разместить насколько фото, завернутые в фоторамки подходящей ширины, то фото окажутся на одном горизонтальном уровне. Неприятность однако в том, что первая фото будет самой правой, вторая левее и так далее. То есть в порядке, противоположном расположению кодов.
Формат фотоблока для размещения рамок
Чтоб избежать этого нелогичного размещения, группа фото, размещаемых рядом горизонтально, оборачивается в особый блок DIV со своим классом.
Блоку придается один из четырех возможных классов: foto100, foto70, foto50, foto70. Такой блок тоже выравнивается на странице по её правому краю. Но фото внутри его будут иметь правильный порядок. В зависимости от выбора его класса фотоблок будет иметь разную ширину: при классе foto100 — блок занимает всю ширину страницы, при foto70 — 70 процентов страницы и так далее.
Как задаются размеры фоторамки
Определены новые классы для задания ширины фоторамки. Возможные классы ограничены списком: w100, w75, w70, w67, w60, w50, w40, w33, w30, w25, w20. Число в классе означает ширину фоторамки в процентах от оборачивающего блока. Если оборачивающего блока нет, то процент отсчитывается от ширины страницы.
Другая группа классов определяет высоту фоторамки: h20, h25, h3, h35, h40, h50, h60, h70, h80, h90, h100, h120, h150. Здесь числа — тоже проценты от той же ШИРИНЫ оборачивающего блока (не высоты!). Набор чисел именно такой ка выше. Если задать класс с другим числом, он будет игнорирован.
Примеры кодов
Одинокое фото среди текста
На этой странице указанный ниже код вставлен сразу после ромбика: ♦
Сам код выглядит так:
<div class=»w50 h30″>
<a href=»https://verenitsa.ru/1kx1k.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/1kx1k.png» />
</a>
</div>
Невидимый здесь код после ромбика создал фото на правом краю страницы, шириной в половину ширины настоящей страницы. Тот текст, что вы сейчас читаете, обтекает картинку с левой стороны. А если вы смотрите этот текст на телефоне, то возможно настоящий текст, обтекая картинку, спустился и ниже её.
В этом примере использована картинка квадратной формы с кругами на ней, а рамка указана неквадратная. При вписывании часть фото сверху и часть снизу была обрезана.
Как сдвинуть фото внутри рамки
Есть возможность управлять вписыванием фото в фоторамку. Пусть, например, в квадратную фоторамку мы вписываем фото с высотой более его ширины. Если что-то отрезается, в отрезанную часть не должны попадать важные элементы фотографии (лица, например). Есть возможность принудительно фото в блоке сместить вверх или вниз. Для этого в КЛАСС надо добавить букву «н» или «в». Буква «н» сместит при обрезке фото так, чтоб было видно его низ. А буква «в» обеспечит видимость верхней границы фото. Аналогично, если фото обрезается с боковых сторон, видимость одной из них можно обеспечить добавляя коды «л» и «п».
Примеры сдвига.
Класс, записанный в виде «w50 h30 н», означает вписывание фото во блок шириной в половину ширины оборачивающего блока, а высотой тридцать процентов от той же ширины. Причем, если фото обрезается по высоте, то останется виден его нижний край. Если обрезаются левая-правая стороны, то класс «н» просто игнорируется.
Класс, записанный в виде «w50 h50 5», означает вписывание фото в блок одной ширины и высоты, равных половину ширины оборачивающего блока. Число 5, присутствующее в классе, не играет роли в компоновке страницы, но может быть полезным как условный номер фотографии. Такие номера полезны для поиска фото в длинном коде, где число фотографий велико.
Две картинки подряд
Коды картинок вставлен сразу после ромбика: ♦
Сами коды выглядят так:
<div class=»w30 h30″>
<a href=»https://verenitsa.ru/1kx1k.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/1kx1k.png» />
</a>
</div>
<div class=»w30 h30″>
<a href=»https://verenitsa.ru/5.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/5.png» />
</a>
</div>
Первая картинка в этом примере та же, что в предыдущем, а вторая вдвое шире. Поскольку размеры рамок здесь указаны одинаковые, но не те, что прежде, обрезка картинок. изменилась. Вместе картинки заняли 60 процентов ширины. И вторая стоит левее первой.
Те же две картинки помещенные в общий блок
Коды картинок вставлен сразу после ромбика: ♦
Теперь код выглядит так:
<div class=»foto50″> <!— фото>>>> —>
<div class=»w50 h50″>
<a href=»https://verenitsa.ru/1kx1k.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/1kx1k.png» />
</a>
</div>
<div class=»w50 h50″>
<a href=»https://verenitsa.ru/5.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/5.png» />
</a>
</div>
</div>
Порядок картинок изменился.
И заметьте, что теперь размеры рамок считаются не от ширины страницы, а от ширины блока с классом foto50.
Здесь уже все хорошо, но на широком дисплее вы будете видеть, что последние картинки разместились уже не сразу вслед за ромбиком, а пониже. Другими словами, компоновка картинок стала плохо предсказуемой.
Тот же блок с картинками уже внутри секции, которая начинается сразу за ромбиком: ♦
<section id=»1″>
<div class=»foto50″> <!— фото>>>> —>
<div class=»w33 h30″>
<a href=»https://verenitsa.ru/1kx1k.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/1kx1k.png» />
</a>
</div>
<div class=»w67 h30″>
<a href=»https://verenitsa.ru/5.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/5.png» />
</a>
</div>
</div>
<section />
К секции в этом примере мы приделали необязательный класс в виде атрибута id=»1″. Он полезен для ориентировки в коде, где есть много секций.
Перед закрывающий тегом секции </section> следует размещать текст, относящийся к картинкам. В настоящем примере на месте этого текста находится гипертекст кода с картинками.
Если коротко, каждая полноценная секция делается по такому шаблону:
<section id=»1″>
<div class=»foto…»>
….
</div>
Текст, обтекающий блок с классом «foto…» .
<section />
Если блок состоит только из фото, не включает текста, тогда он обычно занимает всю ширину страницы и заворачивание его в теги секции можно пропускать.
В планах у нас есть следующая добавка (ещё не реализована).
Если в шаблоне будет присутствовать элемент <txt>Текст надписи</txt>, то слова «Текст надписи» наложатся на фотографию. Естественно, «Текст надписи» должен быть заменен на содержательный.
