Обработка изображений внутри DetailText

Описание механизма автоматической обработки всех изображений внутри DetailText элемента инфоблока, путем прогона всех изображений через собственную функцию

Поступила тут одна "хотелка" от клиента. спешу поделиться ее решением:) 

Итак: есть сайт, на котором публикуется (точнее пока что планируется к публикации) огромное количество статей. В этих статьях по тексту контент-менеджеры могут накидывать какие-то изображения, поясняющие текст. НО! заниматься подгонкой изображений к читабельному виду для такого количества статей им то ли лень, то ли денег жалко ... и захотел клиент, чтобы все-таки изображения ужимались. причем, ужимались сервером, а не браузером клиента. 

И вот родилась идея: 

В компоненте детального вывода статьи в файле result_modifier создаю обработчик: 

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$pattern="/<img[^>]+src=(\"|')(.+?)(\"|')[^>]*>/si";
preg_match_all($pattern,$arResult["DETAIL_TEXT"],$matches);
$startfloat="right";
$arResult["DETAIL_TEXT"]=str_replace(SITE_SERVER_NAME,"",$arResult["DETAIL_TEXT"]);
$arResult["DETAIL_TEXT"]=str_replace(str_replace("http://","http://www.",SITE_SERVER_NAME),"",$arResult["DETAIL_TEXT"]);
foreach ($matches[0] as $k=>$image) {
$imgSrc='<а class="fancy" href="'.$matches[2][$k].'">';
        $imgSrc.=CFile::ShowImage($matches[2][$k], 300, 300, "style='float:".$startfloat.";margin:5px;'", "", false);
        $imgSrc.="
    </а>";
$arResult["DETAIL_TEXT"]=str_replace($image,$imgSrc,$arResult["DETAIL_TEXT"]);
if($startfloat=="right") $startfloat="left"; else $startfloat="right";
} 

в итоге, все изображения ужимаются в 300 на 300, а если кто хочет - в fancybox (если конечно к вашему сайту подключена данная библиотека) может посмотреть в полном размере... 

P.S. Спасибо другу моему, Андрею - великому гуру веб-мира, за постоянную помощь с регулярными выражениями (да и не только), с которыми я все никак не подружусь:( 

ДОБАВЛЕНИЕ ОТ 22.03: оставляем у изображений title и alt.

Текст файла result_modifier немного видоизменился: 

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$patternSRC="/[^>]+src=(\"|')(.+?)(\"|')[^>]*>/si";
$pattern2="/(alt|src|title)=(\"|')(.+?)(\"|')/si";
$pattern="/<img([^>]*)\/?>/si";
preg_match_all($pattern,$arResult["DETAIL_TEXT"],$matches);
$modifiedImages=array();
foreach($matches[1] as $k=>$image){
    preg_match_all($pattern2,$image,$Attrmatches);
    $attributes=array();
    foreach($Attrmatches[1] as $kT=>$Tmp){
     $attributes[$Tmp]=$Attrmatches[3][$kT];
    }
    $modifiedImages[$matches[0][$k]]=$attributes;
}
$startfloat="right";
$arResult["DETAIL_TEXT"]=str_replace(SITE_SERVER_NAME,"",$arResult["DETAIL_TEXT"]);
$arResult["DETAIL_TEXT"]=str_replace(str_replace("http://","http://www.",SITE_SERVER_NAME),"",$arResult["DETAIL_TEXT"]);
foreach ($modifiedImages as $image=>$attributes) {
    $imgSrc='<a class="fancy" href="'.$attributes[" src"].'" title="'.$attributes["title"].'" >';
    $imgSrc.=CFile::ShowImage($attributes["src"], 300, 300, "alt='".$attributes["alt"]."' title='".$attributes["title"]."'  style='float:".$startfloat.";margin: 5px;'", "", false);
    $imgSrc.="</a>";
    $arResult["DETAIL_TEXT"]=str_replace($image,$imgSrc,$arResult["DETAIL_TEXT"]);
    if($startfloat=="right") $startfloat="left"; else $startfloat="right";
}

Первым шагом выбираем все изображения из текста. А затем уже получаем все атрибуты для конкретного изображения и данные по изображению помещаем в массив.

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

ДОБАВЛЕНИЕ ОТ 05.11.2017: подменяем у изображений title и alt.

В очередной доработке интернет-магазина под требования сео-оптимизации, поступила задача замены ALT-ов у изображений в новостях - ALT должен совпадать с названием товара. Все бы ничего, если бы изображения не были вставлены напрямую в текст новости. Для решения данной задачи написал небольшую подмену (заодно оставил и другие параметры изображения):

$patternSRC="/[^>]+src=(\"|')(.+?)(\"|')[^>]*>/si";
$pattern2="/(alt|src|title|width|height|align)=(\"|')(.+?)(\"|')/si";
$pattern="/<img([^>]*)\/?>/si";
preg_match_all($pattern,$arResult["DETAIL_TEXT"],$matches);
$modifiedImages=array();
foreach($matches[1] as $k=>$image){
	preg_match_all($pattern2,$image,$Attrmatches);
	$attributes=array();
	foreach($Attrmatches[1] as $kT=>$Tmp){
		$attributes[$Tmp]=$Attrmatches[3][$kT];
	}
	$modifiedImages[$matches[0][$k]]=$attributes;
}

foreach ($modifiedImages as $image=>$attributes) {
	$img = '<img alt="'.$arResult['NAME'].'" src="'.$attributes['src'].'" title="'.$arResult['NAME'].'"' ;
	if(isset($attributes['width']) && floatval($attributes['width'])>0){
		$img .= ' width="'.$attributes['width'].'"';
	}
	if(isset($attributes['height']) && floatval($attributes['height'])>0){
		$img .= ' height="'.$attributes['height'].'"';
	}
	if(isset($attributes['align']) && strlen($attributes['align'])>0){
		$img .= ' align="'.$attributes['align'].'"';
	}
	$img .= '>';
	$arResult["DETAIL_TEXT"]=str_replace($image,$img,$arResult["DETAIL_TEXT"]);
}
Количество показов: 3139
22.03.2013

Возврат к списку

Если вам была полезна статья можете отблагодарить автора:
Ethereum:

0x16Df809287333C49D3A237296C6248A6c08702Bc

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

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