Рекомендую!

Видеокурс: "Шаблон Joomla 2.5 от А до Я"

diskboxsmall

Научитесь создавать свои собственные уникальные и профессиональные шаблоны для Joomla 2.5!

Добро пожаловать в школу Джумла!

Вы находитесь в центре обучения работы с Джумлой, одной из наиболее мощных, простых и бесплатных систем управления содержимым сайта на планете. Не важно, новичок Вы в использовании этой CMS или профессионал, Школа Джумлы откроет Вам много новых, интересных уроков и советов в видео и текстовом формате по работе с этой системой управления сайтом.  Подробнее...

ЗАГРУЗИТЬ СТАБИЛЬНУЮ ВЕРСИЮ ДЖУМЛА

Создание эскизов картинок с помощью плагина SmartResizer в Joomla 2.5

resizeЧасто джумлаводы сталкиваются с проблемой изменения размера картинок в блогах и статьях. В блогах материалов картинки должны быть маленькие, а в статьях уже побольше, при чем необходима также ссылка для открытия картинки в полный размер. При смене дизайна иногда приходится изменять размеры картинок в каждой статье, потому что старый размер картинок не вписывается в новый шаблон сайта. или если блог категорий разместить в две колонки, то также можно столкнуться с проблемой изменения размеров картинок. Но сильно не огорчайтесь. Существуют плагины, которые помогают решить данную проблему. И один из них – это плагин SmartResizer. Данный плагин автоматически создает два эскиза картинок, один в блогах категорий, а второй – непосредственно в самой статье.

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

Плагин поддерживает форматы изображений jpg, png, gif.

Давайте рассмотрим работу данного плагина на примере. На рисунке ниже вы можете видеть блог категории. Ширина картинок колеблется от 300px до 800px. Картинки накладываются одна на другую. Все выглядит очень некрасиво. Сейчас мы добавим данный плагин и шаг за шагом улучшим отображение нашего блога.

1A Blog Layout

 

 Шаг 1. Установка плагина SmartResizer.

 

Шаг 2. Настраиваем основные параметры.

chronoforms 4

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

 

Параметры 1 и 2 задают фиксированный размер мини-эскиза для картинок в блоге категории, блоге раздела, статей на главной странице.

Параметры 3 и 4 задают размер по умолчанию картинки в самой статье. Можно задать свой размер мини-эскиза для каждой картинки в статье с помощью свойств картинки высота и ширина (свойства width и height тэга img) в редакторе статьи. Если ни высота ни ширина картинки не заданы, то размер мини-эскиза будет взят из параметров 3,4 по умолчанию.

Совет: при вставке большой картинки в статью в свойствах картинки сразу задайте ее необходимый уменьшенный размер. Таким образом картинка будет и в редакторе смотреться как надо и в статье эскиз будет нужного размера.

В примере задана каждая ширина картинок равна 200 пикселей, а высота не задана.

Шаг 3. Автоматическое создание мини-эскизов для блога категории.

tutuploadsafterupload

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

Шаг 4. Настройка дополнительных параметров.

chronoforms 5

  • Создавать эскизы для всех картинок - Если НЕТ, то эскизы будут создаваться только для картинок с командой 'smartresize'. Если ДА, то эскизы будут создаваться для всех картинок, исключая картинки с командой 'nosmartresize'.
  • Игнорировать индивидуальные размеры картинки - Если ДА, то индивидуальные размеры картинки в тэге IMG будут игнорироваться и размер эскиза будет браться из параметров плагина, исключая картинки с командой 'smartresizeindividual'.
  • Создавать ссылку на статью в блогах - Если ДА, то в блоге раздела, категории или на главной эскиз картинки будет ссылаться на статью.
  • Стиль эскиза в блоге - вы можете задать стиль оформления (свойство style тэга <img>) для эскизов статей в блогах категорий, блогах разделов, а так же материалов на главной. Значение этого параметра будет вставлено в свойство style тэга <img> эскиза. Пример значения параметра: background-color:#EEEEEE; border:1px solid #999999; padding: 3px;margin-right:5px
  • Стиль эскиза в статье - вы можете задать стиль оформления (свойство style тэга <img>) для эскизов в самих статьях.
  • Стиль эскиза в сторонних компонентах - вы можете задать стиль оформления (свойство style тэга <img>) для эскизов в контенте сторонних компонентов.
  • Способ отображения полноразмерной картинки-
    Новое окно или RokBox lightbox - полная картинка будет открываться в новом окне браузера или в лайтбоксе, если установлен системный плагин RokBox.
    Popup окно -
    полная картинка будет открываться в popup окне в центре экрана.
  • Сохранять эскизы в - той же папке, что и оригинальная картинка или в папке cache.
  • Качество эскиза в % - Качество jpg картинки мини-эскиза (влияет на размер эскиза: чем меньше качество, тем меньше размер).
  • Суффикс эскиза - задает суффикс для имени файла мини-эскиза.

Шаг 5. Применяем стиль к картинкам блога категории.

chronoforms 6

  • Открываем Дополнительные параметры плагина SmartResizer
  • В поле Стиль эскиза в блоге вставляем CSS стиль, который вы можете увидеть чуть ниже
  • Сохраняем изменения

padding: 5px 5px 5px 5px;
  margin:10px 10px 10px 10px;
  border:1px solid #CCCCCC;
  background:#EEEEEE;
  float:left;

tutuploadsstyling the blog

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

Чтобы указать плагину для каких картинок нужно делать мини-эскизы, нужно в свойствах картинки в редакторе задать значение smartresize в свойстве class (Класс).Необходимо включить расширенный режим редактора TinyMCE для того чтобы поле "Класс" было доступно для ввода в свойствах изображения во вкладке "Оформление". Для ввода поля "Класс" выберите из выпадающего списка значение "value", при этом поле "Класс" станет доступно для ввода команды smartresize. Если используется свойство "Класс", то в файле шаблона template.css можно добавить класс smartresize. Этот класс может быть пустым:

.smartresize { }

или с оформлением картинки полями:

.smartresize {
padding: 5px 5px 5px 5px;
margin:10px 10px 10px 10px;
border:1px solid #CCCCCC;
background:#EEEEEE;
float:left;
}

Для картинок в блогах можно задать оформление отдельно от картинок в статьях:

.blog img.smartresize {
padding: 5px 5px 5px 5px;
margin:10px 10px 10px 10px;
border:1px solid #CCCCCC;
background:#EEEEEE;
float:left;
}

Для оформления эскизов вместо описания класса smartresize в css файле шаблона можно использовать параметры плагина "Стиль эскиза (в блоге, в статье, в сторонних компонентах )", описанные выше. Этот вариант проще и универсальнее, чем описание класса, так как позволяет задать отдельное оформление эскизов в сторонних компонентах и не требует изменения CSS файла шаблона.

Чтобы задать индивидуальные размеры для эскиза в блоге или на главной нужно воспользоваться командами blogwidth и blogheight, которые можно задать в свойсте style картинки:

<img class="smartresize" style="blogwidth:200; blogheight:100;" 
  src="/images/stories/image.jpg">

Для того, чтобы плагин создавал эскизы для всех картинок, нужно включить параметр плагина Создавать эскизы для всех картинок.В этом случае будут обрабатываться все картинки в статьях, блогах, а так же в сторонних компонентах, поддерживающих обработку своего содержимого плагинами контента. В этом режиме вы можете запретить создавать эскиз для отдельных картинок, включив в поле "Класс" картинки команду nosmartresize.

Обратите внимание! Если включена опция "Создавать эскизы для всех картинок", то возможно значительное увеличение времени первой загрузки страницы с большим количеством картинок. Во время первой загрузки страницы формируются эскизы к картинкам и последующие загрузки уже будут происходить быстрее.

Плагин совместим с плагином RokBox от RoketTheme, так как сделан на его основе. Если вы установите дополнительно системный плагин RokBox, то полноразмерная картинка в статье будет открываться не в новом окне обозревателя, а в красивом lightbox'е.

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


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

Рекомендую!

Новые комментарии

  • Now, when correspondent attemptedto glean one thing through Staff Sky’s restriction media contact ... Подробнее...  
  • Howdy I am so happy I found your blog page, I really found you by accident, while I was browsing ... Подробнее...  
  • Would Changing into A Freelance Pаralegaⅼ Be A Good Choice For You? Подробнее...  
  • I like the valuable info you supply on your articles. I will bookmark your blog and take a look at ... Подробнее...  
  • I like looking through an article that will make men and women think. Also, many thanks for permitting ... Подробнее...