Робота із зображеннями

У нашій системі робота із зображеннями зроблена так, щоб було максимально зручно їх завантажувати та використовувати. Зображення спочатку додаються до сторінки, а потім так само просто вставляються прямо в контент за допомогою нашого унікального Markdown-тега.

Нічого не заважає використовувати ці самі зображення на інших сторінках сайту. Просто під час редагування контенту зображення, які прив’язані до конкретної сторінки, вставляються одним кліком у місце, де стоїть курсор у редакторі. А при використанні на іншій сторінці доводиться просто скопіювати тег зображення та вставити його в потрібне місце. Але за бажання ми можемо легко переробити цю систему.

Зображення можна завантажувати одразу кількома способами: вибрати файли з комп’ютера, додати їх прямо з телефона, перетягнути в потрібну область і навіть вставити через Ctrl+V, якщо картинка вже знаходиться в буфері обміну. Також можна завантажувати не тільки одне зображення за раз, а одразу кілька.

Під час завантаження система автоматично перетворює зображення в сучасний WebP-формат, який забезпечує високу якість при меншому розмірі файла. Оригінали зберігаються, тому за потреби можна легко змінити ступінь стиснення або залишити зображення в початковому форматі.

Зображення всередині X-MD блоків

Тег із зображенням можна вставляти прямо всередині X-MD-блока. Не потрібно вручну його прописувати, достатньо в редакторі вибрати потрібне, уже завантажене зображення зі списку, і система сама додасть цей тег у контент, у те місце, де стоїть курсор.

На сайті це відображається не як технічна вставка, а як акуратний контентний блок: зображення стає частиною статті, а текст красиво обтікає зображення, особливо це важливо на великих екранах. На мобільних пристроях зображення займає всю ширину, а текст іде вже після нього.

Обтікання тексту зображенням

Для красивого оформлення сторінки важливо не просто вставити зображення, а зробити так, щоб текст красиво обтікав його. Тому ми розробили систему, яка дозволяє легко керувати розташуванням зображення відносно тексту. Для зображення можна вибрати розташування:

![Опис зображення](/img/example.webp){.img-left}
![Опис зображення](/img/example.webp){.img-right}
![Опис зображення](/img/example.webp){.img-center}

• .img-left - зображення зліва, текст іде поруч справа.
• .img-right - зображення справа, текст іде поруч зліва.
• .img-center - зображення по центру, зручно для великих ілюстрацій.

Це дозволяє оформляти сторінку не одноманітно, а більш живо: чергувати зображення зліва і справа, робити центральні ілюстрації, розбивати довгий текст візуальними акцентами. Часто на широких екранах, коли тексту недостатньо, щоб заповнити простір поруч із зображенням, можна додатково вказати на новому рядку після тексту з вбудованим зображенням - +++, щоб наступний текст не обтікав попереднє зображення, а починався вже після нього з нового рядка.

Також, щоб ще краще візуально відокремити абзаци з текстом, можна використовувати стандартний Markdown-тег ---, який працює як <hr> у звичайному HTML. Якщо ви хочете, щоб це розділення виглядало не як тонка лінія, а наприклад, як три зірки, або ще якось інакше, ми можемо легко для вас це налаштувати.

Розмір зображення

Якщо потрібно, розмір зображення можна налаштувати прямо в самому тегі:

![Опис зображення](/img/example.webp){.img-left size=80}

Параметр size допомагає керувати тим, наскільки великим буде зображення в текстовому блоці. 80 у цьому випадку означає 80% від початкового розміру.

Це зручно, тому що не потрібно кожного разу робити нове зображення, створювати окремий дизайн або вручну змінювати CSS. Достатньо змінити параметр size тега зображення всередині контенту.

Квадратне обрізання та фокус зображення

Велика проблема при вбудовуванні зображень у контент полягає в тому, що сучасні зображення найчастіше бувають горизонтальними або вертикальними. Це створює окремі труднощі, коли потрібно красиво вставити їх усередину сторінки.

Найзручніше працювати з квадратними зображеннями: їх можна акуратно розміщувати сіткою, вони не виглядають занадто вузькими або занадто високими на мобільному пристрої.

Але ручне обрізання зображення до квадратного вигляду - це додаткові труднощі. А автоматичне приведення зображення до квадрата може призвести до того, що складно підібрати правильний фокус: важлива деталь може опинитися вище центру, нижче центру, лівіше або правіше.

Тому ми придумали систему, при якій цих складнощів більше немає. Ми просто додаємо ключ square до тега зображення. Якщо зображення вертикальне, система бере його початкову ширину і робить квадрат за цією шириною. Якщо зображення горизонтальне, система бере його початкову висоту і робить квадрат за цією висотою.

У звичайному випадку цього достатньо: зображення стає квадратним і добре вбудовується в контент або сітку.

Але якщо реальний центр зображення виявляється не там, де потрібно, його можна легко поправити за допомогою додаткових ключів: x= для горизонтального зміщення і y= для вертикального.

![Вертикальне зображення зі зміщенням вниз](/img/example_1.webp){.img-right square y=-15}
![Горизонтальне зображення зі зміщенням вправо](/img/example_2.webp){.img-right square x=10}

Значення береться від центру, тому можна використовувати як позитивні, так і негативні значення. Наприклад, негативні значення потрібні для зміщення фокуса вліво або вниз.

Якщо навіть на квадратному зображенні об’єкт, який потрібно показати, усе одно занадто маленький або зміщений в одну зі сторін, можна використовувати ключ zoom. Він дозволяє наблизити зображення всередині картинки, а потім за допомогою ключів x і y правильно спозиціонувати потрібний об’єкт на фотографії.

• x - рухає фокус зображення по горизонталі.
• y - рухає фокус зображення по вертикалі.

![Важливий об’єкт знаходиться знизу праворуч](/img/example_3.webp){.img-left square zoom=120 x=10 y=-15}

Таким чином можна акуратно кадрувати зображення без окремої підготовки файла в графічному редакторі.

Кілька зображень поспіль

Якщо поставити кілька зображень поспіль, система може автоматично зібрати їх в акуратну сітку і підлаштувати під ширину екрана:

![Перше зображення](/img/photo-1.webp){.img-left square size=80 zoom=120 x=10 y=-15}
![Друге зображення](/img/photo-2.webp){.img-left square size=80}
![Третє зображення](/img/photo-3.webp){.img-left square size=80 zoom=150 x=42}

При цьому тег .img-left або .img-right не впливає на розташування зображень усередині сітки. Але їх усе одно потрібно використовувати, щоб система розуміла, що це зображення, а не відео-блок.

На сайті такі зображення виглядатимуть акуратно та не будуть випадково розкидані по сторінці.

Alt-текст для зображень

Усередині квадратних дужок вказується опис зображення:

![Опис зображення](/img/example.webp){.img-center}

Цей опис важливий одразу з кількох причин:

• допомагає пошуковим системам краще розуміти зображення;
• покращує доступність сайту для людей з обмеженими можливостями, які використовують екранні читалки;
• робить контент акуратнішим та професійнішим;
• допомагає під час роботи з контентом розуміти, що знаходиться на фото.

Тому зображення краще додавати не з порожніми квадратними дужками, хоч це і допустимо [], а робити зрозумілий опис.

Зручно для розвитку сайту

Головна ідея цієї системи - зробити роботу із зображеннями всередині тексту простою, надійною та зручною для користувача.

Коли потрібно замінити фото, додати нову ілюстрацію, підготувати статтю, сторінку послуги або інструкцію, не потрібно заново переробляти зовнішній вигляд блока. Достатньо вставити зображення в потрібне місце та вказати кілька зрозумілих параметрів.

Завдяки цьому сайт можна розвивати швидше: додавати нові сторінки, оновлювати старі матеріали, готувати мультимовні версії та зберігати єдиний візуальний стиль.

У підсумку зображення стають не складними вставками, а повноцінною частиною контентної системи сайту: акуратною, гнучкою та зручною для роботи людини і AI-моделей.