Плагін SmartResizer - ескізи картинок в матеріалах Joomla

  1. Параметри плагіна:
  2. Розширені параметри:
  3. Параметри водячи знака
  4. Розділ "Зображення водяного знака"

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

Плагін SmartResizer - універсальний варіант вирішення цієї проблеми.

Плагін автоматично створює 2 міні-ескізу для картинки в статті: перший - для виведення в самій статті, другий - для виведення в блозі статей. Таким чином можна створювати маленький ескіз для блогу категорії, блогу розділу і статей на головній, і ескіз середнього розміру для перегляду в самій статті. Крім того плагін автоматично створює посилання на повнорозмірну картинку в статті, якщо картинка має міні-ескіз. Можливо гнучке управління розмірами ескізів за допомогою спеціальних команд в тезі картинки. Крім того, плагін може створювати третій ескіз великого розміру для відкриття повнорозмірною картинки. Зручна можливість, якщо на сайт завантажуються фотографії прямо з фотокамери з дуже великими розмірами. Є можливість автоматичного накладення водяного знака на зображення вашого сайту. Водяний знак (ваш логотип, назву або URL вашого сайту та ін.) Дозволить захистити ваші зображення від копіювання, зробить їх копіювання безглуздим.
Плагін має такі особливості:
  • Автоподгонка розмірів ескізу, якщо ви задали тільки ширину або тільки висоту ескізу.
  • Можливість вибрати спосіб створення ескізу: обрізати зображення за розмірами ескізу (в цьому випадку частини зображення, які не вміщаються в розмір ескізу будуть обрізані зверху-знизу або праворуч-ліворуч); вписати зображення в розміри ескізу (в цьому випадку зображення буде вписано в ескіз повністю, але якщо розміри ескізу не збігаються з співвідношенням сторін картинки, то зліва-праворуч або зверху-знизу будуть білі поля).
  • Три способи збереження ескізів: в тій же папці, що і оригінал; в папці cache; в папці 'smart_thumbs' папки оригіналу.
  • Обробка віддалених картинок з інших сайтів.
  • Три способи відкриття оригінальної картинки: Popup вікно, стандартний ефект Joomla SqweezBox, ефект Highslide.
  • Накладення водяного знака (вашого лого, іншого зображення або тексту) на вихідне зображення і / або ескіз.

Плагін підтримує формати зображень jpg, png, gif.

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

Основні параметри плагіна SmartResizer

Основні параметри плагіна SmartResizer
  • Ширина ескізу для блогів - ширина міні-ескізу для картинки статті в блозі категорії, блозі розділу і статей на головній.
  • Висота ескізу для блогів - висота міні-ескізу для картинки статті в блозі категорії, блозі розділу і статей на головній. .
  • Ширина ескізу за замовчуванням для статей - ширина ескізу за замовчуванням для картинки статті в самій статті.
  • Висота ескізу за замовчуванням для статей - висота ескізу за замовчуванням для картинки статті в самій статті.
  • Ширина ескізу за замовчуванням для інших компонентів - Ширина створюваного ескізу за замовчуванням в пікселах для картинок в інших компонентах (НЕ com_content).
  • Висота ескізу за замовчуванням для інших компонентів - Висота створюваного ескізу за замовчуванням в пікселах для картинок в інших компонентах (НЕ com_content)
  • Створювати великі ескізи - створювати чи ні ескіз заданого розміру, який буде відкриватися у вікні замість оригінальної картинки. Зручна можливість, якщо на сайт завантажуються фотографії прямо з фотокамери з дуже великими розмірами. Плагін зможе створити ескіз заданих розмірів для відкриття повнорозмірною картинки.
  • Ширина великого ескізу.
  • Висота великої ескізу.
Можна задати або висоту або ширину ескізу, якого бракує розмір буде вирахувано автоматично виходячи зі співвідношення сторін оригінальної картинки.

Порада: Видаліть старі ескізи після зміни розмірів ескізів в параметрах плагіна, щоб не засмічувати сайт непотрібними файлами. Розташування старих ескізів залежить від параметра "Зберігати ескізи в".

Розширені параметри:


Розширені параметри плагіна SmartResizer

Розширені параметри плагіна SmartResizer
  • Створювати ескізи для всіх картинок - Якщо НІ, то ескізи будуть створюватися тільки для картинок з класом '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