Як вставити зображення в сторінку
Зображення в CMS Tatet можуть додаватися безпосередньо до основного тексту сторінки. Це дозволяє доповнювати контент візуальними елементами та покращувати його сприйняття.
Способи додавання зображення
У редакторі передбачено кілька способів додавання зображення в текст сторінки. Кожен із них використовується залежно від джерела зображення.
Вставка з буфера обміну
Зображення можна додати безпосередньо з буфера обміну. Для цього необхідно скопіювати зображення на комп’ютері або з іншого джерела, включаючи зроблений скріншот, після чого встановити курсор у потрібному місці в полі “Вміст (основний текст)”.
Далі потрібно вставити зображення за допомогою комбінації клавіш Ctrl+V. Після виконання дії зображення автоматично з’явиться в тексті.
Такий спосіб є найшвидшим і доцільний для швидкого додавання зображень без використання додаткових інструментів.
Завантаження з комп’ютера
Для додавання зображення з комп’ютера необхідно натиснути кнопку “Upload Image”, яка розташована на панелі інструментів редактора.
Після натискання відкривається pop-up вікно “Файловий менеджер”, у якому відображаються раніше завантажені зображення. На цьому етапі можна обрати вже наявний файл для вставлення або завантажити новий.
Для завантаження нового зображення необхідно натиснути кнопку “+Завантажити”, розташовану у правій частині вікна. Після цього відкриється додаткове вікно завантаження файлу. Тут потрібно натиснути кнопку “Вибрати файл” та обрати зображення на комп’ютері. Після вибору файл відобразиться у вікні попереднього перегляду. Для завершення завантаження необхідно натиснути кнопку “Завантажити”.
Після успішного завантаження зображення з’явиться у списку файлів у “Файловому менеджері”. Для вставлення зображення в текст необхідно натиснути на відповідний файл у списку.
Такий спосіб доцільно використовувати для додавання нових зображень у систему з можливістю їх подальшого повторного використання.
Додавання зображення за URL
Зображення можна додати за допомогою зовнішнього посилання. Для цього необхідно натиснути кнопку “Image from URL”, яка розташована на панелі інструментів редактора.
Після натискання відкривається поле для введення посилання, у яке потрібно вставити пряму URL-адресу зображення та підтвердити дію. Після цього зображення буде відображене в тексті сторінки в місці встановленого курсора.
Такий спосіб доцільно використовувати у випадках, коли зображення вже розміщене на зовнішньому ресурсі та немає потреби завантажувати його у файловий менеджер.
Використання зовнішніх посилань має певні ризики. Якщо зображення буде видалене або доступ до нього буде обмежений на сторонньому сервері, воно перестане відображатися на сторінці.
Окремі особливості
Варто враховувати особливість роботи редактора з вставленим контентом. Якщо в поле “Вміст (основний текст)” вставити скопійований текст, який вже містить зображення, такі зображення додаються як зовнішні посилання та використовують свої оригінальні URL.
На відміну від цього, зображення, вставлені безпосередньо з буфера обміну, автоматично завантажуються на сервер та зберігаються у Файловому менеджері. Це забезпечує стабільність їх відображення незалежно від зовнішніх джерел.
Використання відповідного способу додавання зображень дозволяє контролювати їх доступність та надійність відображення на сторінці.
Редагування зображення в тексті
Після додавання зображення його можна налаштувати безпосередньо в редакторі. Якщо натиснути на зображення, з’явиться панель редагування з доступними параметрами:
Вирівнювання зображення
Ці опції дозволяють змінити розташування зображення відносно тексту. Доступні варіанти вирівнювання по лівому краю, по центру або по правому краю. Вибір вирівнювання впливає на сприйняття контенту та структуру сторінки.Масштаб зображення.
Для швидкого налаштування розміру передбачені фіксовані значення масштабу: 25%, 50%, 75% та 100%. Зміна масштабу дозволяє адаптувати зображення під ширину тексту або зробити його меншим.ALT (альтернативний текст).
Поле ALT використовується для опису зображення. Його заповнення є важливим з кількох причин. По-перше, цей текст враховується пошуковими системами та впливає на SEO сторінки. По-друге, він відображається у випадку, якщо зображення не завантажилось або недоступне. Також альтернативний текст використовується допоміжними технологіями для користувачів із порушеннями зору.TITLE (підказка).
Поле TITLE визначає текст, який з’являється при наведенні курсора на зображення. Це поле не є обов’язковим, проте може використовуватись для додаткових пояснень або уточнення контексту.
Звернути увагу
Якщо зображення вставляється за URL, необхідно використовувати пряме посилання на файл. У разі недоступності зображення за посиланням воно не буде відображатися на сторінці.
Великі зображення можуть порушувати структуру тексту або впливати на швидкість завантаження сторінки.
Перед додаванням зображення до тексту доцільно підготувати його розмір відповідно до структури сторінки. Для коректного відображення рекомендується використовувати вирівнювання та масштаб, що відповідають загальному дизайну контенту.