S
S
Sacred1332020-06-12 11:11:45
1C-Bitrix
Sacred133, 2020-06-12 11:11:45

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

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

In order to leave comments, you need to log in

1 answer(s)
Z
Zarubaxa, 2020-08-07
@Zarubaxa

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question