Перейти к содержанию
Официальный форум поддержки Simpla

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

Таких товарищей и таких случаев тут полно.

 

Например, в теме

http://forum.simplacms.ru/topic/10960-%D0%B3%D0%B4%D0%B5-%D1%85%D1%80%D0%B0%D0%BD%D1%8F%D1%82%D1%81%D1%8F-%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D1%8B-%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B9/

один товарищ

1. Сначала написал "Напомните мне завтра, распишу решение", после чего напоминание поступило с утра.

2. Ближе к вечеру он ответил "Извините сегодня никак не успеваю, постараюсь в субботу".

3. С тех прошла и суббота и еще пару лет, решения не видано...

4. Но тот товарищ в стиле хорошего клоуна сделал приписку "ведь я не обещал расписать решение именно на форуме". Возможно, намекает, что он решение давно расписал на бумажке и повесил у себя в каком-нибудь отдельном помещении.

5. Балабол и есть балабол:

http://forum.simplacms.ru/topic/2926-помощь-по-установке-simpla-на-локальный-сервер/?p=106785

 

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

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

Надо подходить к вопросу реально - они Вам ничего не должны, это общедоступный форум, каждый может писать то, что сочтет нужным...

Вот именно: что считаю нужным, то и пишу. Хочу - называю людей своими именами, пусть это грубо, но правда.

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

Там готовая сборка, хотелось бы для своей версии сделать.

ТС, у вас что-то получилось?

 

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

 

Работает так:

<img src="{$image->filename|resize:0:750:r}"> — по умолчанию.

<img src="{$image->filename|resize:0:750}"> — режет под квадрат.

 

У меня логика обратная, поскольку почти всегда надо под квадрат и только в редких случаях по умолчанию. Поэтому параметр ставлю именно для логики по умолчанию. Но вы можете сделать и наоборот, если резка под квадрат для вас исключение.

Изменено пользователем bananovsv
Ссылка на сообщение
Поделиться на другие сайты

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

 

Работает так:

<img src="{$image->filename|resize:0:750:r}"> — по умолчанию.

<img src="{$image->filename|resize:0:750}"> — режет под квадрат.

 

У меня логика обратная, поскольку почти всегда надо под квадрат и только в редких случаях по умолчанию. Поэтому параметр ставлю именно для логики по умолчанию. Но вы можете сделать и наоборот, если резка под квадрат для вас исключение.

Можете поделиться решением?

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

Можете поделиться решением?

 

Скажите, какая конкретно логика вам нужна, я попробую выделить. У меня там много кастомного кода, не относящегося к этому.

 

Вам нужно всегда резать под квадрат или только иногда?

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

Скажите, какая конкретно логика вам нужна, я попробую выделить. У меня там много кастомного кода, не относящегося к этому.

 

Вам нужно всегда резать под квадрат или только иногда?

 

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

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

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

 

Белый не добавляет. Делает квадрат по меньшей стороне и режет в центре.

rbrt.jpg

 

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

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

Скажите, какая конкретно логика вам нужна, я попробую выделить. У меня там много кастомного кода, не относящегося к этому.

 

Вам нужно всегда резать под квадрат или только иногда?

Лучше расскажу подробно.

На сайте куча картинок товаров с размерами 786х800, 743х412, 800х600, 1024х500, 1024х2048 и т.д..., плюс адаптивная вёрстка,И все эти картинки надо выводить в шаблоне с одинаковым соотношением сторон, а не просто менять размер.

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

Да, я знаю, что это можно решить в шаблоне через div style="background:...", но отношение поисковиков в этом случае, как показала практика, не очень хорошее - им подавай картинки именно через тег <img src=>.

Собственно, всё. Мне нужен кроп картинок и, если используется параметр, то обрезка.

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

Лучше расскажу подробно.

На сайте куча картинок товаров с размерами 786х800, 743х412, 800х600, 1024х500, 1024х2048 и т.д..., плюс адаптивная вёрстка,И все эти картинки надо выводить в шаблоне с одинаковым соотношением сторон, а не просто менять размер.

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

Да, я знаю, что это можно решить в шаблоне через div style="background:...", но отношение поисковиков в этом случае, как показала практика, не очень хорошее - им подавай картинки именно через тег <img src=>.

Собственно, всё. Мне нужен кроп картинок и, если используется параметр, то обрезка.

На гитхабе много готовых библиотек. Достаточно подключить к своему проекту, работы на 5 минут

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

Белый не добавляет. Делает квадрат по меньшей стороне и режет в центре.

rbrt.jpg

 

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

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

Лучше расскажу подробно.

На сайте куча картинок товаров с размерами 786х800, 743х412, 800х600, 1024х500, 1024х2048 и т.д..., плюс адаптивная вёрстка,И все эти картинки надо выводить в шаблоне с одинаковым соотношением сторон, а не просто менять размер.

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

Да, я знаю, что это можно решить в шаблоне через div style="background:...", но отношение поисковиков в этом случае, как показала практика, не очень хорошее - им подавай картинки именно через тег <img src=>.

Собственно, всё. Мне нужен кроп картинок и, если используется параметр, то обрезка.

 

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

 

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. Если не стоит вопрос поддержки устаревших браузеров, то вашу задачу можно решить парой стилей с помощью флекса.

Изменено пользователем bananovsv
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

 

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

Изменено пользователем DaVinci
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

 

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

 

Да, стоит.

Но если уж говорить об изображениях, то там стоит сделать еще много чего - например, нарезку изображений не только для товаров, но и для прочих сущностей. К слову, в OKAY это давно сделано - не идеально, но сделано...

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

Да, стоит.

Но если уж говорить об изображениях, то там стоит сделать еще много чего - например, нарезку изображений не только для товаров, но и для прочих сущностей. К слову, в OKAY это давно сделано - не идеально, но сделано...

 

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

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

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

 

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

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

 

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

 

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

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

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

 

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. Если не стоит вопрос поддержки устаревших браузеров, то вашу задачу можно решить парой стилей с помощью флекса.

Но как?

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

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

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

|resize:800:600

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

|resize:800:600:r

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

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

if($aspect)

на

if(!$aspect)

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

Изменено пользователем question
Ссылка на сообщение
Поделиться на другие сайты

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

 

Но как?

 

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

<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
Ссылка на сообщение
Поделиться на другие сайты

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

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

|resize:800:600

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

|resize:800:600:r

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

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

if($aspect)

на

if(!$aspect)

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

 

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

 

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

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

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

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

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

 

стоит отказаться от функции через смерти с дикими наборами магических переменных |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.simplacms.ru/topic/13643-simpla-namespace/?p=107941

Изменено пользователем DaVinci
Ссылка на сообщение
Поделиться на другие сайты

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

https://html5book.ru/svoystva-object-fit-i-object-position/

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

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...