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

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

679
22.03.2013

Описание механизма автоматической обработки всех изображений внутри 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"]);
}

Источник: http://dev.1c-bitrix.ru/community/webdev/user/60622/blog/7049/


Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

Добавить комментарий

captcha

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