How to display the image of the highload block element??

Question

1C-Bitrix

There is a product property "color" of which the type is "reference". In the product card, only the text of this property is displayed, but you need a picture + color
On the Internet, I found this code (divided into 3 parts), but I didn’t find where to insert it, I don’t understand Bitrix 1s
Code:
<?
foreach($arElement["OFFERS"] as $arOffer):
foreach($arOffer["DISPLAY_PROPERTIES"] as $pid=>$arProperty):
$color .= '\''.$arProperty["DISPLAY_VALUE"].' \',';
break;endforeach;
endforeach;
?>
Code:
<?
eval('$fofilter=array('.$color.');');
extract($fofilter);
?>
Code:
<
if (!CModule::IncludeModule('highloadblock')) //INCLUDING THE MODULE
continue;
$ID = 3; //HERE ID OF YOUR HL INFOBLOCK
$hldata = Bitrix\Highloadblock\HighloadBlockTable::getById($ID)->fetch();
$hlentity = Bitrix\Highloadblock\HighloadBlockTable::compileEntity($hldata);
$hlDataClass = $hldata['NAME'].'Table';
//CREATE A FILTER ARRAY, SPECIFY THE SELECTION LOGIC IN IT AND (mandatory, otherwise it will be OR and filter out only one color)
$arFilter = Array(
Array(
"LOGIC"=>"AND",
Array(
"UF_NAME"=> $fofilter / /OUR ARRAY WITH FLOWERS
)
)
);
$result = $hlDataClass::getList(array(
'select' => array('UF_FILE','UF_NAME'), //WE ONLY NEED THE TITLE AND PICTURE
'order' => array('UF_NAME' =>'ASC' ),
'filter' => $arFilter //APPLY THE FILTER CREATED ABOVE
));
while($res = $result->fetch())
{
$img_path = CFile::GetPath($res["UF_FILE"]); //GET LET TO IMAGE
echo '< img src="'.$img_path.'"/>'; // OUTPUT THE PICTURE
}
?>