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

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

Сьогодні ми розглянемо як вставляти зображення.

Спосіб №1 - завантаження нового зображення.

Для того, щоб вставити зображення, яке ви ще жодного разу не завантажували на ваш сайт, необхідно в панелі інструментів текстового редактора натиснути кнопку "Изображение"

У новому вікні треба зробити пару кроків:

1. Вибрати вкладку "Загрузить"
2. Натиснути кнопку "Выберите файл", після чого вам треба вибрати зображення, яке ви хочете завантажити на ваш сайт.
3. Натиснути "Загрузить на сервер" і ви побачите завантажену картинку з розмірами і т.д. Дуже важливо, перед тим як додавати картинку, дочитайте інструкцію до кінця, тому що нижче описано як обробити зображення щоб в мобільній версії все коректно виглядало.
4. Останній крок, щоб зберегти натисніть "ОК"

Спосіб №2 - використання вже завантаженого зображення.

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

Для цього необхідно в панелі інструментів текстового редактора також натиснути кнопку "Изображение"

У новому вікні, треба зробити пару кроків:

   1. Вибрати вкладку "Данные об изображении"

   2.Натиснути "Выбор на сервере" і в вікні, знайти раніше завантажене зображення.

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

   3. Щоб зберегти натисніть "ОК"

---

Мобільна версія.

У мобільній версії сайту картинки, які не оброблені належним чином, відображаються некоректно.

Коли завантажується картинка, вона має свої розміри, тому, треба спочатку заготовлювати зображення необхідних розмірів (рада: ширина картинки не повинна перевищувати 900px).

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

Але в мобільному телефоні, розміри екрану невеликі і якщо не обробити зображення, то вона буде виглядати ось так:

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

 

 

Що ж зробити щоб зображення виглядало правильно?

Крок №1

Коли ми завантажуємо картинки на сайт, у вікні завантаження треба видалити розміри ширини і висоти зображення.

Тобто там нічого не повинно бути написано (це важливо).

Щоб зберегти, натискаємо "ОК"

Крок №2

У статті, куди містилося зображення, в рядку редагування тексту натискаємо "Источник", перед нами відкриється HTML код, знаходимо де стоїть наша картинка і вставляємо туди ось цей код: class = "img-responsive"

Ще раз натискаємо "Источник" і зберігаємо.

Тепер наша картинка в мобільній версії буде відображатися правильно.

 

---

Іноді необхідно, щоб при натисканні на зображення (банер, текст, слайд і т.д.), ви переходили на іншу сторінку сайту або на якийсь інше зовнішнє джерело.

Для цього треба зробити пару кроків:

крок №1. Відкрити статтю і виділяєте картинку, до якої вам треба привласнити посилання
крок №2. Натискаєте на іконку "Link"

крок №3.  у вікні вводите необхідну URL-адресу, все зберігаєте.

Тепер при натисканні на зображення ви перейдете за посиланням.