Resize images from .js in Bitrix, how to fasten resize?

Question

1C-Bitrix

Hey!

In the standard template, in the catalog-item, images in the preview of offers are loaded from the additional field more_photo.

In the component template, the image output code

<span class="product-item-image-original" id="<?=$itemIds['PICT']?>" style="background-image: url('	<?
$renderImage = CFile::ResizeImageGet($item['PREVIEW_PICTURE']['ID'], Array("width" => 65, "height" => 57), BX_RESIZE_IMAGE_EXACT, false);  echo ''.$renderImage["src"].'';
?>'); <?=($showSlider ? 'display: none;' : '')?>"></span>

However, the template script (catalog-item/script.js) replaces the images with the one that the script loads.
Part of the code in JS that displays images in

BX.adjust(this.obPict, {style: {backgroundImage: 'url(\'' + this.offers[index].PREVIEW_PICTURE.SRC + '\')'}});

If the template (template.php) removes the id from the span tag with class="product-item-image-original", then the resized image is loaded (that is, the resizing code written in the template works).

So the question is how to correctly write the resize rules in the script? In this line:

BX.adjust(this.obPict, {style: {backgroundImage: 'url(\'' + this.offers[index].PREVIEW_PICTURE.SRC + '\')'}});

Answer 1

good afternoon, by trial and error I found what this line adds, but I still don’t understand how to add a resize here

this.obPictSlider.appendChild(
                BX.create('SPAN', {
                  props: {className: 'product-item-image-slide item' + (i == 0 ? ' active' : '')},
                  style: {backgroundImage: 'url(\'' + this.offers[index].MORE_PHOTO[i].SRC + '\')'}
                })
              );

So I used this option
, the resize of the slider did not work for me, since the pictures were loaded by the script by id, in the end I found a way to pick up the event of adding / editing infoblock elements

AddEventHandler("iblock", "OnAfterIBlockElementAdd", "resizePropertyFilePhoto");
AddEventHandler("iblock", "OnAfterIBlockElementUpdate", "resizePropertyFilePhoto");

function resizePropertyFilePhoto($arFields){
    global $APPLICATION;
    CModule::IncludeModule('iblock');



    switch ($arFields["IBLOCK_ID"]){
        case 15:
            $IBLOCK_ID = 15;
            $PROPERTY_CODE = "ATTR_FOTOMORE";
            $MaxWidth = 1920;
            $MaxHeight = 1080;
            break;

        case 18:
            $IBLOCK_ID = 18;
            $PROPERTY_CODE = "ATTR_FILES";
            $MaxWidth = 1920;
            $MaxHeight = 1080;
            break;
        default:
            $IBLOCK_ID = 0;
    }



    if($IBLOCK_ID !== 0) {
        $new_files  = array();
        $old_files = array();

        $res = CIBlockElement::GetProperty($arFields["IBLOCK_ID"], $arFields["ID"], "sort", "asc", array("CODE" => $PROPERTY_CODE));
        while ($ob = $res->GetNext()) {
            $file_path = CFile::GetPath($ob['VALUE']);

            if($file_path) {
                $file_size = getimagesize($_SERVER["DOCUMENT_ROOT"].$file_path);

                if (($file_size[0] > $MaxWidth) || ($file_size[1] > $MaxHeight)) {
                    $file = CFile::ResizeImageGet($ob['VALUE'], array(
                        'width'=>$MaxWidth,
                        'height'=>$MaxHeight
                    ), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true);

                    $new_files[] = array(
                        "VALUE" => CFile::MakeFileArray($_SERVER["DOCUMENT_ROOT"].$file["src"]),
                        "DESCRIPTION" => $ob['DESCRIPTION']);
                } else {

                    $new_files[] = array(
                        "VALUE" => CFile::MakeFileArray($_SERVER["DOCUMENT_ROOT"].$file_path),
                        "DESCRIPTION" => $ob['DESCRIPTION']);
                }

                $old_files[] = $ob['VALUE'];
            }
        }

        if(count($new_files) > 0) {
            $PROPERTY_VALUE = $new_files;
            CIBlockElement::SetPropertyValuesEx($arFields["ID"], $arFields["IBLOCK_ID"], array($PROPERTY_CODE => $PROPERTY_VALUE));

            foreach ($old_files as $key=>$val) {
                CFile::Delete($val);
            }
        }
        unset($new_files);
        unset($old_files);
    }
}

I took the solution from here - here
but I had to reload the pictures of the goods
, maybe it will help you