Вставка картинок и работа с ними

Рассмотрим метод вставки картинок и других файлов (текстовых документов, архивов и т.п.) через tinymce редактор.

Tinymce редактор - это панель для визуального редактирования контента (содержимого, текстов) сайта по типу Word'a. 

Для загрузки картинок и других файлов открываем редактирование или создание любой страницы, находим на панельке кнопку "Вставить/изменить изображение" (на картинке она показана красной стрелкой). Нажимаем на нее, открывается небольшое окно для вставки и настройки картинок, в поле "Адрес картинки" жмем кнопку   и появляется еще одно окно в котором и будем загружать картинки и файлы:

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

2) Далее выбираем на своем компьютере нужную картинку или файл для загрузки при помощи кнопки "Обзор...".

3) Далее жмем "Upload". и дожидаемся окончания загрузки (В процессе загрузки в правой верхней стороне менеджера будет крутиться индикатор   дождитесь пока он исчезнет и в списке файлов появится ваш файл или картинка). Помните, что если у вас медленный интернет - загрузка больших файлов (более 5-10 мб) может быть затруднительной и долгой...

4)  Если вы хотите создать новую папку для своих файлов - указываете ее имя вместо "New Folder" (название писать строго латинскими символами, маленькими буквами, без пробелов и впецсимволов) и жмете "Create".

Далее, если вы загружали картинку и хотите ее вывести настранице сайта: Ставим "птичку" (1) напротив картинки  и нажимаем "Select" (2), превью (Preview) картинки вы можете видеть выше кнопки "Select" (3).

Теперь в окошке "Вставить/изменить изображение" нужно настроить вывод картинки на страницу:

На вкладке "Основные":

Адрес картинки (4) - тут путь до картинки сам должен появиться после предъидущего шага.

Описание картинки (5) - тут пару ключевых слов описания картинки (можно ничего не писать).

Заголовок (6) - тут также 1-2 ключевых слова (можно ничего не писать).

На вкладке "Визуализация":

Выравнивание (7) - способ выравнимания картинки.

Размеры (8) - размеры картинки, они проставляются автоматически.

Вертикальный отступ (9) - растояние от верха и низа картинки до текстов и других картинок, значение 5 самое оптимальное.

Горизонтальный отступ (10) - растояние слева и справа от картинки до окружающих текстов, также подойдет значение 5. 

Для отступа только с одной стороны используйте список поля "Класс". (перед пунктом 11)
Если картинка выровнена по левому краю, то выберите класс imgl, а если по правому, то - imgr.

Остальные пункты, которые не упоминались, трогать не нужно.

Для вставки картинки на страницу сайта нажимаем "Вставить" (12).

И в том месте поля для редактирования контента, где стоял курсор, появится картинка.

Если вы загружали на сервер файл (архив, текстовый документ и т.п.) и вам нужно теперь поставить на него ссылку (ссылку на закачку к примеру) - пишите текст (который будет текстом ссылки), выделяете его, и нажимаете на панеле кнопку  , там в поле "Адрес ссылки" жмем  и также как мы выбирали картинку - выбираем через файл менеджер нужный нам файл и жмем "вставить". Так вы получите на странице сайта ссылку на нужный вам файл.