Лицензия: бесплатная
Языки:

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

Плагин SmartResizer - универсальный вариант решения этой проблемы.

Плагин автоматически создает 2 мини-эскиза для картинки в статье: первый - для вывода в самой статье, второй - для вывода в блоге статей. Таким образом можно создавать маленький эскиз для блога категории, блога раздела и статей на главной, и эскиз среднего размера для просмотра в самой статье. Кроме того плагин автоматически создает ссылку на полноразмерную картинку в статье, если картинка имеет мини-эскиз. Возможно гибкое управление размерами эскизов с помощью специальных команд в тэге картинки. Кроме того, плагин может создавать третий эскиз большого размера для открытия полноразмерной картинки. Удобная возможность,  если на сайт загружаются фотографии прямо с фотокамеры с очень большими размерами. Есть возможность автоматического наложения водяного знака на изображения вашего сайта. Водяной знак (ваш логотип, название или URL вашего сайта и пр.) позволит защитить ваши изображения от копирования, сделает их копирование бессмысленным.

Плагин имеет следующие особенности:

• Автоподгонка размеров эскиза, если вы задали только ширину или только высоту эскиза.
• Возможность выбрать способ создания эскиза: обрезать изображение по размерам эскиза (в этом случае части изображения, которые не вмещаются в размер эскиза будут обрезаны сверху-снизу или справа-слева ); вписать изображение в размеры эскиза (в этом случае изображение будет вписано в эскиз полностью, но если размеры эскиза не совпадают с соотношением сторон картинки, то слева-справа или сверху-снизу будут белые поля).
• Три способа сохранения эскизов: в той же папке, что и оригинал; в папке cache; в подпапке 'smart_thumbs' папки оригинала.
• Обработка удаленных картинок с других сайтов.
• Три способа открытия оригинальной картинки: Popup окно, стандартный эффект Joomla SqweezBox, эффект Highslide.
• Наложение водяного знака (вашего лого, другого изображения или текста) на исходное изображение и/или эскиз.

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

 Параметры плагина:

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

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

Расширенные параметры:

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

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

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

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

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

.smartresize {
  margin:3px 10px 10px 0px;
  padding: 5px 5px 5px 5px;
  border:1px solid #CCCCCC;
  background:#EEEEEE;
}
.smartresize span {
  margin:7px 3px 0 3px;
}

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

.blog .smartresize {
  margin:3px 10px 10px 0px;
  border:1px solid #CCCCCC;
  background:#EEEEEE;
  padding:0;
}
.blog .smartresize span {
  margin:2px 3px 0 3px;
}

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

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

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

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

Если вы задали параметр 'Игнорировать индивидуальные размеры картинки' чтобы все картинки в статьях и блогах были одного размера, заданного в параметрах плагина, то можно для отдельных картинок все же разрешить использовать индивидуальные размеры, заданные в редакторе с помощью класса для картинки smartresizeindividual.

Параметры водянного знака

  Плагин позовляет накладывать водянной знак на изображения вашего сайта. Водянной знак это небольшое изображение - ваш логотип, название или URL вашего сайта и пр. Водяной знак позволит защитить ваши изображения от копирования, сделает их копирование бессмысленным.

Для настройки наложения водянного знака используйте следующие параметры:

• Водяной знак - "Отключено" - водяной знак не накладывается; "Для исходных изображений" - водяной знак накладывается на исходные полноразмерные изображения; "Для исходных изображений и эскизов" - водяной знак накладывается на исходные полноразмерные изображения и на уменьшенные эскизы изображений.
• Применить для - Если задано значение 'только изображения с классом 'watermark', то водяной знак будут иметь только те изображения, у которых выставлен класс 'watermark'. Иначе, водяной знак будет наложен на все изображения, которые обрабатываются плангинами контента.

Раздел "Изображение водяного знака"

• Файл водянного знака - Выберите изображение, которое будет использоваться в качестве водяного знака.
• Горизонтальная позиция - Выберите расположение водяного знака по горизонтали на изображении.
• Горизонтальный отступ - Отступ водяного знака от левого/правого края картинки в пикселах.
• Вертикальная позиция - Выберите расположение водяного знака по вертикали на изображении.
• Вертикальный отступ - Отступ водянного знака от верхнего/нижнего края картинки в пикселах.
• Прозрачность - "Простое наложение" - водяной знак будет наложен на изображение с установками прозрачности, заданными в параметре "Прозрачность". "прозрачный цвет фона" - водяной знак будет наложен на изображение с установками прорачности, заданными в параметре "Прозрачность", и фон водяного знака, имеющий цвет, заданный в параметре "Цвет фона" будет прозрачным.
• Степень прозрачности в процентах - задайте степень прозрачности водяного знака от 0 (полносьтю прозрачный) до 100 (полностью непрозрачный).

Раздел "Текст водяного знака"

• Текст водянного знака - Задайте текст, который будет выводиться в качестве водянного знака на изображение.
• Шрифт - Выберите шрифт для вывода текста. Вы можете добавить свой шрифт, сохранив .ttf файл шрифта в папку сайта /plugins/content/smartresizer/ttf/
• Размер шрифта для оригинального изображения - задайте размер шрифта текста водяного знака для оригинального изображения.
• Размер шрифта для изображения в статье - задайте размер шрифта текста водяного знака для эскиза в статье.
• Размер шрифта для изображения в блоге - задайте размер шрифта текста водяного знака для эскиза в блоге.
• Цвет текста - задайте цвет текста в шестнадцатеричном формате, например #FFFFFF.
• Горизонтальная позиция - выберите расположение текста по горизонтали на изображении.
• Горизонтальный отступ - отступ текста от левого/правого края картинки в пикселах.
• Вертикальная позиция - выберите расположение текста по вертикали на изображении.
• Вертикальный отступ - отступ текста от верхнего/нижнего края картинки в пикселах.
• Степень прозрачности в процентах - задайте степень прозрачности текста от 0 (полносьтю прозрачный) до 100 (полностью непрозрачный).

Пример эскизов с произвольным размером в блоге: http://minimart.lotix.ru/ru/smartresizer-demo

Пример эскиза в статье: http://minimart.lotix.ru/smartresizer-demo/ru/29-demo-article