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

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

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

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

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

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

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

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

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

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

Розширені параметри плагіна 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 задають фіксований розмір міні-ескізу для картинок в блозі категорії, блозі розділу, статей на головній сторінці.

Порада: при вставці великий картинки до статті у властивостях картинки відразу задайте її необхідний зменшений розмір. Таким чином картинка буде і в редакторі виглядати як треба і в статті ескіз буде потрібного розміру.

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

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

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

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

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

Для того, щоб плагін створював ескізи для всіх картинок, потрібно включити параметр плагіна Створювати ескізи для всіх картинок. В цьому випадку будуть оброблятися всі картинки в статтях, блогах, а так само в сторонніх компонентах, які підтримують обробку свого вмісту плагінами контенту. У цьому режимі ви можете заборонити створювати ескіз для окремих картинок, включивши в поле "Клас" картинки команду 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