Вставляем изображения, управляем файлами, что может быть проще!

1.
На сайте все изображения можно условно разделить на две группы:

  • Изображения шаблона. Они повторяются на всех или на большинстве страницах вашего сайта. Примером таких изображений могут быть: логотип, фоновая картинка и т. п. С шаблонами мы начнем знакомиться в уроке 7.
  • Изображение материала, т. е. такая фотография, которая будет связана с конкретной интернет страницей. О добавлении изображений такого типа сегодняшний урок.
    Для добавления изображения на вашу интернет-страницу нужно выполнить два обязательных шага.
  • Подготовить изображение. При всей очевидности данного шага многие забывают, что вначале картинку нужно уменьшить, привести к нужным размерам, оптимизировать в графическом редакторе, чтобы она занимала как можно меньше места, сохранить в нужном формате. Оптимизации изображения посвящена отдельная статья, смотрите ссылку в конце урока.
  • Закачать изображение на сервер. Все дело в том, что картинка хранится не в базе данных, где располагаются материалы сайта, ведь материал – это, по сути, текст, а в отдельном каталоге.

2.
Изображения, которые вы можете добавлять в материал, располагаются на вашем сайте в каталоге \images\stories
Никто не помешает вам на вашем локальном компьютере просто скопировать в него нужный графический файл. Но когда ваш сайт окажется в сети интернет, получить доступ к этому каталогу будет сложно. Мы должны научиться выполнять загрузку через web-интерфейс, т. е. через браузер.

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

загрузка изображений
Рис. 23. Загрузка изображений в «Joomla!»

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

3.
Для подключения рисунка к материалу:

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

подключение рисунка
Рис. 24. Подключение рисунка.

Теперь можно во вкладке «Редактор» перейти к финальному этапу. Поставив курсор в место, где должен располагаться рисунок, нажимаем на кнопку «Добавить рисунок».

Добавление тега, вставки изображения
Рис. 25. Добавление тега, вставки изображения.

При просмотре страницы во внешнем интерфейсе мы увидим не тег, а выбранное изображение.

4.
Вы ждали увидеть рисунок, а увидели тег. Вы разочарованы? Конечно, редактировать текст, глядя на изображения удобней, чем глядеть на набор тегов и держать в памяти последовательность файлов в окне «Картинки материала». Приятная новость, у вас есть возможность видеть картинки!

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

Добавление изображения по имени
Рис. 26. Добавление изображения по имени.

Здесь имя файла key.jpg, он хранится в каталоге images/stories.

5.
Существует еще один мощный инструмент загрузки изображений на сервер. Для этого нам потребуется компонент joomlaXplorer. Для доступа к нему выберите в меню Компоненты – joomlaXplorer. По сути, это файловый менеджер, работающий в web-интерфейсе.

oomlaXplorer – мощный инструмент для управления файлами
Рис. 27. JoomlaXplorer – мощный инструмент для управления файлами.

С помощью него вы можете удалять не нужные файлы (1), создавать каталоги (2), закачивать файлы (3).

Закачиваем файлы с помощью JoomlaXplorer
Рис. 28. Закачиваем файлы с помощью JoomlaXplorer.

Создав свою структуру каталогов для графики, вам не нужно будет  перебирать десятки фотографий в поисках нужной, достаточно для каждого раздела создать свой каталог с изображениями и выбирать его в  поле «под-папка» в окре «Картинки».
Все, на сегодня довольно! Ваши вопросы и результаты практической работы, жду, как всегда, на форуме. Ваш Д. Ю.

Практическая работа:

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

 Примерный вид выполненного задания № 2
Рис. 29. Примерный вид выполненного задания № 2.

Контрольные вопросы:

  1. Файлы каких форматов можно добавлять на интернет-страницах.
  2. Какие графические форматы более всего подходит для скриншотов, фотографий, кнопок?
  3. Как вы понимаете термин «оптимизация изображения»?
  4. В каком каталоге «Joomla!» хранятся графические файлы?
  5. Для чего служит альтернативный текст?
  6. Как увидеть в редакторе материала рисунок?
  7. Можно ли вставить картинку через внешний интерфейс?
  8. Чем удобен компонент joomlaXplorer?
  9. Сколько файлов можно загрузить одновременно? Каков их суммарный размер?
  10. Как сделать фотографию ссылкой, без синей рамки?