Как вставить изображение или файл в контент?

Чаще всего основная контентная часть страницы правится в элементе Основной текст, но бывают и исключения. При этом обычно под полем для правки контента в этом (или другом) элементе, для которого доступен WYSIWYG-редактор, для параметра Какой набор инструментов использовать выбрано По умолчанию. Вы можете использовать любой из доступных вариантов, кроме вариантов HTML-код или Гостевой, т.к. в первом случае необходимые кнопки (перечислены ниже) отсутсвуют вообще, а во втором случае используются аналогичные кнопки, но без доступа к файл-менеджеру, который необходим для более удобной вставки в контент, как изображений, так и ссылок на файлы.

Какие кнопки понадобятся:

1.  Изображение
2.  Вставить/Редактировать ссылку

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

Вставка изображения

1. Поставьте курсор туда, куда хотите вставить изображение. Нажмите по кнопке Изображение
2. В окне Свойства изображения в поле Ссылка можно вставить ссылку на изображение, которое находится на другом сайте, но со временем на сайте-источнике вместо этого изображения могут разместить другое, либо могут просто его удалить. Поэтому лучше здесь нажать по кнопке Выбор на сервере
3. Откроется окно файл-менеджера. В левой его части можно увидеть список папок внутри папки upload/image. Папки, радом с которыми есть кнопка со значком +, содержат подпапки. Можете нажать по этой кнопке, чтобы увидеть список подпапок. Чтобы создать подпапку в любой папке, нажмите по ней правой кнопкой мыши и выберите Создать папку....
   Важно! В именах папок нельзя использовать кириллицу (русские буквы) и пробелы.
   Важно! Желательно не хранить сотни файлов в одной общей папке - так список файлов может загружаться очень долго.
   Если нужного изображения пока нет на сервере, то сначала выберите папку (при необходимости создайте), в которую хотите его загрузить.
4. В правой части файл-менеджера можно увидеть файлы, которые хранятся в выбранной папке. Если нужного изображения, пока нет в этой папке, то над список файлов нажмите по кнопке Загрузить. Откроется окно со список файлов на Вашем устройстве. Перейдите в папку, где хранится нужный Вам файл.
   Важно! В именах файлов нельзя использовать кириллицу (русские буквы) и пробелы. Если такие сиволы есть в имени файла, то перед загрузкой файла на сервер переименуйте его.
   Важно! Загрузить на сервер можно файлы любых форматов, но не любые из них являются изображениями. JPG, PNG, GIF, PNG - изображения. DOCX, XLSX, PDF - НЕ изображения.
   Дважды нажмите по нужному файлу (можно выбрать сразу несколько) - окно со списком файлов закроется. По окончании загрузки Вы увидите только что загруженный файл (или файлы) в списке файлов на сервере в ранее выбранной папке. Все только что загруженные файлы будут выделены, но для вставки изображения в контент одновременно можно использовать только один файл. Остальные вставите аналогично - по очереди.
5. Выберите один файл с нужным изображением, дважды нажав по нему. Ссылка на этот файл появится в поле Ссылка окна Свойства изображения. Чтобы сразу посмотреть результат, в этом окне пока можно нажать ОК, а затем нажать по кнопке Сохранить.

Проверьте, как картинка выглядит на сайте. Если необходимо, то поправьте параметры её отображения

Настройка параметров изображения

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

Вкладка Данные изображения:

• Альтенативный текст: Укажите здесь текст, который будет виден, если картинка по какой-то причине не отобразится
• Ширина и Высота: Можете указать нужные размеры в пикселях. Если после числа в этих полях добавить символ %, то размеры будут указаны в процентах. Можете также нажать по кнопке с замком Сохранять пропорции, чтобы отключить или включить соблюдение пропорций между шириной/высотой. Рядом есть кнопка Вернуть обычные размеры, которая вернёт истинные размеры картинки.
  Важно! При указании здесь тех или иных размеров никакие правки в файл с картинкой не вносятся. Вы просто стягиваете или растягиваете имеющееся изображение. Если Вы загрузили огромную картинку, чтобы отобразить маленькую "миниатюрку", то изображение может загружаться очень долго. Лучше создайте изображение нужного размера у себя на ПК и уже его загружайте на сервер.
• Граница: Можно указать толщину рамки, которая будет видна вокруг изображения.
  Важно! Отображение границы может быть запрещено в CSS-стилях, которые используются у Вас на сайте
• Гориз. отступ и Вертик. отступ: Можно задать горизонтальный и/или вертикальный отступы. Это полезно, когда картинку обтекает текст. Но лучше для этого испольовать CSS.
• Выравнивание: Если хотите, чтобы текст обтекал картинку справа, то выберите здесь По левому краю. И наоборот.

Вкладка Ссылка:

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

Подробнее рассмотрим такие варианты ниже...

Вкладка Загрузить:

Не обращайте на неё внимания 

Вкладка Дополнительно:

Будет полезна в основном HTML/CSS/JS-специалистам. Следующие поля влияют на следующие атрибуты тега img:

• Идентификатор = id
• Класс CSS = class
• Заголовок = title
• Стили = style

Вставка ссылки на файл

Ссылкой на файл может быть, как текст, например, Скачать, так и изображение. Даже изображение вместе с текстом.

1. Выделите текст или картинку либо текст вместе с картинкой, которые должны быть ссылкой на файл. Нажмите по кнопке Вставить/Редактировать ссылку
2. В окне Ссылка в поле Ссылка можно вставить ссылку на файл, который находится на другом сайте, но со временем на сайте-источнике вместо этого файла могут разместить другой, либо могут просто его удалить. Поэтому лучше здесь нажать по кнопке Выбор на сервере
3. Откроется окно файл-менеджера. В левой его части можно увидеть список папок внутри папки upload/file. Папки, радом с которыми есть кнопка со значком +, содержат подпапки. Можете нажать по этой кнопке, чтобы увидеть список подпапок. Чтобы создать подпапку в любой папке, нажмите по ней правой кнопкой мыши и выберите Создать папку....
   Важно! В именах папок нельзя использовать кириллицу (русские буквы) и пробелы.
   Важно! Желательно не хранить сотни файлов в одной общей папке - так список файлов может загружаться очень долго.
   Если нужного файла пока нет на сервере, то сначала выберите папку (при необходимости создайте), в которую хотите его загрузить.
4. В правой части файл-менеджера можно увидеть файлы, которые хранятся в выбранной папке. Если нужного файла, пока нет в этой папке, то над список файлов нажмите по кнопке Загрузить. Откроется окно со список файлов на Вашем устройстве. Перейдите в папку, где хранится нужный Вам файл.
   Важно! В именах файлов нельзя использовать кириллицу (русские буквы) и пробелы. Если такие сиволы есть в имени файла, то перед загрузкой файла на сервер переименуйте его.
   Дважды нажмите по нужному файлу (можно выбрать сразу несколько) - окно со списком файлов закроется. По окончании загрузки Вы увидите только что загруженный файл (или файлы) в списке файлов на сервере в ранее выбранной папке. Все только что загруженные файлы будут выделены, но для вставки ссылки на файл в контент одновременно можно использовать только один файл. Остальные вставите аналогично - по очереди.
5. Выберите один нужный файл, дважды нажав по нему. Ссылка на этот файл появится в поле Ссылка окна Ссылка.
6. В большинстве случаев желательно, чтобы файл открывался в новой вкладке. Так посетитель сайта не уйдёт с него на файл, который после скачивания может быть просто закрыт - и вкладка с сайтом тоже будет закрыта. Чтобы избежать  этого перейдите на вкладку Цель в окне Ссылка и в списке Цель выберите Новое окно (_blank).
7. Чтобы посмотреть результат, в этом окне нажмите ОК, а затем нажать по кнопке Сохранить.

Проверьте, как ссылка на файл выглядит на сайте. Если необходимо, внесите правки...

Увеличение изображения при нажатии с помощью Lightbox

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

Это можно сделать, например, с помощью библиотеки Lightbox. Она всегда есть в комлекте поставки, но не всегда подключена. Чтобы подключить её в тот или иной шаблон (в каждый отдельно), нужно открыть для редактирования шаблон, найти элемент HTML-код веб-страницы и внутри тега head прописать команду вызова соответсвующего плагина {plugin:lightbox}, а затем сохранить внесённые изменения.

Далее уже правим контент...

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

И так, алгоритм такой:

1. С помощью кнопки Изображение вставьте маленькую версию картинки
2. В окне Свойства изображения этой картинки перейдите на вкладку Ссылка, в поле Ссылка (можно с помощью кнопки Выбор на сервере) укажите адрес большой версии картинки
3. В списке Цель выберите вариант Новое окно (_blank) - не обязательно, но желательно
4. В списке Lightbox выберите один из вариантов КРОМЕ Не использовать Lightbox
5. Нажмите OK, сохраните внесённые изменения и проверьте результат

Для чего нужны разные варианты в списке Lightbox?

Если хотите наладить листание увеличенных версий картинок, то для всех картинок в списке выберите одинаковый вариант, например, Lighbox (группа 1). Таких списков на странице может быть до 10. Все картинки в каждом отдельном списке должны иметь одинаковое значение в этом параметре.

Как добавить подпись при просмотре увеличенной картинки?

1. Выделите картинку, для которой хотите добавить подпись и нажмите по кнопке Вставить/Редактировать ссылку
2. В окне Ссылка перейдите на вкладку Дополнительно
3. В поле Заголовок укажите нужный Вам текст.
4. Нажмите OK, сохраните внесённые изменения и проверьте результат