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

В наше время очень трудно представить сайт без каких либо картинок. Обычно их используют в качестве баннеров, слайдов, фонового изображения, вставляют в различные тексты, статьи и т.д.

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

Способ №1 - загрузка нового изображения.

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

В открывшемся окне надо сделать пару шагов:

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

Способ №2 - использование уже загруженного изображения.

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

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

В открывшемся окне надо сделать пару шагов:

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

2. Нажать Browse Server ("Выбор на сервере") и в открывшемся окне найти ранее загруженное изображение.

Очень важно, перед тем как добавлять картинку, дочитайте инструкцию до конца, т.к. ниже описано как обработать изображение чтобы в мобильной версии все корректно отбражалось.

3. Чтобы сохранить нажмите "ОК"

---

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

В мобильной версии сайта картинки, которые не обработаны должным образом, отображаются некорректно.

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

Конечно же нам хочется, чтобы картинки были достаточно большими, привлекали внимание посетителей сайта и им не пришлось брать увеличительное стекло чтоб рассмотреть что же на этом изображении нарисавано или написано.

Но в мобильном телефоне, размеры экрана небольшие и если не обработать изображение, то она будет выглядеть вот так:

• картинка будет выступать за пределы ширины текста, а это неправильно и смотрится некрасиво.

Что же сделать чтобы изображение выглядело правильно?

Шаг №1

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

Т.е. там ничего не должно быть написано (это важно).

Чтоб сохранить, нажимаем "ОК"

Шаг №2

В статье, куда помещалось изображение, в строке редактирования текста, нажимаем "Источник", перед нами откроется HTML код, находим где стоит наша картинка и вставляем туда вот этот код: class="img-responsive"

Еще раз нажимаем "Источник" и сохраняем.

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

 

---

Иногда необходимо, чтобы при нажатии на изображение (баннер, текст, слайд и т.д.), вы переходили на другую страницу сайта или на какой-то другой внешний источник. 

Для этого надо сделать пару шагов:

шаг №1. Открыть статью и выделить картинку, к которой вам надо присвоить ссылку
шаг №2. Нажимаете на иконку "Link"

шаг №3.  B открывшемся окне вводите необходимый URL-адрес, все сохраняете.

Теперь при нажатии на изображение вы перейдете по установленной ссылке.