Free login module joomla

Редактор JCE | Менеджер изображений

менеджер изображенийДля успешной оптимизации сайта большую роль играют изображения, располагаемые на на его страницах.  Изображения помогают статьям стать интересными и запоминающимися для посетителей Вашего сайта, а также формируют дизайн сайта в целом.  Иллюстрации в статье можно использовать для лучшего понимания той или иной информации, к примеру, скриншоты этапов настройки редактора JCE. Учитывая, что изображения попадают в выдачу поисковых систем, необходимо перед  добавлением картинок на сайт учесть следующие факторы: формат изображения,  его размеры, качество, уникальность, а также заполнение атрибутов тега img (title, alt). С помощью редактора JCE можно легко загружать и настраивать параметры изображений.

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

окно менеджера изображений

В нижней части окна мы видим файловый менеджер ("Браузер файлов"), в котором содержатся файлы папки "images" Joomla. Для редактора изображений JCE эта папка является корневой, но вы можете выбрать и другую корневую папку, задав ее в настройках JCE. Справа в файловом менеджере есть дополнительные кнопки, благодаря которым мы можем создавать подпапки создавать подпапки и загружать изображения загружать изображения на сайт без использования FTP.
Для загрузки изображений нажимаем на иконку "Загрузить", при этом открывается модальное окно:

загрузка изображения

В поле модального окна можно перетащить желаемые для загрузки изображения или нажать на кнопку "Обзор" и выбрать нужные изображения в проводнике Вашей операционной системы.
Загружать можно одно или сразу несколько изображений.

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


После того, как новые изображения будут загружены, мы можем приступить к их вставке на сайт.
Кликните по изображению, которое необходимо вставить в файловом менеджере, и путь к нему будет прописан автоматически в поле "Ссылка":

ссылка на изображение

После выбора изображения из "Браузера файлов", в окне "Подробная информация" появятся все данные об изображении, а также дополнительный набор инструментов:
удалить изображение - удалить изображение.
переименовать изображение - переименовать изображение.
копировать изображение - копировать изображение.
вырезать изображение - вырезать изображение.
просмотр изображения - просмотр изображения в увеличенном размере.
Image 98 - вставить изображение на страницу.
Далее, если вы нажмете кнопку "Вставить", то изображение будет вставлено на страницу сайта в его оригинальном размере и с настройками форматирования по умолчанию. Предпочтительно указывать значения атрибутов width и height (ширина и высота), это частично ускорит загрузку страницы. Размер изображения влияет на скорость загрузки веб-страницы, чем больше его размер, тем дольше загрузка. Однако слишком маленькое изображение вряд ли привлечет внимание пользователя, поэтому лучше выбрать что-то среднее. В менеджере изображений можно изменить размеры вставляемого изображения, настроить форматирование (позиционирование изображения, выбор стиля рамки и др.)
Теперь рассмотрим остальные опции:

Вкладка "Изображение"

Вкладка "Изображение"

  • Ссылка (src) - относительное расположение изображения. Заполняется автоматически при клике по файлу изображения.
  • Альтернативный текст ( Alt) – альтернативный текст (атрибут тега img (alt). Будет показан вместо изображения у пользователей, если у них отключён показ изображений в браузере. Данный атрибут учитывается поисковиками при ранжировании, поэтому должен содержать ключевые слова и положительно влияет на поисковую оптимизацию статьи.
  • Размеры (width и height) – ширина и высота изображения в пикселях (если стоит галочка в чекбоксе "пропорционально", то изменив величину одного из полей значение во втором поле подсчитывается автоматически пропорционально первому).
  • Выравнивание - позиция изображения на странице или в связи с другими элементами. Кроме этого, выравнивание изображения относительно страницы можно делать точно также, как и выравнивание текста – специальными кнопками редактораviravnivanie
  • Очистка - можно указать стороны изображения, где другие элементы не могут быть расположены.
  • Отступ (Margin) – пространство между элементом и соседними элементами или текстом. Задается со всех четырех сторон. Если установлена галочка в чекбоксе "Равны", достаточно задать только один отступ. Остальные три автоматически будут заполнены тем же самым значением.
  • Граница (Border) – создает рамки вокруг изображения с выбранными параметрами.

В правой части менеджера изображений расположено окно "Просмотр", где в режиме реального времени вы можете контролировать применение вышеизложенных настроек.
Таким образом, используя поля настройки вкладки "Изображение", Вы можете изменить размеры изображения, присвоить ему название для поисковых систем, настроить обтекание изображения текстом по одной из его сторон, а также указать отступ между изображением и текстом.
После того, как Вы нажмете кнопку "Вставить" изображение появится в редакторе JCE с заданными только что настройками.

HTML-код для изображения, параметры которого приведены в примере, будет иметь следующий вид:
<p> <style="clear: left;" /><img style="margin: 10px 15px 20px 25px;
border: 1px solid #000000; float: left;" title="Название"
src="images/Akeeba1/AB350.png" alt="Альтернативный текст"
width="300" height="200" /></p>

Если вы решили изменить настройки или заменить изображение кликните по нему и нажмите на уже знакомую иконку "Вставить/изменить изображение".
Перед Вами снова откроется менеджер изображений, в котором Вы сможете изменить настройки.
Так же, Вы можете менять размер изображения в реальном времени. Для этого кликните по вставленному в текст изображению в визуальном редакторе и вокруг изображения появится рамка с квадратиками, потянув за один из квадратиков можно менять его размеры. Чтобы размеры менялись пропорционально зажмите клавишу Shift на клавиатуре и тяните за один из квадратиков.
Вкладка "Альтернатива" (Rollover) - позволяет менять изображение на странице сайта в зависимости от положения курсора мыши.

Вкладка "Альтернатива" (Rollover)

  • Курсор мыши на изображении (Mouseover)  – путь к изображению, которое будет показано вместо текущего (выбранного во вкладке "Изображение"), при наведении на него курсора мыши.
  • Курсор мыши вне изображения (Mouseout)  – путь к изображению, которое будет показано при выведении с него курсора мыши. Здесь нужно указывать путь первоначального изображения (выбранного во вкладке "Изображение").

В обоих вышеописанных опциях пути можно указать автоматически, кликая по файлам соответствующих изображений в "Браузере файлов".
Подробней о вкладке "Альтернатива" можно узнать здесь.

Вкладка "Расширенные"

Вкладка "Расширенные"
Вкладка "Расширенные"

  • Стиль (style) – список встроенных свойств CSS применяемых к элементу. Это поле будет заполнено стилями, установленными в вкладке "Изображения" (margin; border; float и т.д.).
  • Список классов - список CSS- классов из вашего шаблона Joomla, которые могут быть применены к изображению.
  • Классы – разделенный пробелами список CSS- классов, которые должны применяться к изображению.
  • Название (title ) – текст, отображаемый в всплывающей подсказке, когда мышь находится над изображением. Используется в качестве описания изображения и должен содержать ключевые слова.
  • Id - уникальный идентификатор для данного изображения.
  • Направление - направление текста элемента.
  • Код языка - код языка элемента, например: ru-RU
  • Карта изображения  - Id связанного изображения карты, например: # Map
  • Длинное описание - URL к HTML или текстовому документу, содержащему подробное описание изображения. Можно выбрать URL, используя файловый браузер "Обзор" справа от текстового поля.

Как видите с помощью стандартного менеджера изображений можно легко загружать и управлять настройками изображений на сайте, и всё же гораздо удобнее использовать для этих целей Плагин Image Manager Extended.

 На сегодня всё. Если у вас возникли вопросы или предложения пишите о них, пожалуйста, в комментариях.

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: редактор JCE, src, менеджер изображений

Комментарии   

Михаил
0 # Михаил 26.01.2016 20:31
Странно,у меня почему то картинки загруженные пользователем,при модерации в статье не отображается,хотя на сайт загружается,открываю статью для проверки,а картинки нет,только текст остаётся
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить