Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

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

Link to comment
Share on other sites


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

 

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

Link to comment
Share on other sites

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

 

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

 
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']);
}
 
Подскажите что в моём варианте удаляем, а что оставляем?
Link to comment
Share on other sites


  • 3 weeks later...
  • 4 months later...

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

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

Edited by eeeMan
Link to comment
Share on other sites


  • 7 months later...
версия ocStore 2.1.0.2.1

 

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

 

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

 

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

 

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

ff630e7b06db.png


 


 


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

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

 

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

 

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

Link to comment
Share on other sites


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

Edited by Waha
Link to comment
Share on other sites

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

Модуль Image Cropper

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

 

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

Link to comment
Share on other sites


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

1.Модуль Image Cropper

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

 

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

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites

  • 2 months later...

Почему не работает стандартная функция 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;
	}
Edited by slavasmoll
Link to comment
Share on other sites


 

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'] = '';
			}

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

Link to comment
Share on other sites

  • 1 month later...
В 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'] = '';
			}

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

Link to comment
Share on other sites


  • 3 weeks later...
В 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

Link to comment
Share on other sites


  • 2 months later...
15 часов назад, AlekseyOstapenko сказал:

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

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

Link to comment
Share on other sites


  • 2 months later...
В 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 не работает не пойму что не так... очень нада!!!!!

Edited by dadx
Link to comment
Share on other sites


  • 1 month later...
В 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'] = '';
			}

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

Link to comment
Share on other sites


 

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

 

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

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

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

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

 

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

 

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

 

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

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

 

Спойлер


 

resize2.jpg.892e1b66fc9bb6647c5b10923cf9bd8d.jpg

resize1.jpg.ef18e9094366ff33921e73f477153ddb.jpg

resize3.jpg.9ba40e61f6b7afc7039374d9aa36ecd9.jpg

resize4.jpg.0fd4fa315d87657f67b10c5c7de8f2e1.jpg

 

 

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

 

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

 

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

resize5.jpg.b5ebc5c6468e75d99ac78a81d0ed77f4.jpg

 

убраны слева и справаresize6.jpg.36a33a11edfde525c9408547a8b90a75.jpg

 

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

 

resize7.jpg.35b81566605bb8ebc0eda5dbbb3bbb87.jpg

 

Link to comment
Share on other sites

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

 

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

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

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.