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

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

kikasso
 Share

Recommended Posts

1Andrew1 Proficient

1Andrew1

Posted
Posted

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

Link to comment
Share on other sites

AlexDW Grand Master

AlexDW

Posted
Posted

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

 

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

Link to comment
Share on other sites
1

1Andrew1 Proficient

1Andrew1

Posted
Posted

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

 

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

 
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...
eeeMan Collaborator

eeeMan

Posted
Posted (edited)

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

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

Edited by eeeMan
Link to comment
Share on other sites

  • 7 months later...
toliggg Enthusiast

toliggg

Posted
Posted
версия 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

ocdev_pro Veteran

ocdev_pro

Posted
Posted (edited)

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

Edited by Waha
Link to comment
Share on other sites
1
1

toliggg Enthusiast

toliggg

Posted
Posted

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

Модуль Image Cropper

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

 

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

Link to comment
Share on other sites

toliggg Enthusiast

toliggg

Posted
Posted

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

1.Модуль Image Cropper

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

 

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

Link to comment
Share on other sites

ocdev_pro Veteran

ocdev_pro

Posted
Posted

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

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

Link to comment
Share on other sites
1
1

  • 2 months later...
slavasmoll Newbie

slavasmoll

Posted
Posted (edited)

Почему не работает стандартная функция 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

mbrogan Collaborator

mbrogan

Posted
Posted

 

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
1

  • 1 month later...
denxxl222 Contributor

denxxl222

Posted
Posted
В 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...
Klaus Community Regular

Klaus

Posted
Posted
В 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...
luzhkov77 Newbie

luzhkov77

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

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

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

Link to comment
Share on other sites

  • 2 months later...
dadx Rookie

dadx

Posted
Posted (edited)
В 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...
smirniy Apprentice

smirniy

Posted
Posted
В 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

sitecreator Grand Master

sitecreator

Posted
Posted

 

В последней версии (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
1
1

FreemanMike Enthusiast

FreemanMike

Posted
Posted
В 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
Go to topic listing

Покупателям

Разработчикам

Полезная информация

Последние дополнения

×
×
  • 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.

  I accept