Зображення, фотографії та графічні зображення

Картинки, фотографії та інші графічні зображення не просто «пожвавлюють» сайт, вони є його невід'ємною частиною. У цьому уроці мені хотілося б торкнутися такої теми як завантаження та обробка зображень при розміщенні на сайт засобами НетКета.

У ході уроку будуть розглянуті такі питання як:

  • завантаження зображень: файлові системи та способи;
  • функції з обрізання/зменшення зображень, створення прев'ю;
  • накладання утермарки.

На сайті зображення можуть використовуватись у: фотогалереї, зображення до новини тощо.

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

Для того, щоб у вас була можливість додавати зображення до будь-якого об'єкта (новина, статтю або галерею), потрібно створити відповідне поле в компоненті.

Приклад такого поля:

зображення

На його прикладі розберемося з параметрами поля:

  • Назва поля. Ім'я задається англійськими літерами. Використовується для виведення самого зображення в шаблоні. У шаблоні завантажене зображення буде доступне через змінну $f_Ім'яПоля. У цьому прикладі - $f_SmallPhoto.
  • Опис. Введене вами значення буде за промовчанням виводиться у формі додавання та редагування об'єкта (новини, статті).
  • Тип поля. У разі необхідно здійснити завантаження файлу на сервер, тому тип поля вибирається «Файл».
  • Формат. У цьому рядку потрібно вказати допустимий розмір файлу та його тип. У прикладі наведено значення: «50000:image/*». Цей запис означає те, що розмір файлу, що закачується, не повинен перевищувати 50000байт (

48 кілобайт або

0,04 мегабайт) і файл має бути зображенням. За відсутності цього запису користувач зможе завантажити будь-який файл.

  • Тип файлової системи.
  • Далі опціонально встановлюються необов'язкові значення.

    • Таким чином, після створення необхідного поля, ви вже можете завантажувати зображення. Наступним кроком дуже важливо програмно здійснити постобробку зображення. Немає необхідності розміщувати на сайті зображення розміром із великий плакат. Оптимальними розмірами можуть бути, наприклад, 800×600 пікселів. Але це є для великого зображення. Розміри превью, звичайно ж, повинні бути меншими, наприклад 150x90 пікселів.

    Давайте розберемо найпростіший приклад.

    зображення

    У списку статей і всередині зображення буде мати зменшений вигляд з розміром 160x100 пікселів.

    фотографії

    Для роботи із зображенням існує клас nc_ImageTransform. Клас автоматично завантажується в діях після додавання та зміни об'єкта. Щоб завантажити його в інші місця, потрібно підключити файлnc_imagetransform.class.php.

    Зробити це можна в такий спосіб:

    Цей клас має методи:

    • $src_img — шлях до вихідного зображення
    • $dest_img — шлях до зображення, що створюється
    • $width — ширина зображення, що створюється
    • $height — висота створюваного зображення
    • $mode - (опціонально) режим зменшення: 0 - пропорційно зменшує (за замовчуванням); 1 - вписує у зазначені розміри
    • $format — (опціонально) формат зображення: NULL, 'jpg', 'gif', 'png' або 'bmp'
    • $quality — (опційно) якість стиснення зображення при форматі «jpg». Може приймати значення від 0 до 100.замовчуванням — 90
    • $message_id — (опціонально) номер об'єкта, до якого належить файл
    • $field — (опціонально) номер поля або його ім'я, до якого належить файл

    На простому прикладі код виглядатиме так:

    Тут зображення з поля Picture обрізається по більшій стороні до 600 пікселів.

    Як у загальних випадках можна вчинити при закачуванні зображення:

    Використовуючи другий спосіб, ви зможете задати необхідні параметри для будь-якої кількості зображень.

    Метод createThumb має аналогічні параметри методу imgResize, за винятком параметрів $message_id та $field

    Приклад: у вас на сайті є фотогалерея і потрібно, щоб у загальному списку виводилося превью, а при натисканні на одне з зображень виводилася його збільшена копія. Зробити це можна за аналогією з наведеним прикладом: створюєте два поля, в дії прописуєте потрібний код.

    Наступний функціонал, який можна впровадити - це накладення водяного знака (watermark) на зображення, що закачується. У класу nc_ImageTransform також існує метод для накладання утермарки:

    • $classID — номер компонентів або ім'я системної таблиці
    • $field — номер поля або його латинська назва
    • $message — номер об'єкта
    • $watermark - абсолютний або відносний шлях до водяного знаку
    • $mode — (опціонально) розташування знака:

    0 - по центру; 1 - лівий верхній кут; 2 - правий верхній кут; 3 - лівий нижній кут; 4 - правий нижній кут.

    Насправді використання методу виглядає так:

    Примітка: Для того, щоб вставити свій код у блоки дій після додавання/змін, згенеруйте код дій і в самому верхувставте свій код: