Загрузка изображений, работа с картинками

Выбор рубрики → Редактор → Загрузка изображений, работа с картинками

Загрузка картинок
Оптимизация изображений
Как картинку выровнять по правому-левому краю текста
Настройка лайтбокса для фото (при клике открывается картинка в полный размер)
Как убрать обводку (бордер) вокруг картинки
Как уменьшить фото в редакторе сайта
Как сделать картинку по всей ширине текстового поля

Загрузка

Чтобы поместить фотографии, картинки на страницы сайта воспользуйтесь опцией Вставить/ редактировать изображение. Выберите место документа, в которое хотите вставить картинку, поставив туда курсор и нажмите на кнопку.

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

1) При нажатии на эту кнопку откроется диалоговое окно.

Чтобы добавить фотографию на страницу сайта, нажмите на копку справа от поля Источник

2) Откроется окно «Файловый менеджер», где Вы можете выбрать для вставки на страницу из уже ранее загруженных вами фотографий или загрузить новую.

Для загрузки новой фотографии - нажмите на кнопку «Загрузить»

3) Выберите из выпадающего меню «Компьютер», т.е. мы будем загружать фотографии, которые хранятся на вашем компьютере.

И можете загрузить фото

Первый вариант загрузки: выберите фото в папке на компьютере (можно несколько) и мышкой перетащите в поле посередине.

Второй способ добавления фото: нажмите на кнопку Добавить файлы и выберите фото с компьютера.

После того, как все файлы выбраны, нажмите на кнопку Загрузить.

Процесс загрузки можно наблюдать прогресс-баре в %

Внимание! При загрузке одноименных файлов в одной папке будет выдано предупреждение о замене старого файла на новый! Давайте своим файлам разные имена.

Найдите свою картинку, она будет выделена «галочкой» и синим бордером. Дважды по ней кликните и откроется окно вставить/ редактировать изображение

в Источнике автоматически вставится путь на выбранную фотографию, ничего не меняйте в этом поле

Оптимизация картинок

1 правило. в Описании изображения необходимо вписывать ключевые фразы, по которым будет искаться картинка в поисковых системах (т.н. "Альты");

2 правило. Изображение не должно много весить. Картинку миниатюру, например, в 200 пикселей надо создать отдельно и на нее повесить уже лайтбокс большой картинки. Т.е. в админке сайта у вас должно быть две версии вашей картинки: миниатюра и исходная картинка (не более 700-800 пикселей по большой стороне, размеры могут быть больше в некоторых случаях, например, в слайдер или по все ширине текстового поля сайта).

Это необходимо, чтобы сайт не был перегружен тяжелыми фотографиями, которые просто визуально уменьшили, оставив их большой вес. Еще лучше, если вы воспользуетесь бесплатным сервисом, которые дополнительно уменьшают вес вашей картинки без потери качества: https://tinypng.com/

Как картинку выровнять по правому-левому краю текста

И вот что получилось, теперь нам надо отредактировать изображение, чтобы оно красиво смотрелась в тексте.

1) активируйте фотографию, щелкнув по ней один раз мышью, чтобы она приобрела синюю подсветку

2) и отформатируйте ее по левому, правому краю или по середине, например, по левому краю.

3) Сохраните страницу. Посмотрите, что получилось на сайте, предварительно обновив страницу.

Настройка лайтбокса для фото (при клике открывается картинка в полный размер)

Теперь "повесим" на картинку-миниатюру ссылку на картинку с исходным полноценным размером, чтобы открывалась в лайтбоксе при клике на сайте.

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

В открывшемся окне нажмите на кнопку "Адрес ссылки" и в файловом менеджере найдите нужную картинку, кликните на нее.

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

Вот что получилось на стороне сайта

Как убрать обводку (бордер) вокруг картинки

Для этого при вставке/ редактировании фотографии в поле Class нужно выбрать подпункт "Без оформления" и тогда у данной картинки отмениться прописанный стиль, т.е. бордер (обводка) у картинки исчезнет.

Как уменьшить фото в редакторе сайта

1. выберите нужную картинку в вашем файловом менеджере и нажмите на кнопку "Управление/Редактировать"

2. Нажмите на "Изменить размер", выставите нужный размер картинки, например, мы хотим сделать миниатюру, тогда размер W (ширина) 300 пикселей, пропорции сохраните.

3. Нажмите на кнопку "Принять"

4. Далее на "Сохранить"

Если вы хотите заменить старую картинку на новую, тогда поле "Сокранить как" оставьте без изменения.

Если вы хотите создать новую картинку с новыми размерами, тогда в поле "Сокранить как" впишите новое название файла.

Рекомендация: давайте вашим файлам названия на латинице.

Сохраните изменения.

Как сделать картинку по всей ширине текстового поля

Для того, чтобы картинка заняла всю ширину текстового поля и вы не гадали, какой ширины она должна быть, поставьте в первое поле "Размера" 100%.

Как растянуть картинку по всей ширине текстового поля в сайте

Была ли эта статья полезной?

данет

Спасибо, ваша оценка крайне важна для нас

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

Загрузка изображений, работа с картинками