1

Тема: [Решено] Превью изображений в шаблоне или ресайз на лету.

Здравствуйте. Неделю назад познакомился с движком и первой доработкой пришлось делать ресайз изображений в шаблоне "на лету". Поделюсь тем, что у меня вышло. Если уже было что-то готовое, прошу прощения, прошелся по форуму, нашел только мертвую ветку http://forum.imagecms.net/viewtopic.php?id=185

1. В папке application/helpers/ создаем файл thumb_helper.php (хелпер codeigniter) с содержимым:

<?php

if (!defined('BASEPATH')) {
    exit('No direct script access allowed');
}

/**
 * Thumb()
 * A TimThumb-style function to generate image thumbnails on the fly.
 *
 * @access public
 * @param string $fullname
 * @param int $width
 * @param int $height
 * @param string $image_thumb
 * @return String
 *
 */

function thumb($fullname, $width, $height) {

    // Path to image thumbnail in your root
    $dir = './uploads/thumbs/';
    $url = base_url() . 'uploads/thumbs/';
    
    // Get the CodeIgniter super object
    $CI = &get_instance();
    
    // get src file's extension and file name
    $extension = pathinfo($fullname, PATHINFO_EXTENSION) ?: 'jpg';
    $filename = pathinfo($fullname, PATHINFO_FILENAME);
    $image_origin = '.'. $fullname;
    $image_thumb = $dir . $filename .'-'. $height .'x'. $width .'-'. substr(md5($fullname), 0, 5) .'.'. $extension;
    $image_returned = $url . $filename .'-'. $height .'x'. $width .'-'. substr(md5($fullname), 0, 5) .'.'. $extension;
    
    if (!file_exists($image_thumb)) {

        // LOAD LIBRARY
        $CI->load->library('image_lib');
        
        // CONFIGURE IMAGE LIBRARY
        $config['source_image'] = $image_origin;
        $config['new_image'] = $image_thumb;
        $config['width'] = $width;
        $config['height'] = $height;

        $CI->image_lib->initialize($config);
        $CI->image_lib->resize();
        $CI->image_lib->clear();
    }
    
    return $image_returned;
}

2. Подключаем наш хелпер в автозагрузку. То есть, открываем файл application/config/autoload.php и находим вот этот кусок:

/*
  | -------------------------------------------------------------------
  |  Auto-load Helper Files
  | -------------------------------------------------------------------
  | Prototype:
  |
  |    $autoload['helper'] = array('url', 'file');
 */

$autoload['helper'] = [
                       'template',
                       'url',
                       'language',
                       'array',
                       'rules',
                       'widget',
                       'form_csrf',
                       'my_url',
                       'category',
                       'page',
                       'cache',
                       'html',
                       'javascript',
                       'security',
                       'siteinfo',
                       'form_helper',
                       'module',
                       'filesystem',
                       'translit'
                      ];

Выше мы видим активные хелперы, куда нам и требуется добавить наш "thumb". Добавим его в конец списка, однако, нужно не забыть поставить запятую после предыдущего хелпера, вслед за которым мы подключаем новый. Получится так:

/*
  | -------------------------------------------------------------------
  |  Auto-load Helper Files
  | -------------------------------------------------------------------
  | Prototype:
  |
  |    $autoload['helper'] = array('url', 'file');
 */

$autoload['helper'] = [
                       'template',
                       'url',
                       'language',
                       'array',
                       'rules',
                       'widget',
                       'form_csrf',
                       'my_url',
                       'category',
                       'page',
                       'cache',
                       'html',
                       'javascript',
                       'security',
                       'siteinfo',
                       'form_helper',
                       'module',
                       'filesystem',
                       'translit',
                       'thumb'
                      ];

3. Теперь, мы можем "на лету" изменять размер изображения там, где того требует шаблон. Для примера возьмем конструкцию:

<img src="{$page.field_image}" alt="{$page.title}">

и заменим на:

<img src="{thumb($page.field_image, 270, 270)}" alt="{$page.title}">

результатом будет уменьшенное изображение по большей стороне, сохраняя пропорции оригинала до 270х270.

p.s. По умолчанию, превью будет складываться в папку uploads/thumbs/
p.p.s. Для тех кто немного понимает, будет полезна эта ссылка https://goo.gl/APFlHa

Mike Evstropov

Thumbs up +1 Thumbs down

2 Отредактировано Lifesaver903 (02-03-2017 00:04:42)

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

А проверка на то, существует отресайзленная картинка или нет разве не нужна?)

UPD
А, все увидел- невнимательно код функции смотрел)

Продам ОДНУ лицензию ImageCMS Shop Premium. Писать в личку. или на Lifesaver903@yandex.ru

Thumbs up Thumbs down

3

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Была такая реализация http://blog.rlstudio.com/2011/11/imagec … -shablona/ из функционала, там не только размер, но еще метод обрезать или ресайзить изображение до указанных размеров

Thumbs up Thumbs down

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Каким образом можно докрутить данное решение до кропа через энтропию ?

вот статья - https://habrahabr.ru/company/io/blog/259997/
вот классы, где реализована энтропия, нужно их внедрить в CMS - https://github.com/tim-reynolds/crop/tr … yAlgorithm

Может кто нибудь это сделать и описать процесс ?

Или хотябы сделать умный кроп (сначало идет ресайз, потом кроп). Пробовал последовательно вызывать методы ресайза а потом сразу же кропа - результата почему-то нет.

Thumbs up Thumbs down

5

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Чего внедрять то, классы библиотеки уже написаны, берём и используем в чём проблема? За беспатно не кто сидеть не будет и делать именно для вас.

Сделаю обновления вашего магазина до актуальной версии системы со вем переносом ваших товаров, просьба писать в приват.
https://novabench.com/image/742206.png

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

AJIEKCAHDP пишет:

Чего внедрять то, классы библиотеки уже написаны, берём и используем в чём проблема? За беспатно не кто сидеть не будет и делать именно для вас.

Я не программист. И не говорил про бесплатно. Сколько времени и денег, если вы готовы взяться ??

Нужно внедрить их, чтобы была возможность пользоваться всеми методами, описанными в той библиотеке. Работа так же через helper.

Thumbs up Thumbs down

7

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Я ознакомлюсь со всем более детальнее и скажу вам сколько это может стоить и сколько уйдёт по времени.

Сделаю обновления вашего магазина до актуальной версии системы со вем переносом ваших товаров, просьба писать в приват.
https://novabench.com/image/742206.png

8

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Собстно уже есть готовое решение. https://yadi.sk/d/HcCgr36X3GPVCY
Написано криво-косо, но более-менее работает. К следующей обнове цмс перепишу нормально - думаю разрабы включат.

imageResize(относительный путь к изображению, ширина, высота, тип ресайза, создавать новый файл или пересохранять существующий)

Использование:
imageResize('/uploads/gallery/1/asdaden1en.jpg', 300, 300); - уменьшение с обрезанием
или
imageResize('/uploads/gallery/1/asdaden1en.jpg', 300, 300, 'scale'); - уменьшение без обрезания

Thumbs up Thumbs down

9

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Fire_Horse, только я по коду бегло посмотрел, это же не кроп через энтропию...

Профессиональное создание сайтов любой сложности, аудит, продвижение, а также поддержка вашего интернет ресурса - web2life.ru

TIMEWEB > Всегда больше, чем просто хостинг для ImageCMS!

10

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Есть такой косяк. В таком случае если библиотека работающая - в субботу-воскресенье перекручу ее в модуль цмс.

Thumbs up Thumbs down

11 Отредактировано Fire_Horse (03-04-2017 13:20:53)

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

В принципе накидал тестовый вариант. Если у кого будет время - потестируйте. Устарело
На выходных доделаю. Основная проблема - установить imageMagic. Но в isp панели - это не проблема.
http://firstwiki.ru/index.php/%D0%A3%D1 … magemagick

Thumbs up Thumbs down

12 Отредактировано Kruglov_Anton (28-03-2017 00:04:03)

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

Fire_Horse пишет:

В принципе накидал тестовый вариант. Если у кого будет время - потестируйте. https://yadi.sk/d/A9xN5OD03GPpWa
На выходных доделаю. Основная проблема - установить imageMagic. Но в isp панели - это не проблема.
http://firstwiki.ru/index.php/%D0%A3%D1 … magemagick

Пока реализована энтропия на сколько я понимаю да ?  Работает хорошо! Потестил на разных картинках - с лицами и без, вырезает как нужно. Еще бы добавить чтобы можно было качество задавать и наложение водяных знаков - было бы прекрасно. Спасибо! Ждем полной реализации.

Thumbs up Thumbs down

13 Отредактировано Fire_Horse (03-04-2017 13:36:06)

Re: [Решено] Превью изображений в шаблоне или ресайз на лету.

https://yadi.sk/d/A9xN5OD03GPpWa
Вторая тестовая версия.
Буду рад поправкам.

magickCrop(
    путь к изображению. Указывайте относительно (например: /uploads/images/logo.jpg).,
    ширина || null,
    высота || null,
    качество изображения: от 1 до 100 (рекомендуемое: 70),
    тип: [center, entropy, balanced, face],
    заменять ли исходное изображение
);

magickScale(
    путь к изображению. Указывайте относительно (например: /uploads/images/logo.jpg).,
    ширина || null,
    высота || null,
    качество изображения: от 1 до 100 (рекомендуемое: 70),
    заменять ли исходное изображение
);

Использование:
1) Закидываете в папку с модулями: /application/modules/.
2) В админке: "Модули" -> "Все модули" -> "Установить модули" -> "Установка" напротив "Image Resize".
3) В шаблоне: <img src="{magickCrop($page['field_image'], 300, 300)}">

Thumbs up Thumbs down