Перейти к содержимому


Фото
- - - - -

Кадрирование изображений товаров

ресайз кадрирование

  • Чтобы отвечать, сперва войдите на форум
49 ответов в теме

#41 DaVinci

DaVinci
  • Фрилансер
  • 1 137 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 27.08.2018 - 19:46

Будет здорово, если поделитесь решением.

 

попробую



#42 question

question
  • Пользователь
  • 81 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 28.08.2018 - 09:56

Я скажу, как реализовано у меня, а вы решайте, подходит ли вам это. Выше ДаВинчи предлагает библиотеку — наверняка так лучше будет, но я так не умею и хотел реализовать всё родными средствами Симплы.

 

1. В файл api/Design.php в функцию resize_modifier добавить свой параметр ($aspect) в двух местах перед ватермарком. Получится так:

public function resize_modifier($filename, $width=0, $height=0, $aspect=false, $set_watermark=false)
{
    $resized_filename = $this->image->add_resize_params($filename, $width, $height, $aspect, $set_watermark);
    $resized_filename_encoded = $resized_filename;
    
    if(substr($resized_filename_encoded, 0, 7) == 'http://')
        $resized_filename_encoded = rawurlencode($resized_filename_encoded);


    $resized_filename_encoded = rawurlencode($resized_filename_encoded);


    return $this->config->root_url.'/'.$this->config->resized_images_dir.$resized_filename_encoded.'?'.$this->config->token($resized_filename);
}

 

2. В файл api/Image.php добавить свой параметр везде по аналогии с $set_watermark.

 

Вот Image.php со всеми изменениями:

https://cl.ly/56a42c69cdad/Image.php

 

 

3. Там же в функцию image_constrain_imagick (если используете imagick) добавить логику обрезки (тут под квадрат):

if($aspect)
    list($dst_w, $dst_h) = $this->calc_contrain_size($src_w, $src_h, $max_w, $max_h);
elseif($src_w >= $src_h) 
{
    $thumb->cropImage($src_h, $src_h, (($src_w/2)-($src_h/2)), 0);
    list($dst_w, $dst_h) = $this->calc_contrain_size($src_h, $src_h, $max_w, $max_h);
}
elseif($src_w < $src_h) 
{
    $thumb->cropImage($src_w, $src_w, 0, (($src_h/2)-($src_w/2)));
    list($dst_w, $dst_h) = $this->calc_contrain_size($src_w, $src_w, $max_w, $max_h);
}

 

Собственно, всё. Если в шаблоне стоит параметр — будет по умолчанию, если нет — резка. Если нужен ватермарк, то так:

<img src="{$image->filename|resize:0:750:r:w}">

 

Вам останется изменить только логику обрезки на ту, которая вам нужна.

 

Вся логика встроена в родной resize, для моих задач не было смысла выделять всё в отдельную функцию типа crop. На эталонность решения не претендую. Возможно, что уважаемые форумчане предложат более изящное решение.

Ещё не пробовал, но благодарю за решение.



P. S. Если не стоит вопрос поддержки устаревших браузеров, то вашу задачу можно решить парой стилей с помощью флекса.

Но как?



#43 question

question
  • Пользователь
  • 81 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 28.08.2018 - 13:40

Собственно, всё. Если в шаблоне стоит параметр — будет по умолчанию, если нет — резка.

То есть, все вхождения 

|resize:800:600

надо заменить на

|resize:800:600:r

А мне по коду показалось, что наоборот - где нет параметра, идёт ресайз, где есть - обрезка

Как это сделать? Полагаю, в п.3. заменить 

if($aspect)

на

if(!$aspect)

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


Изменено: question, 28.08.2018 - 13:44


#44 bananovsv

bananovsv
  • Пользователь
  • 114 сообщений

Опубликовано 28.08.2018 - 16:17

Ещё не пробовал, но благодарю за решение.



Но как?

 

Например, так:

<div class="image-wrap">
    <img src="">
</div>

<style>
.image-wrap {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 200px;
}

.image-wrap img {
    height: 100%:
}
</style>

 


Изменено: bananovsv, 28.08.2018 - 16:18


#45 bananovsv

bananovsv
  • Пользователь
  • 114 сообщений

Опубликовано 28.08.2018 - 16:20

Собственно, всё. Если в шаблоне стоит параметр — будет по умолчанию, если нет — резка.

То есть, все вхождения 

|resize:800:600

надо заменить на

|resize:800:600:r

А мне по коду показалось, что наоборот - где нет параметра, идёт ресайз, где есть - обрезка

Как это сделать? Полагаю, в п.3. заменить 

if($aspect)

на

if(!$aspect)

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

 

Да, просто меняете условие на обратное.

 

Мне просто было надо, чтобы везде был квадрат и только в редких случаях по умолчанию.



#46 question

question
  • Пользователь
  • 81 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 29.08.2018 - 11:19

Например, так:

<div class="image-wrap">
    <img src="">
</div>

<style>
.image-wrap {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 200px;
}

.image-wrap img {
    height: 100%:
}
</style>

 

Так ширина у всех элементов будет разной.



#47 bananovsv

bananovsv
  • Пользователь
  • 114 сообщений

Опубликовано 30.08.2018 - 21:10

Например, так:

<div class="image-wrap">
    <img src="">
</div>

<style>
.image-wrap {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 200px;
}

.image-wrap img {
    height: 100%:
}
</style>

 

Так ширина у всех элементов будет разной.

 

В чем противоречие? Пусть будет разной. Эти стили выравнивают картинку любой ширины по центру блока.



#48 question

question
  • Пользователь
  • 81 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 09.09.2018 - 09:50

В чем противоречие? Пусть будет разной. Эти стили выравнивают картинку любой ширины по центру блока.

Непонятно, что вообще вы хотели сказать и как предлагаете эти стили использовать.

Накидал в ваш пример кучу первых попавшихся фотографий - получил адский трэш.



#49 DaVinci

DaVinci
  • Фрилансер
  • 1 137 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 23.09.2018 - 19:08


стоит отказаться от функции через смерти с дикими наборами магических переменных |resize:0:750:r:w в пользу объекта с соответствующими методами 

 

$image->getResize($w, $h, ...)

$image->getCrop($w, $h, ...)

 

к этим методам можно подключить любые обработчики изображения а методы в макете больше не будут зависеть от внутренней реализации и от шаблонизатора в частности. так как нарезка нужна не только в макете, к примеру в выгрузке где нам с какого то перепуга для того что бы нарезать изображение надо обращаться к api Design $simpla->design->resize_modifier($p->image, 200, 200) - дичь!!!

 

 

Будет здорово, если поделитесь решением.

 

http://forum.simplac...space/?p=107941


Изменено: DaVinci, 23.09.2018 - 19:31


#50 question

question
  • Пользователь
  • 81 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 28.09.2018 - 14:01

Наткнулся на свойства css object-fit и object-position, решающие мою задачу.

https://html5book.ru...bject-position/







Также с меткой «ресайз, кадрирование»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых