Jump to content
kikasso

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

Recommended Posts

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

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

*    default = scale with white space, 
*    w = fill according to width, 
*    h = fill according to height
* 
*/
    public function resize($width = 0, $height = 0, $default = '') {

только нужно указать обрезать по высоте или ширине 

Share this post


Link to post
Share on other sites

нет ли ответа?

Edited by Jabob

Share this post


Link to post
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'] = '';
			}
  • +1 5

Share this post


Link to post
Share on other sites

Спасибо!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


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

Share this post


Link to post
Share on other sites

здесь

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

Share this post


Link to post
Share on other sites

здесь

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Edited by eeeMan

Share this post


Link to post
Share on other sites
версия ocStore 2.1.0.2.1

 

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

 

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

 

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

 

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

ff630e7b06db.png


 


 


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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Edited by Waha

Share this post


Link to post
Share on other sites

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

Модуль Image Cropper

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

 

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

Share this post


Link to post
Share on other sites

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

1.Модуль Image Cropper

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
В 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'] = '';
			}

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

Share this post


Link to post
Share on other sites
В 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
15 часов назад, AlekseyOstapenko сказал:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.