Теперь когда мы научились создавать собственные статьи, настало время их чем то приукрасить. При всем уважении к тексту, особенно, когда это текст на великом и могучем русском языке, следует понимать: без наличия хотя бы минимальной графики ваш ресурс будет выглядеть серенькой мышкой в стане разноцветных котов. Поэтому наша задача на сегодня — научиться вставлять изображения в статьи.

{mosloadposition debug}

Мы уже знаем: чтобы приступить к редактированию статьи нужно выбрать в главном меню «Материалы» пункт «Все материалы». В предложенном списке (который в нашем случае состоит пока из одного пункта) выбираем ту статью, что будет подвержена редактированию.

Щелкаем по названию материала мышкой и попадаем в новое окно, где откроется так любимый нами редактор joomlaFCK. Для начала, предлагаю украсить верхнюю часть нашей статьи, ту, что будет отображаться на главной странице нашего сайта. Здесь, как мне кажется, разумно будет поместить небольшое изображение, которое так или иначе будет привязано к тематике статьи. Надеюсь, вы уже выбрали подходящие картинки, так как настало время украсить нашу статью выбранными изображениями.

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

Способ первый. Используем кнопку «Вставить \ редактировать изображение»

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

Далее переносимся на панель инструментов и попробуем найти там кнопку «Вставить \ редактировать изображение». Чтобы немножко упростить вам поиски, советую обратить внимание на рисунок, что расположен ниже. Красным карандашом я обвел нашу кнопочку.

Итак, надеюсь поиски кнопки увенчались успехом. Настало самое время нажать на нее.

Открылось новое окно под названием «Свойства изображения». Пока у нас не выбрано ни одного файла. Поэтому мы не откладывая дело в долгий ящик, попробуем что то выбрать и загрузить с жесткого диска своего компьютера. Нажимаем кнопку «Просмотреть на сервере».

Чтобы увеличить изображение, щелкните по нему мышкой

Еще одно окно предстанет нашему взору. При детальном наблюдении мы обнаружим папки и файлы изображений. Все что мы видим, хранится на далеком — далеком компьютере, где расположился наш любимый сайт. И наша задача закачать выбранные файлы с картинками cна этот самый компьютер, или как его называют профессионалы — сервер.
Прежде чем мы начнем что то качать, хочу обратить ваше внимание на кнопку под названием «Create New Folder». Она служит для создания новой папки. При нажатии мышкой на кнопку появится следующее окно:

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

Мы создали папку под названием «Pomidor». Предлагаю переместиться туда, что можно сделать простым щелчком мышкой по названию каталога. Теперь наша задача загрузить заранее подготовленные изображения. Нажимаем кнопку «Обзор» и приступаем к выбору нужного файла с жесткого диска нашего компьютера.
Когда файл выбран, нажимаем кнопку «Ок». Теперь попросим систему управления контентом загрузить этот файл на сервер. Делается это путем нажатия на кнопку «Upload», что в переводе с английского будет звучать, как «Выгрузка».

После того, как изображение будет загружено на сервер, мы сможем его наблюдать в папке «Pomidor»,для последующей вставки рисунка в наш текст просто щелкаем по изображению мышкой.

Теперь вернемся в окно под названием «Свойства изображения». Что же мы видим? Часть текстовых полей волшебным образом заполнилось. Давайте рассмотрим каждый элемент управления в этом окне. Пока мы коснемся лишь вкладки «Информация об изображении».

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

Альтернативный текст — нередко случается так, что ваша страница со статьей загружается не сразу, а через определенное время. Связано это с низкой скоростью интернет соединения. Как правило последними браузер загружает файлы с изображениями, так как именно они являются самой «тяжелой» частью сайта. Для того, чтобы пользователь хотя бы примерно представлял, что будет выглядеть на загружаемом изображении, существует альтернативный текст, который отображается до тех пор, пока файл с рисунком не будет отображаться на нашей странице. У альтернативного текста есть еще одно полезное применение. Если вы хотите, чтобы поисковые системы индексировали ваши изображения по определенным запросам, поле альтернативный текст также должно быть заполнено.
Скажем, если мы впишем в это поле надпись «помидоры», то поисковая система Яндекс, вполне вероятно будет отображать ваш сайт по данному запросу вот на этой странице.

Ширина и Высота — несложно догадаться, что здесь отображаются ширина и высота изображения. Причем, если мы поменяем текущие значения, ширина и высота также изменятся. По умолчанию, при изменении данных параметров будут соблюдаться исходные пропорции картинки. То есть соотношения ширины и высоты останутся прежними. Однако если нам необходимо задать собственные параметры, где ширина и высота не будут никак привязаны друг к другу, то следует нажать на крохотную кнопку с изображением замка, что расположена рядом с текстовыми полями «ширина» и «высота». Кнопка называется «Сохранять пропорции». Картинка сменится на открытый замок, и теперь нам позволено вносить в текстовые поля произвольные значения. Рядом с кнопкой «Сохранять пропорции» находится не менее важный элемент управления — кнопка «Сбросить размер». Предположим, вы изменили размер изображения, однако по каким то причинам решили поменять его на исходный. В этом случае можно смело нажимать на эту кнопку.

Бордюр — при необходимости наше изображение может окаймляться рамкой. Данное поле позволяет задать толщину рамки. По умолчанию, поле пустое, то есть рисунок будет отображаться без бордюра. Также без бордюра он будет отображаться при значении «0». Сюда можно вписывать целые числа от нуля и выше. При значении «1» наш бордюр будет иметь толщину в один пиксель. Соответственно, при значении «2» рамка вокруг изображения обретет толщину в два пикселя.

Горизонтальный и вертикальный отступы — как правило наше изображение будет располагаться рядом с текстом и прочими элементами. Поэтому будет разумно поставить в оба текстовых поля значение от 3 до 10 пикселей, что сделает вид нашей страницы более презентабельным, так как наличие отступа от рисунка не позволит ему сливаться с текстом.

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

После того, как введены необходимые значения, мы нажимаем кнопку «Ок» и наслаждаемся полученным результатом. Теперь, чтобы внесенные изменения вступили в силу, но в тоже время редактор joomlaFCK оставался открытым, в правом верхнем углу мы нажмем кнопку «Применить».
Давайте заглянем на сайт и посмотрим: что же у нас получилось. А получилось примерно следующее:

Чтобы увеличить изображение, щелкните по нему мышкой

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

Вставка изображения при помощи тега MOSImage

Возможно, после прочтения заголовка данного раздела, вы воскликнете: «Да зачем нам какой то MOSImage, когда мы и так умеем вставлять изображения». Отчасти вы правы, однако я рекомендую все таки до конца дочитать эту статью. На самом деле работа с тегом MOSImage, более чем проста. Сейчас мы убедимся в этом вместе. На этот раз предлагаю провести работу в нижней части экрана, то есть в так называемой основной части статьи.

Значительная часть работы с тегом MOSImage проводится в верхней части экрана, на вкладке «Картинки».

Перво наперво нам необходимо выбрать то самое изображение, которое мы будем вставлять в статью. Для этого мы находим выпадающий список под названием «Подпапки». Здесь следует сделать небольшую оговорку. Если первый способ вставки изображения нам позволял производить закачку файла с рисунком в процессе работы, то в случае работы с тегом mosimage, изображение должно быть загружено заранее.

Сделать это можно с помощью встроенного в систему управления контентом медиа менеджера. То есть предварительно вам следует сохранить статью, путем нажатия на кнопку «Сохранить» в правом верхнем углу. Затем перейти в главное меню «Сайт» и выбрать пункт «Медиа менеджер».

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

После того, как каталог будет создан переходим туда, щелкая по иконке папки мышкой. Теперь наша задача загрузить новый файл с изображением. Для этого в верхнем правом углу нажимаем кнопку «Обзор», выбираем необходимый файл на жестком диске нашего компьютера и нажимаем кнопку «Загрузка».

Теперь, когда наш файл загружен на сервер, самое время вернуться к редактированию статьи и вставки изображения. Мы уже знаем, что нам следует перейти на вкладку «Картинки», где в выпадающем списке найти созданную в медиа-менеджере папку.

Итак, папка наша выбрана, и следует обратить свой взор чуть выше, туда где расположился список под названием «Галерея картинок». Список сей состоит всего из одного изображения, которое мы выделим мышкой.

Далее наша задача нажать на кнопку, что выглядит в виде стрелок направленных направо. По окончании нажатия точно такой же пункт появится в списке «Картинки материала». Мы наведем курсор мышки на этот пункт и выделим его. После всех вышеперечисленных действий под списком «Картинки материала» появится мини эскиз нашего изображения. Это будет говорить о том, что мы открыли файл с рисунком для редактирования, к чему непосредственно и приступим.

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

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

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

Альтернативный текст — еще один знакомый пункт. Однако в данном случае текст введенный в это поле, будет выполнять также функцию заголовка. То есть после публикации статьи, если мы наведем курсор мышки на картинку, то прочитаем во всплывающей подсказке введенное нами слово «Помидор».

Рамка — возможно кто-то не знает, но рамка — это тот же бордюр. А что делать с бордюром мы прекрасно знаем по вставке рисунка путем использования кнопки «Вставить \ редактировать изображение»

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

Выравнивание подписи — как выясняется подпись можно выравнивать. Чтобы наше творение выглядело гармонично, мы выровняем подпись также по центру. Пусть будет красиво!

Ширина подписи — я думаю никого не удивлю, если напишу, что в данное текстовое поле вносится значение, которое определяет ширину подписи.

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

Собственно наша задача теперь сводится лишь к тому, чтобы поставить курсор мышки в нужное место и нажать в нижней части редактора на кнопку «Вставить картинку» . После чего в текстовом поле редактора появится тег MOSImage.

Настал торжественный момент. Мы нажимаем кнопку «Сохранить» и возвращаемся на сайт, дабы лицезреть творенье рук своих.

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

С уважением, Гоша Компьютерный.

{mosloadposition debug}