Как можно упростить код?

Question

[mit5x]

Для формирования картинок нужного размера, под нужные мне размеры экранов, я использую на сайте два вот таких куска кода.

Раз:

<?if(!empty($arItem["PREVIEW_PICTURE"])){
$file_w400 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>400, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w600 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>600, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w800 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>800, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w900 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>900, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1000 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1000, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1200 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1200, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1400 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1400, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1500 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1500, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1600 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1600, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w1800 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>1800, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w2200 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>2200, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w2100 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>2100, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w2400 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>2400, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w2600 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>2600, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
$file_w3000 = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>3000, 'height'=>10000), BX_RESIZE_IMAGE_PROPORTIONAL, true);  
?>

Два:

<picture>
<source srcset="
<?=$file_w600["src"]?> 1x,
<?=$file_w900["src"]?> 1.5x,
<?=$file_w1200["src"]?> 2x,
<?=$file_w1500["src"]?> 2.5x,
<?=$file_w1800["src"]?> 3x,
<?=$file_w2100["src"]?> 3.5x,
<?=$file_w2400["src"]?> 4x"
media="(max-width: 767px)
">
<img src="" srcset="">
</picture>

Выглядит не оптимально и очень не удобно.

Можно как-то иначе описать первый кусок, функцией?

А во втором куске, передавать этой функции нужные мне аргументы, например:

<picture>
<source srcset="
<?=makePreview (arItem["PREVIEW_PICTURE"], 600, 10000,)?> 1x,
<?=makePreview (arItem["PREVIEW_PICTURE"], 800, 10000,)?> 1.5x,
...

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

Comments

[Дмитрий]

Цикл явно тут просится

[iljaGolubev]

чёт я не понял проблемы...

function makePreview(mixed $file. int $width){
    return CFile::ResizeImageGet($file, ['width'=>$width, 'height'=>10000], BX_RESIZE_IMAGE_PROPORTIONAL, true); 
}
//..... a few lines later

$sizes=[600,900,1200];
foreach($sizes as $i=>$width){
    makePreview (arItem["PREVIEW_PICTURE"], $width);
}

[Adamos]

А скальпель для пересадки рук тут точно не просится?
Тут же при каждом запросе к тому, что возвращает страницу с этой картинкой, заново генерируется 15 ее вариантов...

[Сергей Соколов]

Adamos, похоже, оно кэширует

[Евгений]

Вот не лень было человеку этот код писать, чтобы потом спросить как упростить? А где, простите, азарт? Решить эту задачу чисто удовлетворить собственное эго? Решение то тут элементарное, написать класс, обёртку наследующую CFile, без конструктора, обычный статик, который на выходе будет генерить строку , и можно даже это положить в кэш при желании, использовать например стандартный тегированный битрикс кэш.

[rPman]

У меня вопрос, а зачем делать resize под разные экраны, если тот же самый resize делает само устройство?

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

p.s. экономия сетевого трафика?

[mit5x]

Adamos, нет, они генерятся только первый раз и кэшируюстя в отдельную папку.

[mit5x]

rPman, ну типа того. Плюс что бы Google PageSpeed Insights не жаловался на избыточно большие размеры изображений.
Что бы картинка была качественная и не мутная на экране последнего iphone, нужно отдать её шириной 1200px,
а самому простому xiomi достаточно 450px

[Adamos]

mit5x, ну да, это же Битрикс. За каждым решением - история о том, как было сделано через задницу, а потом подперто костылями, но так, чтобы с виду о них никто не догадался.

Кстати, объяснение не объясняет, зачем одновременно делать картинки размером 2100 и 2200. Трех-четырех размеров - за глаза. Только место на хостинге сжирается всем этим разнообразием (а потом - никогда не освобождается, не так ли?..)

Answer 1

[mit5x]

Всем спасибо.
В итоге сделал вот так:

<?php
if (!empty($arItem["PREVIEW_PICTURE"])) {
    $widths = [400, 600, 800, 900, 1000, 1200, 1400, 1500, 1600, 1800, 2100, 2200, 2400, 2600, 3000];
    $resizedImages = [];  // Массив для хранения всех изображений

    foreach ($widths as $width) {
        $resizedImage = CFile::ResizeImageGet(
            $arItem["PREVIEW_PICTURE"],
            ['width' => $width, 'height' => 10000],
            BX_RESIZE_IMAGE_PROPORTIONAL,
            true
        );

        // Сохраняем результат в массиве
        $resizedImages[$width] = $resizedImage;

        // Создаём переменную динамически
        ${"file_w{$width}"} = $resizedImage;  // Создание переменной file_w400, file_w600 и т.д.
    }
}

// Теперь вы можете получить доступ к каждому из изображений с помощью динамически созданных переменных
echo '<img src="' . $file_w600["src"] . '" alt="Image 600px">';
echo '<img src="' . $file_w900["src"] . '" alt="Image 900px">';
echo '<img src="' . $file_w1200["src"] . '" alt="Image 1200px">';
// Добавьте вывод других изображений по мере необходимости
?>

Comments

[Алексей Уколов]

${"file_w{$width}"}

Зачем этот ужас, если вы строчкой выше положили значение в массив?

Answer 2

[rusyska55011]

Сложи переменные и значения 'width' в массив и проходись по нему циклом, вставляя эти значения в вызываемый метод