В этом посте я поделюсь своим универсальным способом вставки картинок в новость или статью Битрикс с помощью мощнейшей программы Monosnap. Этот способ будет работать как в новом визуальном редакторе Битрикс, так и в старом, все картинки будут загружаться на сервер в указанную Вам папку после создания скриншота автоматически.

При таком способе картинки на сайте будут адаптивные, т.е. подстраиваться под ширину экрана посетителя, без генерации превью, т.к. на моем сайте оно и не нужно, я специально сделал ширину контента почти на весь экран, от всплытия картинок на моем сайте толку не будет,  т.к. при всплытии ее ширина будет равна ширине сайта и увеличится она максимум на 2см (ширина левого меню 2 см),  и место будут занимать превьюшки на сервере.
Если на вашем сайте контентная часть узкая, то конечно нужно всплытие делать, тогда этот способ вам не подойдет, в этом случае Вы сможете найти подходящий модуль на маркетплейс Битрикс.

Итак, будем считать что Вы скачали и установили программу Monosnap, у Вас есть FTP или SFTP доступы к своему сайту, больше ничего не требуется, остается только настроить программу Monosnap на загрузку картинок на сервер и собственно все.

Настройка Monosnap для загрузки изображений на сервер по FTP/SFTP

Открываем настройки программы Monosnap и полностью настраиваем для удобной работы

Настройка Monosnap для загрузки изображений на сервер по FTP/SFTP

Основные настройки

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

Основные настройки Monosnap

Расширенные настройки

Тут обратите внимание:
1. Формат PNG - по размерам файлы будут побольше, но они боле качественные
2. Формат JPG - позволяет задавать компрессию (уровень сжатия картинки), но даже при качестве JPG 95% картинки у меня получаются размытые, мне не нравятся, да и размер как-то не сильно отличается от PNG, поэтому я выбираю PNG.
3. Шаблон имени файла - по умолчанию в программе стоит пробел между датой и временем, обязательно добавьте дефис или подчеркивание и уберите заголовок из шаблона %W, на Вашем сервере с пробелами и заголовками могут возникнуть проблемы при отображении картинок на сайте, т.е. такой шаблон самый оптимальный %Y-%m-%d_%H.%M.%S, картинки будут сортироваться в папке одна за другой, очень удобно.
Расширенные настройки Monosnap

Настройка внешнего вида

Тут все по умолчанию.
Настройка внешнего вида Monosnap

Настройка горячих клавиш

Тут я только для опции "Снимок застывшей области" задаю комбинацию Alt + Ctrl + 3
Настройка горячих клавиш Monosnap

Настройка аккаунта

Фух... ну вот и дошли мы до самого интересного, до настроек загрузки картинок на сервер.
Настройка аккаунта Monosnap

В программе по умолчанию все картинки будут загружаться на сервер Monosnap, можно вставлять полные ссылки на сайт Monosnap, они также будут отображаться в статьях, не заморачиваться с FTP/SFTP, но почему я рекомендую загружать на сервер?
Да все просто, в случае если проект прекратит свое существование, все ваши многолетние труды пропадут вместе с ним, все картинки могут удалить без предупреждения, это очень ненадежно на сегодняшний день, а на вашем сайте все будет храниться вечно!

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

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


Для настройки соединения необходимо указать:

  1. Хост - IP-адрес сервера или хост домена;
  2. Порт - для SFTP это 22, для FTP это 21;
  3. Пользователь - логин Вашего пользователя на сервере;
  4. Пароль - пароль пользователя для доступа к серверу;
  5. Папка - здесь нужно прописать абсолютный полный путь до папки, куда загружать файлы на сервере, у меня предварительно создана папка /upload/monosnap/:
    /home/a/user/tuning-soft.ru/public_html/upload/monosnap
    Создать папку можно в админке сайта, а абсолютный полный путь на своем сервере до папки Вам необходимо узнать каким-нибудь способом:
    • либо подключившись к серверу с помощью программы WinSCP, FileZilla, Total Commander, например в WinSCP путь видно здесь, для копирования нужно кликнуть дважды по нему.
      Абсолютный полный путь WinSCP
    • либо в админке сайта перейти в Настройки -> Инструменты -> Диагностика -> Настройки PHP и в разделе Environment  в строке DOCUMENT_ROOT и будет директория корня документов, абсолютный путь до корня сайта.
      Настройки PHP
  6. Базовый URL - тут прописываем относительный путь до папки, в которую картинки загружает программа Monosnap по FTP/SFTP + к этому пути будет подставлено имя загруженного файла и скопирован в буфер.
    Т.е. я прописал там путь /upload/monosnap/ в буфер после загрузки файла будет скопирована ссылка вида:
    /upload/monosnap/2015-01-18_14.02.23.png,

    где 2015-01-18_14.02.23.png - имя загруженного на сервер файла, вот она нам и нужна для вставки только пути к картинки в контент, дальше Битрикс ее подгрузит.

  7. Проверить соединение - обязательно проверьте соединение, соответствующее уведомление программа покажет в черном окошке с сообщением "Попытка соединения успешна".


Тут я хочу отметить еще такой момент:

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

Поэтому, после настроек соединения по FTP/SFTP переключите галочку обратно на соединение Monosnap, теперь оно будет считаться соединением по умолчанию, не нужно помнить каждый раз, куда загрузится скриншот.
Для выбора соединения в редакторе Monosnap есть кнопка Загрузить..
Выбор соединения в редакторе Monosnap

Все, настройка FTP/SFTP соединения на этом завершена, осталось научиться загружать и вставлять картинки в контент статьи или новости.

Делаем скриншот и загружаем картинку на сервер по FTP/SFTP

Итак, делаем программой Monosnap скришот, в открывшемся редакторе редактируем изображение, можно добавить тень, видим кнопку Загрузить... выбираем созданное нами FTP/SFTP соединение и картинка загружается на сервер.
Выбор соединения в редакторе Monosnap

После загрузки изображения  на сервер программа сообщит об этом.
Все, ссылка на картинку на сервере скопирована во временный буфер Вашего ПК.
Изображение успешно загружено на сервер

Вставляем изображение в новость/статью на сайте

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

Кнопка Изображение

В появившемся окне и вставляем путь к загруженной на сервер картинке из буфера компьютера комбинацией клавиш Ctrl + V или Shift + Insert
В окне предпросмотра она должна автоматически появиться, если не появилась, проверьте правильность пути к файлу или загрузилось ли оно в указанную папку на сервере.

Размер - я размеры картинкам никогда не задаю, иначе они не будут адаптивными, но можно переопределять через css ширину и высоту картинки с помощью !important
Заголовок
- желательно прописывать, т.к. поисковик его индексирует.
Атрибут Alt - желательно прописывать, например тот же заголовок, этот атрибут нужен для отображения какого-то текста посетителю, когда картинка не найдена на сервере.

Нажимаем сохранить и на этом все готово, теперь картинки в статье или новости очень легко!

Заключение

Вот таким вот способом я вставляю картинки в свои статьи. Если Вам покажется статья очень сложной, то это только на первый взгляд, т.к. я максимально подробно все расписал, когда вы настроите программу Monosnap все будет очень просто и очень удобно, загрузка и вставка картинок на сайт будет практически в несколько кликов:
Сделать скриншот -> Загрузить -> Вставить -> Сохранить

Отличным плюсом данного метода я считаю:

Вернуться в список