Це як Maxigallery, тільки для окремих зображень.
Повністю настроюється плагін для створення зменшених копій зображень (попередніх переглядів) і має ряд функцій, таких як: автоматичне створення попередніх переглядів заданого розміру, накладення водяних знаків, відкриття збільшеного зображення за допомогою AJAX (lightbox, slimbox, highslide ...), абсолютно настроюється шаблон для html-виведення, створення попередніх переглядів для WYSIWYG-редактора і т.д.
В першу чергу плагін призначений для використання спільно з WYSIWYG-редактором і спочатку цільовою аудиторією користувачів плагіна є клієнти, які не мають знань в веб-розробках і html, але яким необхідно використовувати в тексті зображення з попереднім переглядом. Пояснити такій людині, що в графічному редакторі спочатку необхідно створити зменшену копію потрібного зображення, потім через редактор вставити її в документ, а після зробити гіперпосилання на збільшене зображення, було б досить непросто.
Тому дії були спрощені до мінімальних - велике зображення вставляється в текст, потім для нього задаються розміри, які повинен мати попередній перегляд. Після цього плагін, у відповідності зі своїми настройками, автоматично створить попередній перегляд і необхідні гіперпосилання.
Крім того, при відкритті документа, що містить такі зображення, в WYSIWYG-редакторі, замість великих зображень, просто стислих в розмірах, будуть так само відображатися їх попередні перегляди зі спеціальним водяним знаком. Цей водяний знак умовно говорить про те, що це зображення не просто маленька картинка, а посилання на своє збільшене зображення і дозволяє відрізняти такі зображення від дійсно маленьких картинок, які так само можуть бути присутніми в документі.
Ці попереді перегляди можна змінювати в розмірах, при наступному виклику будуть створені нові попередні перегляди в відповідності з новими розмірами.
Звичайно, можна використовувати плагін і без візуального редактора, просто вставляючи зображення у вигляді html-коду або TV-параметрів.
На сторінці редагування плагіна у вкладці "Конфігурація" можливий вибір двох параметрів конфігурації плагіна. Параметр "Конфігурація" це назва використовуваної конфігурації, файл з таким же ім'ям і суфіксом .config.php повинен лежати в папці configs плагіна. Наявність цього параметра і відповідного файлу обов'язково, в ньому вказуються всі параметри з управління плагіном.
"Очистка кешу" - параметр, керуючий режимом очищення кеша плагіна. У кеші зберігаються згенеровані попередні перегляди з накладеними (при необхідності) водяними знаками і згенеровані (при необхідності) великі зображення. Очищення кеша плагіна відбувається при очищенні системного кеша MODx.
Оновлення кеша потрібно в рідкісних випадках. Наприклад, коли потрібно видалити файли зображень, посилання на які в документах вже не існують. Або при зміні зображення водяного знака. Нові зображення генеруються тільки в разі зміни їх розмірів. Тому нові водяні знаки не будуть нанесені, тому що розміри зображень залишилися колишніми. В цьому випадку потрібно оновити кеш, щоб видалити зображення і згенерувати їх заново.
В інших випадках плагін самостійно генерує нові зображення без необхідності оновлення кеша. Так що в більшості випадків параметр оновлення кеша варто тримати в значенні 0.
Плагін вже має набір з декількох стандартних конфігурацій, які дозволяють відразу використовувати плагін з ефектами slimbox, slidebox, lightbox, highslide на сайті без будь-яких налаштувань. Для того щоб підключити одну з конфігурацій, необхідно в закладці конфігурації плагіна вказати назву конфігурації в поле "Конфігурація". Можливі варіанти:
Додаткові налаштування проводяться в файлах з відповідними іменами в папці assets\plugins\directresize\configs. Обов'язково налаштуванні список папок, в яких дозволено обробляти зображення плагіном. За замовчуванням використовується папка assets/images.
Плагін використовує ті ж самі ява-скріптові бібліотеки, що і Maxigallery, але зі своєї папки, тому якщо ви використовуєте Maxigallery на своєму сайті з тим же ефектом відкривання зображень, що і DirectResize, використовуйте параметр $maxigallery_jscss_packs, щоб уникнути повторного підключення бібліотек.
<img src="assets/images/image.jpg" width="120" height="60" />
буде згенеровано попередній перегляд розміру 120х60. Звичайно, оригінальне зображення image.jpg повинне перевищувати розміри 120х60 (інакше немає сенсу створювати попередній).Параметри для використання в файлі імя_конфігурації.config.php. Приклад такого файлу можна знайти в папці configs плагіна.
параметр | можливі значення | значення за заовчуванням | опис, приклад |
$lightbox_mode |
|
1 | Режим створення великих зображень і lightbox-посилань
Незважаючи на значення параметра $lightbox_mode, при дотриманні інших умов, завжди створюються для показу зображень із застосуванням всіх сконфігурованих для попереднього перегляду дій (накладення водяного знака, обрізка і т.п.) |
$allow_from | "assets/images" | Розділений комами список папок, в яких дозволено застосування плагіна, можливо вказівку віддалених ресурсів. Всі не зазначені в цьому параметрі шляхи заборонені. Шляхи вказуються як відносні від кореня сайту, або віддалені через http:// Параметр не враховується в разі $lightbox_mode = 1 |
|
$deny_from | Розділений комами список папок, в яких заборонено застосування плагіна, можливо вказівку віддалених ресурсів. Всі не зазначені в цьому параметрі шляхи дозволені. Шляхи вказуються як відносні від кореня сайту, або віддалені через http: //. Ігнорується, якщо вказано параметр $allow_from. Параметр не враховується в разі $lightbox_mode = 1 |
||
$allow_from_allremote |
|
0 | Дає змогу дозволити використання плагіна для всіх зображень з віддалених джерел, без необхідності перераховувати їх в параметрі $allow_from |
$resize_method |
|
3 | Метод зміни розміру зображення. Застосовується при генерації попереднього перегляду. У всіх випадках пропорції зображення зберігаються. Тут imgWidth і imgHeight - задані розміри в оригінальному документі.
|
$big_quality | цілочисельне значення 1-100 | 80 | JPG-якість великого зображення |
$thumb_quality | цілочисельне значення 1-100 | 80 | JPG-якість переднього перегляду |
$wysiwyg_quality | цілочисельне значення 1-100 | 40 | JPG-якість переднього перегляду в візуальному редакторі |
$big_width |
позитивне цілочисельне значення | 800 | Якщо розмір оригінального зображення перевищує задані розміри $ big_width strong> або $ big_height strong>, генерується пропорційно зменшене від оригінального зображення (в термінології плагіна - велике зображення) розміром, що не перевищуює $big_width і $big_height |
$big_height | позитивне цілочисельне значення | 600 | |
$thumb_default_width | позитивне цілочисельне значення | Ширина попереднього перегляду за замовчуванням | |
$thumb_default_height | позитивне цілочисельне значення | Висота попереднього перегляду за замовчуванням | |
$thumb_default_sizemode |
|
1 | Правило для застосування ширини і висоти попереднього прегляду за замовчуванням.
Варто зауважити, що не дивлячись на параметри $thumb_default_width, $thumb_default_height і $thumb_default_sizemode, остаточні розміри згенерованого попереднього прегляду будуть обчислюватися в залежності від $resize_method При використанні примусового режиму (4) спільно з візуальним редактором веде до того, вихідні width і height для кожного зображення в тексті документа будуть замінені на $thumb_default_width і $thumb_default_height з втратою попередніх значень (якщо вони були) при збереженні документа. Це необхідно для коректного відображення попередніх переглядів в візуальному режимі. |
$remote_refresh_time | позитивне цілочисельне значення | 60 | Час в хвилинах. Періодичність, з якою перевіряються зображення на віддалених серверах. Якщо зображення на віддаленому сервері змінилося (перевірка робиться тільки на зміни по висоті або ширині), робиться його нова локальна копія і перегенеруются його зменшені копії. |
$tpl |
|
assets/plugins/ directresize/templates/ lightboxv2.html | Шаблон для відображення |
$language |
|
english | Встановлює мову для плагіна. Відповідний мовний файл повинен лежати в папці lang плагіна. |
$header | HTML-код | HTML-код, розміщується в тезі <head>. Використовується для підключення необхідних css і js файлів. Підключається тільки на тих сторінках, на яких є хоча б одне зображення, яке обробляється плагіном. | |
$maxigallery_jscss_packs |
|
Підключає до сторінки необхідні css і js файли для відповідного скрипта з папки сніпета MaxiGallery (сніпет не обов'язково повинен бути встановлений, але його файли повинні знаходиться на FTP-сервері в assets/snippets/maxigallery) Зручно, якщо на сайті спільно з плагіном використовується і Maxigallery. Якщо будь-які js або css файли вже підключаються викликом MaxiGallery, DirectResize повторно не підключає ці файли в секції <head>. |
Далі йдуть параметри, повністю запозичені з Maxigallery, що мають такі ж можливі значення і оброблювані таким же чином.
параметр | можливі значения | значення за замовчуванням | опис |
$use_ftp_commands |
|
0 | Якщо включено, плагін використовує PHP FTP комманди для створення папок для зберігання генерованих зображень. |
$ftp_server | FTP address | FTP адреса сервера | |
$ftp_user | username | ім'я користувача FTP | |
$ftp_pass | password | пароль на FTP | |
$ftp_base_dir | шлях | Шлях від кореня FTP до кореня сайту на MODx. Тобто якщо коренем FTP є папка /home/username/ і MODx встановлений в /home/username/public_html/modx/ то використовуйте значення /public_html/modx/ в параметрі ftp_base_dir. | |
$ftp_port | число | 21 | Номер порта FTP |
$thumb_use_watermark
|
|
0 |
Використовувати водяні знаки для попередніх переглядів |
$thumb_watermark_font |
|
1 | Размір шрифта водяного знака |
$thumb_watermark_halign |
|
right | Вирівнювання водяного знака по горизонталі |
$thumb_watermark_img | шлях | assets/plugins/ directresize/ images/watermark.png | Шлях до файлу зображення водяного знака. Використовуйте png-зображення з альфа-каналом. |
$thumb_watermark_txt | текст | Copyright <YEAR> | Текст надпису водяного знака |
$thumb_watermark_txt_color | RGB шістнадцятковий формат | FFFFFF | Колір тексту водяного знака |
$thumb_watermark_txt_hmargin | число (px) | 2 | Відступ по горизонталі для тексту |
$thumb_watermark_txt_vmargin | число (px) | 2 | Відступ по вертикалі для тексту |
$big_use_watermark
|
|
0 |
Використовувати водяні знаки для великих зображень |
$big_watermark_font |
|
1 | Размір шрифта водяного знака |
$big_watermark_halign |
|
right | Вирівнювання водяного знака по горизонталі |
$big_watermark_img | путь | assets/plugins/directresize/ images/watermark.png | Шлях до файлу зображення водяного знака. Використовуйте png-зображення з альфа-каналом. |
$big_watermark_txt | текст | Copyright <YEAR> | Текст надпису водяного знака |
$big_watermark_txt_color | RGB шестнадцатиричный формат | FFFFFF | Колір тексту водяного знака |
$big_watermark_txt_hmargin | число (px) | 2 | Відступ по горизонталі для тексту |
$big_watermark_txt_vmargin | число (px) | 2 | Відступ по вертикалі для тексту |
Підстановщики для використання в шаблоні $tpl
підстановщик | опис |
[+dr.id+] | цифровой ідентифікатор зображення, унікальний в рамках даного документа |
[+dr.alt+] [+dr.title+] [+dr.class+] [+dr.style+] [+dr.align+] [+dr.valign+] |
атрибути alt, title, class, style, align, valign вихідного зображення |
[+dr.thumbWidth+] | ширина згенерованого попереднього перегляду |
[+dr.thumbHeight+] | висота згенерованого попереднього перегляду |
[+dr.thumbPath+] | шлях до файлу згенерованого попереднього перегляду |
[+dr.thumbFilesize+] | размір файлу згенерованого попереднього перегляду |
[+dr.bigWidth+] | ширина згенерованого великого зображення (якщо велике зображення не генерувалося - ширина вихідного зображення) |
[+dr.bigHeight+] | висота згенерованого великого зображення (якщо велике зображення не генерувалося - висота вихідного зображення) |
[+dr.bigPath+] | шлях до файлу згенерованого великого зображення (якщо велике зображення не генерувалося - шлях до файлу вихідного зображення) |
[+dr.bigFilesize+] | размір файлу згенерованого великого зображення (якщо велике зображення не генерувалося - розмір файлу вихідного зображення) |
[+dr.originalWidth+] | ширина вихідного зображення |
[+dr.originalHeight+] | высота вихідного зображення |
[+dr.originalPath+] | шлях до файлу вихідного зображення |
[+dr.originalFilesize+] | размір файлу вихідного зображення |
[+dr.originalFilename+] | ім'я вихідного файлу |
Мітка, в термінології даного плагіна - спеціальне слово (або частина слова), яке може зустрічатися всередині тега img в будь-якому місці: всередині атрибутів class, alt, title і т.п. і чи поза ними і є керуючим для деяких дій над даними зображенням (і тільки над ним).
Наприклад при значенні параметра $lightbox_mode = 1 попередній з lightbox-посиланням генерується тільки для зображень з міткою drlightbox. Приклад зображень з міткою drlightbox
<img src="image.jpg" alt="drlightbox" />
<img src="image.jpg" class = "drlightbox_align_left" />
<img src="image.jpg" title = "drlightbox picture" />
<img src="image.jpg" style = "background: url(drlightbox_bg.gif);" />
<img src="assets/images/mydrlightboxpicture.jpg" />
<img src="image.jpg" drlightbox />
Не варто переживати через можливість виникнення помилок валідації коду в разі застосування мітки в недозволеному місці. У вихідному коді всі керуючі мітки видаляються. Тому уникайте використання назв службових міток в назвах файлів зображень - частина імені файлу буде просто видалена. Увага: strong> не використовуйте мітки поза атрибутів (останній приклад), якщо ви використовуєте візуальний редактор, тому що в цьому випадку мітки будуть видалені самим редактором як помилковий html-код.
Mітка drthumbonly. Має сенс тільки при значенні параметра $lightbox_mode = 2і вказує на те, щоб цьому зображенню примусово НЕ генерувалося велике зображення і lightbox-посилання, тільки попередній перегляд.
При значені параметра $lightbox_mode = 1 для всіх зображень без мітки drlightbox і так генеруються переднім переглядом без lightbox-посилань, тому застосування drthumbonly надлишково.
Mітка drskip. Вказує плагіну повністю пропустити обробку зображення.
Перший реліз
* Помилка коли файли мають однакові імена, але з різних папок
* Помилка при використанні плагіна і Maxigallery в одному документі
* Імена міток змінені на drlightbox і drthumbonly. Оскільки мітки видаляються з вихідного коду, назва мітки lightbox не дозволяла використовувати в шаблоні слово lightbox (наприклад rel="lightbox")
* Помилка "Fatal error: Call to undefined function: size() in ...assets\plugins\directresize\directResize.php on line 141" яку викликав плагін, коли файл зображення, зазначений в оброблюваному плагіном тезі IMG не знайдений
* Не створюються lightbox-посилання при використанні lightbox_mode = 1 і мітки "drlightbox"
+ Нова мітка "drskip", зображення з цією міткою не обробляються плагіном
* Помилка при використанні gif-зображень в документах
* Помилка з командами фтп
+ додані плейсхолдери для підстановки style, align, valign вихідного зображення
+ додана підтримка і коректна робота з абсолютними шляхами зображень
+ Новий параметр $allow_from_allremote дає змогу дозволити використання плагіна для всіх зображень з віддалених джерел, без необхідності перераховувати їх в параметрі $allow_from
* Highslide оновлений до версії0.3.6
+ Додані стандартні пакети конфігурацій для slimbox, slidebox, lightbox v2
* Помилка при спільному використанні $thumb_default_sizemode = 4 и метки drthumbonly
+ Додана секція "Швидкий старт" та інші невеликі зміни в документації
* Помилка, не створювалися передні перегляди при використанні візуального режиму TinyMCE
* Помилка, коли пропадали мітки при використанні візуального режиму TinyMCE
+ Видалення зайвих пробілів після видалення міток з вихідного коду (але тільки один пробіл видаляється до або після мітки)
На даний момент мені не знайомий простий спосіб перевірити наявність файлу на віддалений хост при використанні PHP & lt; 5.0. Тому якщо на сайті використовуються зображення з віддалених хостів і плагін буде намагатися обробити зображення за неіснуючим шляхом - це викличе помилку php.
Даний плагін заснований на ідеї і розробки автора попередніх версій DirectResize - Arnaud.
В плагіні використовуються частини коду і частини документації з сніпета Maxigallery від doze.
Плагін використовує Chunkie class і PHx парсер відbS
Плагін використовує Thumbnail and Watermark Class від Emilio Rodriguez
Для прикладу використовується Highslide JS скрипт від Torstein Honsi
Дякую, друзі!
Metaller (metaller.ru@gmail.com)