Перейти к содержанию

Рекомендуемые сообщения

Речь идет о проблеме с белыми полосками, возникающими при масштабировании превьюшек, если исходное изображение не пропорционально миниатюре.

Для решения этой задачи, предлагаю использовать библиотеку - http://phpthumb.gxdlabs.com

0. копируем из прикрепленного архива к топику, файлы в корень сайта

1. в файле config.php добавляем строчку, где Z:\my_syte.local\www/ - полный путь к корню сайта в файловой системе

define('DIR_BASE', 'Z:\my_syte.local\www/');

2. в \catalog\model\tool\image.php находим

$image = new Image(DIR_IMAGE . $old_image);
$image->resize($width, $height, $type);
$image->save(DIR_IMAGE . $new_image);

заменяем на

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->adaptiveResize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');

Готово, теперь все превьюшки на сайте будут одинаковые по ширине и высоте.

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

Не забываем чистить кэш изображений, чтобы обновились изображения!

По теме:

Удобная загрузка изображений OpenCart vs Dropbox

Использование PHPThumb, Plugins GD Reflection [en]

Сложное масштабирование изображений в PHP

adaptiv_resize.zip

  • +1 6

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость brk

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart....ension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

А для чего лучше?

Можете объяснить как это может повлиять на саму стабильность работы и SEO ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А для чего лучше?

Можете объяснить как это может повлиять на саму стабильность работы и SEO ?

Для магазинов, где много посетителей, тяжеловесный трафик (картинки) доставляется клиенту не с вашего сервера, а с CDN, где каналы пошире, а скорость загрузки картинок повыше.

SEO тут не при чем.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart....ension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

Отличный сервис, но бесплатно дают всего 500 Мб + ваше расширение тоже платное. Этот вариант больше подойдет для тех кто всерьез задумался о клиентской оптимизации, а не просто столкнулся с вопросом "умного" масштабирования

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Отличный сервис, но бесплатно дают всего 500 Мб + ваше расширение тоже платное. Этот вариант больше подойдет для тех кто всерьез задумался о клиентской оптимизации, а не просто столкнулся с вопросом "умного" масштабирования

Ну как бы да. Если вы задумываетесь о CDN, то значит у вас магазин посещаемый.

А что касается вашей дораьботкаи, то не понятно, зачем ради масштабирования притягивать phpthumb. Стандартными способами (GD) все делается.

Какая есть важная недоработка в OpenCart в ресайзе превьюшет - это то, что имена файлов-картинок с пробелами и не-урл-символами не экранируются. Большинство браузеров понимает, а вот экспорты-импорты тупят.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну как бы да. Если вы задумываетесь о CDN, то значит у вас магазин посещаемый.

А что касается вашей дораьботкаи, то не понятно, зачем ради масштабирования притягивать phpthumb. Стандартными способами (GD) все делается.

Какая есть важная недоработка в OpenCart в ресайзе превьюшет - это то, что имена файлов-картинок с пробелами и не-урл-символами не экранируются. Большинство браузеров понимает, а вот экспорты-импорты тупят.

все можно написать самому, вопрос нужно ли? (риторический)

сложное масштабирование это ведь не 2 строчки кода, есть еще другие задачи...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

очень просто - используя функцию resize() указываете нужную ширину, высота будет рассчитываться пропорционально исходному изображению

например, вам нужно делать изображения с шириной 300px

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->resize(300)->save(DIR_IMAGE . $new_image, 'JPG');

пример, для масштабирования по высоте

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->resize(0, 300)->save(DIR_IMAGE . $new_image, 'JPG');
  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

оперируйте переменными $width, $height которые передаются в функцию и все у вас получиться

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я как то поднимал эту тему для себя.

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

 

Нашел в интернете небольшое пособие адаптивного формирования блоков под размер браузера.

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

 

Если кому интересно - могу выложить, где то валяется.

 

Там чуть проще вариант получился, чем Вы описали.

Ресайз получается осуществляется на стороне клиента.

А в опциях магазина ставится максимальное возможное изображение.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

kikasso, как подправить под смарт, на сайте решение работает,

а при заходе со смартфона белый фон остается

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вставлю свои 5 копеек :)

 

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

 

Установка:

 

1) Открываем файл /catalog/models/tool/image.php и перед 

 

public function resize($filename, $width, $height) {

вставляем

 

	public function myresize($filename, $width, $height) {
		if (!file_exists(DIR_IMAGE . $filename) || !is_file(DIR_IMAGE . $filename)) {
			return;
		} 
		
		$info = pathinfo($filename);
		$extension = $info['extension'];
		
		$old_image = $filename;
		$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;
		
		if (!file_exists(DIR_IMAGE . $new_image) || (filemtime(DIR_IMAGE . $old_image) > filemtime(DIR_IMAGE . $new_image))) {
			$path = '';
			
			$directories = explode('/', dirname(str_replace('../', '', $new_image)));
			
			foreach ($directories as $directory) {
				$path = $path . '/' . $directory;
				
				if (!file_exists(DIR_IMAGE . $path)) {
					@mkdir(DIR_IMAGE . $path, 0777);
				}		
			}
			
			$image = new Image(DIR_IMAGE . $old_image);
			$image->myresize($width, $height);
			$image->save(DIR_IMAGE . $new_image);
		}
		
		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image;
		} else {
			return HTTP_IMAGE . $new_image;
		}	
	}

2) Файл /system/library/image.php

 

перед

 

public function resize($width = 0, $height = 0) {

вставляем

 

public function myresize($width = 0, $height = 0) {
    	if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

            $x = $this->info['width'];
            $y = $this->info['height'];

            // old images width will fit
            if(($x / $y) < ($width/$height)){
                $scale = $width/$x;
                $newX = 0;
                $newY = - ($scale * $y - $height) / 2;

            // else old image's height will fit
            }else{
                $scale = $height/$y;
                $newX = - ($scale * $x - $width) / 2;
                $newY = 0;
            }

            $image_old = $this->image;
            $this->image = imagecreatetruecolor($width, $height);

            $new_width =  $scale * $x;
            $new_height = $scale * $y;

            // now use imagecopyresampled
            imagecopyresampled($this->image, $image_old, $newX, $newY, 0, 0, $new_width, $new_height, $x, $y);

		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 255, 255, 255);
		}
        imagedestroy($image_old);
           
        $this->info['width']  = $width;
        $this->info['height'] = $height;
    }

 

3) теперь везде используется пока стандартная функция ресайза. Если вы хотите использовать новую, например в категории (в списке отображения товаров), то вам нужно открыть файл /catalog/controller/product/category.php, найти там $this->model_tool_image->resize и заменить на $this->model_tool_image->myresize. И так везьде где вам нужно. Не забудьте зайти потом в папку /image/cache/data  и удалить кшированые изображения со старым ресайзом

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

оперируйте переменными $width, $height которые передаются в функцию и все у вас получиться

 

revenons a nos moutons

решение проблемы было топорным но эффективным

/catalog/model/tool/image.php

(на всякий случай закомментировал дефолтные строки )

/*$image = new Image(DIR_IMAGE . $old_image);
$image->resize($width, $height);
$image->save(DIR_IMAGE . $new_image);*/
//image adaptive resize
require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
//$thumb->adaptiveResize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');
$thumb->resize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');

 

 

 

/catalog/controller/product/category.php

 

$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));

 

заменяем аргументы $this->config->get

На необходимые числа

$image = $this->model_tool_image->resize($result['image'],0,120);

 

где первая цифра ширина (0 === auto), вторая высота изображения

В данном примере рассмотрен вариант с ресайзом миниатюр изображений товаров в категории товара - аналогично необходимо искать в и для товаров  в /catalog/controller/product/product.php

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вставлю свои 5 копеек :)

 

на оксторе 1.5.4.1 ничего не изменилось ((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Здравствуйте, я создал тему в соседней ветке форума, но уже позже нашел это обсуждение.
Моя тема: https://opencartforum.com/topic/21816-razmer-failov-fotografii-uvelichivaetsia-posle/

 

но наверное о ресайзе корректнее продолжить здесь, поэтому скопирую текст сюда:

 

Обнаружил весьма неприятную особенность в OS Store 1.5.4.1.

Размер большого изображения в настройках магазина установлен в 1590 х 1910 px

Все фотографии перед загрузкой редактируются в Photoshop и их размер составляет именно 1590 х 1910 px. Это было сделано специально, чтобы движок не "трогал" большие фотографии. Важно обеспечить максимальное качество снимков.

Опытным путем был определен максимальный размер файла - не более 300 KB. Соответственно ВСЕ фотографии имеют размер не более 300 KB.

Файлы загружаются по FTP в /image/data и добавляются в карточку товара стандартным способом, но при просмотре карточки товара в браузере размер файла каждой фотографии становится существенно больше.

 

Пример:

оригинальный файл: /image/data/tovar1/photo-1.lpg : 300 KB

в карточке товара в браузере:  photo-1-1590x1910.jpg : 979 КБ

в /image/cache/data/tovar1/photo-1-1590x1910.jpg : 979 KB

 

одна фотография имеет размер даже 1034 KB!!! Мегабайт... Офигеть!    :shock:
 

Подскажите, пожалуйста, как мне решить эту проблему. Фотографии такого размера не приемлемы - для пользователей с медленным каналом связи магазин будет работать отвратительно медленно.

Как запретить движку "оптимизировать" фотографии, размер которых по ширине и высоте не меняется относительно оригинального?

 

Буду очень признателен за помошь. Я просто извелся уже весь, пытаясь самостоятельно понять.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

где то в настройках системных либ (библиотек) есть степень сжатия.... Сам вот задумался на днях об этом... И это таки невероятно важный аспект!

Как вариант - не использовать функцию resize, а каким то образом использовать переменную $old_image

Давайте подумаем вместе.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Нашел настройки изображения в

\system\library\image.php

    public function save($file, $quality = 75) {
		$info = pathinfo($file);
       
		$extension = strtolower($info['extension']);
   		
		if (is_resource($this->image)) {
			if ($extension == 'jpeg' || $extension == 'jpg') {
				imagejpeg($this->image, $file, $quality);

 

В моем случае стояло по дефолту 90 - в документации php.net для метода imagejpeg() сказано что последний аргумент - это качество создаваемого вновь изображения - но при попытках выставить 0 или 100 ничего не менялось - размер тот же.

 

НАШЕЛ РЕШЕНИЕ

\vendor\ThumbLib\GdThumb.inc.php

$defaultOptions = array 
 (
  'resizeUp'                     => false,
  'jpegQuality'                  => 90,
  'correctPermissions'           => false,
  'preserveAlpha'	         => true,
  'alphaMaskColor'               => array (255, 255, 255),
  'preserveTransparency'	 => true,
  'transparencyMaskColor'        => array (0, 0, 0)
  );
}

 

jpegQuality = 90 менять на свой вкус - в Photoshop через Ctrl+Shift+Alt+S сохраняет на высоком качестве 60% (то есть в нашем случае 60 или до 75)

Изменено пользователем Solli

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вставлю свои 5 копеек :)

 

на оксторе 1.5.4.1 ничего не изменилось ((

Обязательно надр очистить /image/cache/data 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

поигрался со степенью сжатия jpg. Ну это совсем не то. 

Во первых я УЖЕ обработал фотографии. И потратил довольно много усилий, чтобы фотография была в приемлемом касестве при приемлемом размере файла.

В итоге я получаю в магазине второй раз пережатое фото с ухудшением качества, видным невооруженым взглядом, все-равно увеличившийся размер файла.

 

То есть теперь при сжатии 60 файл без уменьшения физических размеров имеет худшее качество и объем 521 КБ вместо исходных 300 КБ.

 

Прошу помощи как запретить движку оптимизировать изображение, если его размер по ширине и высоте соответствует заданому в настройках магазина размеру большого фото?

Ведь по логике вещей нужно просто скопировать фотографию в папку cache и переименовать ее соотвествующим образом.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Прошу помощи как запретить движку оптимизировать изображение, если его размер по ширине и высоте соответствует заданому в настройках магазина размеру большого фото?

Ведь по логике вещей нужно просто скопировать фотографию в папку cache и переименовать ее соотвествующим образом.

Так это уже сделано.

model/tool/image.php

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $old_image);
				$image->resize($width, $height);
				$image->save(DIR_IMAGE . $new_image);
			} else {
				copy(DIR_IMAGE . $old_image, DIR_IMAGE . $new_image);
			}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.