Это страничка обучающая вставлять фото в код постов. Стандартный способ вставки через «Добавить медиафайл» не дает достаточно гибкой возможности управлять положением фото внутри поста.
Предлагаемый ниже метод организации фото и текста на страницах сайта делает её прозрачнее и компактнее. Замечу, что методы, которые я предлагал прежде, неограниченно остаются в силе.
Главное новшество в том, что код явно делится на секции, которые на странице браузера размещаются строго друг над другом. Каждая такая секция начинается с тега <div class=»sec»> и кончается тегом </div>:
<div class=»sec»>…</div>
Собственно фото и текст внутри каждой секции размещаются по тем же правилам, что и прежде.
Заполнение секции может быть произвольным, но если в в ней присутствует блок фото фото, то фото выравниваются влево, а текст следующий за фото обтекает фото, если для того есть место. По умолчанию блок секции обводится СВЕТЛО-СЕРОЙ рамкой. В примерах ниже она заменена на красную только для наглядности. Рамку можно убрать добавлением в элемент класса «nr» или «бр». То есть код секции Без Рамки выглядит так:
<div class=»sec бр»>…</div>.
Есть еще один класс для секции, который распределяет её содержимое по нескольким столбцам. Это класс «кол».
<div class=»sec кол»>…</div>.
Примеры оформления секций
То как все может выглядеть на сайте, представлено на изображении ниже. Рядом обсуждается код (он на подкрашенном фоне), который может дать такой результат. Для краткости код представлен лишь примерный, и он не совпадает с полным кодом в том, что
- тексты, которые видны на фото слева не совпадают с текстами в ниже приведенном коде
- красные рамки вокруг блоков, что на фото, на самом будут светло-серыми
- вместо реальных адресов изображений внутри элементов IMG стоит фраза «(сетевой адрес изображения)». Внутри каждого блока с изображением один и тот же адрес повторяется два раза. Благодаря этому в конечном итоге изображение при щелчке по нему сможет раскрываться на весь экран.
Дальше идет собственно код с примером. Он состоит из четырех блоков, выше которых добавлен некоторый текст со своим заголовком.
(Напомним на всякий случай, что то что в коде находится между <!— и —> игнорируется браузером. Это просто комментарии.)
<!— Вот это первый комментарий. Просто чтоб все понимали как комментарий выглядит. Дальше слово «изображение» будем сокращать до «изо». —>
<h3>Заголовок над секцией</h3>
Это некоторый текст выше секции в красной рамке. Этот текст на реальной странице поста появится слева от заглавного изо поста. За этим текстом находится блок с классом «sec» и он в обязательном порядке окажется ниже заглавного изображения. Это свойство любой секции — она всегда ниже предшествующего материала, и в том числе ниже головного изо.Тут же напомним, что согласно особенностям редактора кода, любой текст, отделённый от предыдущего пустой строкой (как этот текст), на сайте автоматически превращается в абзац, первая строка которого имеет отступ.
<div class=»sec»> <!— Это начало первого блока-секции, который на фото обведён красной рамкой —>
<h3>Заголовок над изображениями</h3> <!— Этот заголовок и текст под ним окажутся выше последующих изображений. —>
Некоторый текст над изображениями…
<hr> <!— Код отбивки текста горизонтальной линией. Естественно, можно этого не делать. —>
<!— Дальше следуют два блока с изображениями, каждое из которых займет ширину в одну треть ширины поля вывода страницы (поскольку имеют класс img3). Высота каждого из блоков c изо составляет четверть ширины поля вывода страницы (поскольку имеют класс v4) —>
<div class=»img3 v4″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div>
<div class=»img3 v4″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div><h3>Заголовок…</h3>
Некоторый текст, обтекающий изображения справа (если есть место)…
<h3>Еще заголовок…</h3>Некоторый текст, обтекающий изображения справа (если есть место)…
</div><!— Конец первого блока-секции —->
<div class=»sec бр»> <!— Это начало второго блока-секции Без Рамки—>
<!— Дальше следуют два блока с изображениями, каждое из которых займет ширину в одну треть ширины поля вывода страницы (класс img3) —>
<!— В отличие от предыдущего, высоты блоков установлены разными. У первого высота — половина поля вывода, у второго — треть. —><div class=»img3 v2″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div>
<div class=»img3 v3″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div><h3>О соотношении высот фотографий</h3>
Важно, чтобы высота первого блока была больше, чем второго …
<h3>Как выбирать формат обрезки</h3>В этом блоке секции использованы те же фотографии, что в предыдущем. Но смотрятся они теперь по другому, потому что обрезаны иначе.
В зависимости от формата исходных фотографий, иногда целесообразно их построить как в этом примере.
</div> <!— Конец второго блока-секции —->
<div class=»sec кол»> <!— Это начало третьего блока-секции, который имеет дополнительный класс «кол» —>
<!— Класс «кол» задуман, чтобы размещать внутри секции текст с разбивкой на несколько столбцов. Это нужно потому, что на широком экране текст читать не слишком удобно. Класс «кол» обязывает, чтобы содержимое секции на широком экране распределилось по ТРЕМ столбцам. На узких экранах или в малом окне, блок будет делиться на меньшее число столбцов, а на смартфоне, скорее всего будет один столбец текста. В подобные блоки не следует размещать слишком длинный текст. Чтоб текст удобно читался, весь блок разом должен умещаться в рамках экрана монитора. —>
<div class=»img3″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div>
<div class=»img3″><a href=»(сетевой адрес изображения)» rel=»lightbox»><img src=»(сетевой адрес изображения)» /></a></div><h3>Заголовок…</h3>
Некоторый текст<h3>Еще заголовок…</h3>
Некоторый текст</section> <!— Конец третьего блока-секции —>
<div class=»sec кол»> <!— Это начало четвертого блока-секции, который уже не содержит фотографий и имеет класс «кол», который означает, что на широком экране блок будет разделен по столбцам. —>
<h3>Заголовок…</h3>
Некоторый текст…<h3>Еще заголовок…</h3>
Некоторый текст…</section> <!— Конец четвертого блока-секции —->
Высоту блоков фотографий можно регулировать добавляя классы типа «v#», где # заменяется одним из разрешенных чисел в соответствии со следующим ( d порядке увеличения высоты. В таблице приведены некие проценты, которые надо понимать как процент, который высота поля фото составит от ширины поля фото, при условии, что ширина поля фото есть 1/3 от ширины страницы.
v4 v14 v070 — 70%, высота равна 1/4 ширины поля отображения страницы