Photo elements · 9 пунктів
Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут зібрано всі способи розмістити фото або серію фото в тілі матеріалу.
Дев'ять елементів нижче охоплюють статичні фігури (одне фото, пара, тріо), грід-галерею з CSS-лайтбоксом та чотири варіанти scroll-snap каруселей. Усі вони — без JavaScript-залежностей: jankу не буває, навіть коли в статті десять каруселей поспіль.
Ширина елементів задається через тири центральної колонки — .col-wide, .col-rail або .col-edge. Самі елементи ширину не задають: вони лише наповнюють той кадр, який їм дав батько.
Між елементами залишено по абзацу placeholder-тексту — щоб ви бачили, як фото веде себе в реальному потоці прози, скільки повітря треба зверху і знизу, і чи не "ламає" воно ритм читання.
01Single Image
Окреме фото в співвідношенні 16:9 на ширину центральної колонки. Використовується, коли розділу потрібна візуальна підтримка, що не вимагає виходу за межі колонки — пейзажні зйомки продукту, scene-setters, редакційна фотографія.
.col-wide · Single Image (#elem-photo-single)
Single image несе більшу вагу, ніж inline pull-quote чи callout, тож використовуйте економно — для моментів, що дійсно заслуговують на паузу в потоці тексту.
02Image Pair
Два фото side-by-side у співвідношенні 3:4 — для порівнянь "до/після", альтернативних стилізацій або парних product-видів. На вузьких в'юпортах згортається в одну колонку.
.col-wide · Image Pair (#elem-photo-pair)
Портретне співвідношення 3:4 збігається з домінантною орієнтацією fashion-фотографії, тож пара зйомок читається як збалансована одиниця, а не як два конкуруючі фокуси.
03Wide Single Image
Кінематографічне фото 21:9, яке виходить на ширину .col-rail — продовжується крізь правий рейл аж до його правого краю. Використовується для hero-переходів та section-opener фотографії.
.col-rail · Wide Single Image (#elem-photo-wide-single)
.col-rail.
Нижче 1024px тир .col-rail згортається до ширини центральної колонки, тож фото рендериться коректно навіть на планшетах і телефонах — без overflow і обрізань.
04Wide 3 Images
Три фото 3:4 одне поряд з іншим, на ширині .col-rail. Відмінно підходить для триптихів — три ракурси стилізації, три моменти зйомки, три кроки в how-to.
.col-rail · Wide 3 Images (#elem-photo-wide-three)
На вузьких в'юпортах трійка згортається в одну колонку, щоб кожне фото зберегло юзабельний розмір. Портретне 3:4 збігається з рештою fashion-фотографії у статтях.
05Photo Grid + Lightbox
Сітка з 4 фото в ряд для галерей, лукбуків чи архівів зйомок. Кожна мініатюра відкриває повноекранний лайтбокс через CSS-only :target — без JavaScript. На мобільних — 2 фото в ряд.
.col-rail · Photo Grid + Lightbox (#elem-photo-grid-lightbox)
Грід використовує квадратні мініатюри (1:1), щоб тримати візуальний ритм незалежно від оригінального співвідношення кадрів. Сам лайтбокс відкривається у 3:4 — це домінанта модної fashion-фотографії в каталозі OnLady. Стрілки ← / → та клавіша Esc працюють зі скріншоту увімкненого лайтбоксу; клік поза кадром також закриває оверлей.
062-Photo Carousel
Два слайди видимі одночасно на ширині колонки — кожен слайд займає 50%. Scroll-snap вирівнює лівий край кожного слайду після свайпу.
.col-wide · 2-Photo Carousel (#elem-carousel-2-photo)
Це універсальний робочий конячок — комфортний для послідовностей з 4–8 фото, де ні фокус single-frame, ні wide three-up неприйнятні.
071-Photo Carousel
Один слайд на повну ширину колонки — варіант з акцентом. Використовуйте, коли кожне фото заслуговує на власний кадр (campaign shots, ключові луки, side-by-side порівняння, що не повинні розділяти увагу).
.col-wide · 1-Photo Carousel (#elem-carousel-1-photo)
Добре пара з підписами, які розгортають кожен кадр — ієрархія слайду робить підпис основним текстом на екрані, а не другорядним.
08Wide 3-Photo Carousel
Три слайди видимі одночасно на ширині .col-rail — найкінематографічніший варіант, для лукбук-смуг і shoot-reels. Сидить у межах шеллу сторінки.
.col-rail · Wide 3-Photo Carousel (#elem-carousel-wide-3)
Нижче 1024px .col-rail зливається з .col-wide, тож карусель залишається робочою на мобільному — слайди звужуються до 80% ширини колонки, щоб сигналізувати горизонтальний скрол.
09Image + Text Carousel
Один слайд видимий за раз, розділений на дві колонки: фото ліворуч, текст праворуч. Для explainer-послідовностей, розборів складу, step-by-step інструкцій, де кожен кадр потребує супровідного копірайту.
.col-wide · Image + Text Carousel (#elem-carousel-image-text)
На мобільному слайд згортається в одну колонку (фото зверху, текст під ним), тож одна й та сама розмітка обслуговує і десктопний split-view, і мобільний одно-потоковий формат.
10Підсумок
Дев'ять елементів вище — основний набір для роботи з фото в статті. Грід-галерея з лайтбоксом та чотири варіанти каруселей — все pure-CSS, без runtime-залежностей: один design.js ніде не потрібен для їхньої роботи.
Якщо ви автор — пам'ятайте, що візуальний акцент швидко знецінюється: 3 single-фото поспіль читаються гірше за одну продуману пару + один wide-single. Ритм важливіший за кількість.
Якщо ви розробник — усі плейсхолдери в мокапі це div-блоки з рожевим washом. У продакшні замінюйте їх на <img> з width/height, loading="lazy" для below-the-fold та fetchpriority="high" для LCP-кандидатів.