Адаптивный resize изображений [решено]

[1Andrew1]

А может кто свой сайт кинуть или демо, посмотреть как работает?

[1Andrew1]

Правильно ли я понял что речь идёт о превью, о маленьких фото? Есть подобное решение для удаления "белых полос" при просмотре Больших фото, после того как кликнули на превьюшку? 

[AlexDW]

Правильно ли я понял что речь идёт о превью, о маленьких фото? Есть подобное решение для удаления "белых полос" при просмотре Больших фото, после того как кликнули на превьюшку? 

 

вторая часть предыдущего сообщения

[1Andrew1]

вторая часть предыдущего сообщения

 

У меня в этом файле не много по другому, а именно вот так:

 

if ($product_info['image']) {

$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

} else {

$this->data['popup'] = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

}

 

if ($product_info['image']) {

$this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));

$this->document->setOgImage($this->data['thumb']);

}

 

Подскажите что в моём варианте удаляем, а что оставляем?

[AlexDW]

здесь

начинайте учить php и тд, если сами планируете заниматься сайтом - явно пригодится ;)

[1Andrew1]

здесь

начинайте учить php и тд, если сами планируете заниматься сайтом - явно пригодится ;)

 

Спасибо!!! сделал как там и все заработало!

[Alexlife]

ссылка на архив старттопера не открвается

[Alexlife]

подскажите а как поменять цвет фона в ThumbLib? у меня поменялся с белого на черный на пнг фотках...

[eeeMan]

Тема называется адаптивный ресайз, имеется в виду на компе открывать изображение размером например 1200 на 800, а на телефоне 600 на 300. А обсуждение совсем не туда зашло, мда.

Вопрос так и не решен

Змінено 10 лютого 2016 користувачем eeeMan

[toliggg]

версия ocStore 2.1.0.2.1

 

есть ряд проблем с картинками

 

1) главная картинка у товара - исходник 460 на 500 (в настройках тоже указано 460 на 500), в карточке товара это смотрится отлично НО при этом в категории привью товара хочется немного иного размера 260 на 384 то есть более вытянутого НО при этом появляются белые края с верху и снизу - это именно в категориях в списке товаров.

 

вопрос - как заставить обрезать картинку с лева и права чтоб не появлялись белые области с верху и с низу именно у привью товаров в списке категорий.

 

пример на скрине - по центру то что нужно добиться

 

 

2) проблем на странице товара

главные картинки у товаров разные по размеру у части товаров главная картинка - исходник 460 на 500 а у другой половины 500 на 750 

 

получается что если я в настройках указываю размер большой картинки товара 460 на 500 то у тех товаров у которых картинка  500 на 750 добавляются белые края по бокам с лева и права 

 

вопрос - как сделать чтоб обе группы картинок с разными размерами отображались без белых краев.

[ocdev_pro]

Попробуйте использовать данный модуль, который поможет вам обрезать картинки (в ручном режиме) и тем самым сохранить идентичность пропорций картинок для товаров в списке
1.Модуль Image Cropper
2. Еще могу подправить Вам сам обработчик изображений в opencart таким образом, что бы главное фото на странице товара было в оригинальных пропорциях без белых краев

Змінено 18 вересня 2016 користувачем Waha

[toliggg]

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

Модуль Image Cropper

 спасибо, но слишком долго придется редачить 3 тысячи товаров ...

 

нужен вариант более автоматизированный 

[toliggg]

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

1.Модуль Image Cropper

2. Еще могу подправить Вам сам обработчик изображений в opencart таким образом, что бы главное фото на странице товара было в оригинальных пропорциях без белых краев

 

заинтересовал пункт 2 - можете сделать без белых краев при условии что у товаров гкартинка разного размера? 

[ocdev_pro]

заинтересовал пункт 2 - можете сделать без белых краев при условии что у товаров гкартинка разного размера? 

Пишите в личку

[slavasmoll]

Почему не работает стандартная функция crop в ocstore 2.1.0.1? Когда прописиваю в категории чтоб она работала, она не работает и сайт тупо белым екраном делается

public function crop($top_x, $top_y, $bottom_x, $bottom_y) {
$image_old    =    $this->image;
$this->image    =    imagecreatetruecolor($bottom_x    -    $top_x,    $bottom_y    -    $top_y);
imagecopy($this->image,    $image_old,    0,    0,    $top_x,    $top_y,    $this->info['width'],    $this->info['height']);
imagedestroy($image_old);
$this->info['width']    =    $bottom_x    -    $top_x;
$this->info['height']    =    $bottom_y    -    $top_y;
	}

Змінено 9 грудня 2016 користувачем slavasmoll

[mbrogan]

 

OC 2.x, обрезка изображений в квадрат стандартными средствами без белых полей, широких по ширине, высоких по высоте (за наводку спасибо - freelancer):

 

system\library\image.php (находим в - public function resize):

$scale_w = $width / $this->info['width'];
$scale_h = $height / $this->info['height'];

Ниже этих строк вставляем:

$default = 'w';
        if ($scale_h > $scale_w) {
            $default = 'h';
        }

Готово.

 

Дополнительно для тех кто хочет чтобы большим изображением был оригинал загруженного фото (заранее подготовленный файл), в файле catalog\controller\product\product.php находим код:

if ($product_info['image']) {
				$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$data['popup'] = '';
			}

И заменяем его на:

if ($product_info['image']) {
				$data['popup'] = 'image/'. $product_info['image'];
			} else {
				$data['popup'] = '';
			}

Работает, спасибо.

[calibr]

Кто знает как сделать картинки в описании категории адаптивными? Версия движка 1.5.5.1 шаблон Polianna

[denxxl222]

В 18.08.2015 в 08:15, skull3d сказал:

OC 2.x, обрезка изображений в квадрат стандартными средствами без белых полей, широких по ширине, высоких по высоте (за наводку спасибо - freelancer):

 

system\library\image.php (находим в - public function resize):

$scale_w = $width / $this->info['width'];
$scale_h = $height / $this->info['height'];

Ниже этих строк вставляем:

$default = 'w';
        if ($scale_h > $scale_w) {
            $default = 'h';
        }

Готово.

 

Дополнительно для тех кто хочет чтобы большим изображением был оригинал загруженного фото (заранее подготовленный файл), в файле catalog\controller\product\product.php находим код:

if ($product_info['image']) {
				$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$data['popup'] = '';
			}

И заменяем его на:

if ($product_info['image']) {
				$data['popup'] = 'image/'. $product_info['image'];
			} else {
				$data['popup'] = '';
			}

просто лучший,спасибо большое

[Klaus]

В 18.08.2015 в 10:15, skull3d сказал:

OC 2.x, обрезка изображений в квадрат стандартными средствами без белых полей, широких по ширине, высоких по высоте (за наводку спасибо - freelancer):

 

system\library\image.php (находим в - public function resize):

$scale_w = $width / $this->info['width'];
$scale_h = $height / $this->info['height'];

Ниже этих строк вставляем:

$default = 'w';
        if ($scale_h > $scale_w) {
            $default = 'h';
        }

Готово.

 

Дополнительно для тех кто хочет чтобы большим изображением был оригинал загруженного фото (заранее подготовленный файл), в файле catalog\controller\product\product.php находим код:

if ($product_info['image']) {
				$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$data['popup'] = '';
			}

И заменяем его на:

if ($product_info['image']) {
				$data['popup'] = 'image/'. $product_info['image'];
			} else {
				$data['popup'] = '';
			}

Очень полезная информация. Огромное спасибо. А можете подсказать как сделать две функции, одну с добавлением полей (как было), а вторую с обрезанием (как вы написали). Чтобы потом в контроллере можно было просто менять эти функции, допустим в категориях применить функцию с обрезанием, а в товаре - с полями.
Я попробывал так сделать, но страница с новой функцией ругается на её отсутствие в ModelToolImage

[AlekseyOstapenko]

Подскажите плиз решение под версию опенкарт 2.3 этот метод не работает, буду очень признателен.

[luzhkov77]

15 часов назад, AlekseyOstapenko сказал:

Подскажите плиз решение под версию опенкарт 2.3 этот метод не работает, буду очень признателен.

Как не работает? все работает, только нужно поменять переменные old_image на image_old new_image на image_new

[dadx]

В 18.08.2015 в 07:15, skull3d сказал:

OC 2.x, обрезка изображений в квадрат стандартными средствами без белых полей, широких по ширине, высоких по высоте (за наводку спасибо - freelancer):

 

system\library\image.php (находим в - public function resize):

$scale_w = $width / $this->info['width'];
$scale_h = $height / $this->info['height'];

Ниже этих строк вставляем:

$default = 'w';
        if ($scale_h > $scale_w) {
            $default = 'h';
        }

Готово.

 

Дополнительно для тех кто хочет чтобы большим изображением был оригинал загруженного фото (заранее подготовленный файл), в файле catalog\controller\product\product.php находим код:

if ($product_info['image']) {
				$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$data['popup'] = '';
			}

И заменяем его на:

if ($product_info['image']) {
				$data['popup'] = 'image/'. $product_info['image'];
			} else {
				$data['popup'] = '';
			}

 

Объясните подробнее, у меня тоже на 2.3 не работает не пойму что не так... очень нада!!!!!

Змінено 19 липня 2017 користувачем dadx

[smirniy]

В 18.08.2015 в 07:15, skull3d сказал:

OC 2.x, обрезка изображений в квадрат стандартными средствами без белых полей, широких по ширине, высоких по высоте (за наводку спасибо - freelancer):

 

system\library\image.php (находим в - public function resize):

$scale_w = $width / $this->info['width'];
$scale_h = $height / $this->info['height'];

Ниже этих строк вставляем:

$default = 'w';
        if ($scale_h > $scale_w) {
            $default = 'h';
        }

Готово.

 

Дополнительно для тех кто хочет чтобы большим изображением был оригинал загруженного фото (заранее подготовленный файл), в файле catalog\controller\product\product.php находим код:

if ($product_info['image']) {
				$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$data['popup'] = '';
			}

И заменяем его на:

if ($product_info['image']) {
				$data['popup'] = 'image/'. $product_info['image'];
			} else {
				$data['popup'] = '';
			}

Спасибо, работает. А как сделать, чтобы не только главное изображение, но и дополнительные тоже отображались в оригинале?

[sitecreator]

 

В последней версии (1.0.3) добавил адаптивный ресайз в трех вариантах:

 

• по ширине
• по высоте
• автоматически

Соответственно достаточно в нужном месте поставить вызов если нужно выборочно ресайзить адаптивно.

Правильнее было бы это называть "адаптивная обрезка".

Ибо "адаптивный ресайз" не подразумевает обрезку совсем.  в том же imagemagick под адаптивным ресайзом понимается именно ресайз и никакой обрезки (crop).

 

resize($filename, $width, $height, 'auto')

 

а можно вообще код не править, а выставить настройки в самом модуле.  тогда будет применено ко всем картинкам.

 

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

плюч все плюшки суперсжатия и качество+скорость преобразования от imagick.

 

Спойлер

 

 

 

Плюс в планах добавление функции убирания белых полей.

 

Пример работы этого метода (в зависимости от того выбрана ли адаптивная обрезка):

 

поле есть в исходнике по краям

 

убраны слева и справа

 

убраны сверху и снизу

 

 

[FreemanMike]

В 19.07.2017 в 13:56, dadx сказал:

 

Объясните подробнее, у меня тоже на 2.3 не работает не пойму что не так... очень нада!!!!!

Есть решение для 2.3.? Можно выложить сюда или в личку!