Почувствуй себя иллюстратором, или Вставляем в материал изображения

Здравствуйте, друзья! Сегодня мы продолжаем разбираться с тем, как создавать материалы Joomla. В первой части этого урока мы научились создавать и публиковать статьи. Теперь пришло время посмотреть, как вставить в созданный нами материал изображения.

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

Поэтому просто обязательно разбавляйте ваши статьи и материалы картинками в тему. И сейчас мы с вами научимся это делать.

Вставить картинки в материалы Joomla можно двумя разными способами. Сейчас мы их по очереди и изучим.

Менеджер изображений JCE

Если вы при редактировании статей пользуетесь JCE-editor-ом, то для вставки картинок вы можете воспользоваться встроенным в этот редактор Менеджером изображений. Если вдруг вы еще не устанавливали JCE, то рекомендую сделать это как можно скорее — удобство и комфорт работы с текстами повысится в разы. (Как установить JCE-editor?).

Прежде всего установите курсор в нужное место. Менеджер изображений открывается нажатием вот этой кнопки на панели инструментов редактора. Перед нами появляется окно, состоящее из трех основных областей:

1. Браузер файлов — здесь мы выбираем и загружаем нужную картинку
2. Свойства — настройка параметров выбранного изображения
3. Предпросмотр статьи

Кроме того, наверху есть еще вкладки «Альтернатива» и «Расширенные», о них мы поговорим дальше.

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

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

Важно: речь о папке «images», расположенной в корне сайта. Не путайте с одноименной папкой, которая лежит в каталоге шаблона и которую мы открывали, когда редактировали оформление нашего сайта.

Браузер файлов в панели «Папки» (5), как раз и показывает нам структуру вложенности папок с изображениями нашего сайта по принципу обычного файлового менеджера. Обратите внимание, что под корневой папкой подразумевается не корень сайта (папка, куда сайт был установлен), а папка «images».

Содержимое папки, в которой мы находимся на данный момент, можно посмотреть справа (6). Полный путь и содержимое выбранной папки отображается и в строке навигации (4).

Таким образом можно найти и выбрать любое изображение, если оно хранится на сайте в папке «images». Если в выбранной папке много изображений, то можно не пересматривать их вручную, а организовать поиск по названиям (7).

Чтобы выбрать изображение для вставки, его достаточно выделить щелчком мыши, и в поле «Подробная информация» посмотреть его свойства. Кроме того, над выбранным файлом можно произвести некоторые стандартные операции: удалить, переименовать, копировать, вырезать, просмотреть и вставить (11).

Все это хорошо лишь в том случае, если нужная нам картинка каким-то образом уже оказалась у нас в папке «images» сайта — вы ее скопировали туда, работая на Денвере, либо же залили по FTP на хостинг. Если же нужного изображения у вас не оказалось, а хранится оно где-нибудь в недрах вашего жесткого диска, то на этот случай у браузера файлов есть волшебная кнопочка «Загрузить» (10). По клику на нее открывается еще одно окно, в котором вы просто выбираете нужный файл у вас на компьютере («Обзор») и нажимаете «Загрузить».

Обратите внимание, что загруженное изображение будет помещено в текущую открытую папку. Вы также можете создать для загружаемого изображения свою папку (9), но опять-таки в текущей. Мне, например, удобно создавать отдельную папку для изображений из каждого материала, если у меня в статьях много картинок. Иногда я создаю папки по месяцам — то есть в январе складываю картинки в папку «01», в феврале — в «02» и т.д. Вы можете выбрать любой свой способ организации картинок.

Итак, мы выбрали изображение, которое будем вставлять в статью. Теперь обращаемся к верхней панели Менеджера файлов, в которой мы можем настроить параметры отображения картинки на сайте.

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

В поле «Альтернативный текст» (13) введите описание изображения. Хотя когда загружаешь много картинок, то писать к каждой описание — просто мучение, но помните, что внутренняя оптимизация сайта, а значит, и его позиции в поисковой выдаче складываются именно из вот таких мелочей. Так что просто приучите себя заполнять это поле, используя в описании ключевые слова статьи.

В поле «Размеры» (14) можно изменить размеры изображения. Они заданы в пикселах, и по умолчанию будут изменяться, сохраняя пропорции изображения. Вы можете изменить это, сняв галочку «Пропорционально» (а вы уверены, что хотите исказить пропорции картинки?). Хочу сказать, что в ряде случаев лучше не пользоваться этой функцией, а ручками сделать картинку нужных размеров в фотошопе или любом другом редакторе (ибо менять размер умеют практически все графические редакторы).

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

А почему полезно? При изменении размеров картинка не заменяется, а создается ее уменьшенная или увеличенная в зависимости от настроек копия. То есть элементарно накапливается балласт, который, разрастаясь, откусит у вас неплохой кусочек дискового пространства. На Денвере этот вопрос неактуален, а вот на хостинге, где его цена прямо пропорциональна размеру дискового пространства, предоставляемого под ваш сайт, думаю, лучше заранее позаботиться о разумном использовании места.

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

Далее, выбираем выравнивание (15) — то есть положение картинки относительно текста. Наглядно тот или иной вариант можете посмотреть в окне предпросмотра (справа вверху), где все изменения отображаются в реальном времени.

Задаем очистку (16) — указываем стороны изображения, возле которых текст располагаться не будет. Заметьте, что очистку можно задать только при указанном выравнивании. Если выравнивание не выбрано, то поле «очистка» будет неактивно, как у меня на скрине.

Указываем отступы текста от краев изображения (17). Отступы задаются в пикселах и по умолчанию равны со всех сторон. Чтобы для каждой границы задать свой отступ, просто снимите галочку «Равные значения» (18).

В поле «Границы» (19) можно задать рамку изображения. Она отключена по умолчанию, включите ее здесь (19), и сможете задать толщину (20), стиль (21) — сплошная, пунктир и т.д., цвет рамки (22). Причем цвет можно задать как HTML-кодом, так и выбрав нужный из палитры.

Вот и все, изображение мы выбрали и настроили. Осталось посмотреть вкладки «Альтернатива» и «Расширенные».

На вкладке «Альтернатива» можно создать такой интересный эффект, как смена изображения при наведении на него курсора мыши. Просто выберите два изображения и наслаждайтесь!

Вкладка «Расширенные» включает в себя стилевое оформление изображения: если вы знаете CSS, то без труда разберетесь, что там и зачем. Не знаете — лучше не трогайте. Я действительно сейчас не могу так просто объяснить, что к чему на этой вкладке, поскольку надо начинать с основ CSS и далее-далее…

Скажу одно: не знаете HTML и CSS — учите понемножку. Просто без этих знаний вы никогда не научитесь по-настоящему создавать сайты, а лишь только собирать стандартные заготовки, плохо понимая, почему и как это работает. Без хотя бы поверхностного знания этих языков вы никогда не станете настоящим хозяином своего сайта, даже админом не станете — так, продвинутым пользователем…

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

Таким образом можно вставить изображение, полностью настроив все параметры его отображения. Зачастую такая тонкая настройка при создании материалов просто не нужна. И в таком случае проще и быстрее для вставки изображений воспользоваться встроенными средствами Joomla.

Вставка картинок в материал при помощи cтандартного загрузчика изображений Joomla

Для быстрой вставки картинок в статью установите курсор в нужное место статьи и нажмите кнопку «Изображение», расположенную под полем ввода текста: В открывшемся окне также три основных области. В верхней осуществляется навигация по папкам для поиска нужного изображения.

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

Если вам требуется загрузить файл изображения с компьютера, то воспользуйтесь формой загрузки, расположенной в нижней части окна.

Ну и не забудьте «Вставить»!

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

Теперь вы умеете вставлять изображения в материалы, причем даже двумя способами: с помощью функционального и мощного Менеджера изображений JCE и быстро и просто стандартными средствами Joomla.

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

С вами была ваша Web-Кошка! До встречи на страницах моего блога!