1С-Битрикс. Добавляем коллекцию из медиабиблиотеки в текст новости
В одном из проектов возникла необходимость сделать возможность добавления галереи в текст новости. Поскольку контент наполняют не программисты — пришлось сделать это максимально просто.
Фотографии для статьи будут загружаться в медиабиблиотеку. Для каждой статьи — отдельная коллекция с уникальным именем (почему объясню ниже). А добавляться они будут в текст с помощью тега #название коллекции#.
Во-первых для выборки фотографий из коллекции напишем компонент. Вот основные моменты в его коде:
component.php
<? // подключаем медиабиблиотеку CModule::IncludeModule("fileman"); CMedialib::Init(); //выбираем коллекцию по имени - имя коллекции будет предаваться компоненту как параметр $arResult['COLLECTIONS'] = CMedialibCollection::GetList(array('arFilter' => array('ACTIVE' => 'Y', 'ML_TYPE' => 1, 'NAME' => $arParams['NAME']))); $arCollections = array(); // на момент написания статьи фильтрация выборки в CMedialibCollection::GetList() весьма ограничена и // фильтр в CMedialibCollection не срабатывает по точному совпадению имени ('=NAME' => $arParams['NAME']), // но все же ищет элементы с именем содержащим подстроку $arParams['NAME'] (%строка% в MYSQL). // Поэтому, чтобы получить точное совпадение по имени, приходится исключать из первичной выборки элементы просто содержащие подстроку $arParams['NAME'] перебирая элементы foreach($arResult['COLLECTIONS'] as $key=>$val){ if($val['NAME'] != $arParams['NAME']){ unset($arResult['COLLECTIONS'][$key]); }else{ $arCollections[] = $val['ID']; } } // далее, если мы нашли нужную коллекцию, выбираем из нее изображения if(count($arCollections)){ $arResult['ITEMS'] = CMedialibItem::GetList(array('arCollections'=>$arCollections)); // и, если необходимо, изменяем их размер if(count($arResult['ITEMS']) && ($arParams["WIDTH"] && $arParams["HEIGHT"])){ foreach($arResult['ITEMS'] as &$val){ $img = CFile::ResizeImageGet($val['SOURCE_ID'], array('width'=>$arParams["WIDTH"], 'height'=>$arParams["HEIGHT"]), BX_RESIZE_IMAGE_PROPORTIONAL, false); $val['RESIZED'] = $img['src']; } } } ?>
Шаблон вывода template.php
<?if(!count($arResult['ITEMS'])) return false;?> <div class="look_slider"> <div class="controls"> <p> <a href= "" class="slide_bwd"></a> <span>1 из <?=count($arResult['ITEMS'])?></span> <a href= "" class="slide_fwd"></a> </p> </div> <ul> <?foreach($arResult['ITEMS'] as $val){?> <li> <div> <img src="<?if($val['RESIZED']) echo $val['RESIZED']; else echo $val['PATH'];?>" alt="<?=$val['DESCRIPTION']?>"/> <?if($val['DESCRIPTION']){?><p><?=$val['DESCRIPTION'];?></p><?}?> </div> </li> <?}?> </ul> </div>
Рядом с шаблоном script.js — скрипт простой листалки
$(function(){ if(!window.look_slider_init){ var photo_slider=$('.look_slider'); photo_slider.each(function(){ var cont=$(this); cont.find('li:eq(0)').addClass('active').siblings().hide(); var size=cont.find('li').length; var bwd=cont.find('.slide_bwd'); var fwd=cont.find('.slide_fwd'); var state=cont.find('.controls span'); state.text('1 из '+size); fwd.click(function(){ var a=cont.find('.active').index(); if(a<size-1){ cont.find('li:eq('+(a+1)+')').addClass('active').show().siblings().removeClass('active').hide(); state.text((a+2)+' из '+size); } return false; }) bwd.click(function(){ var a=cont.find('.active').index(); if(a>0){ cont.find('li:eq('+(a-1)+')').addClass('active').show().siblings().removeClass('active').hide(); state.text(a+' из '+size); } return false; }); }); window.look_slider_init = true; } });
и файл стиля style.css
.look_slider li{list-style-type:none;margin:0;padding:0 !important;margin:0 !important} .look_slider .look_slider ul{margin:0 0 25px 0 !important;padding:0 !important} .look_slider .look_slider li p{text-align:center;font:normal 11px/16px 'trebuchet ms';} .look_slider .look_slider ul div{padding:10px 0 0 0;width:700px;} .look_slider .controls .slide_bwd{display:inline-block;width:23px;height:23px;background:url(images/ar_left.gif) no-repeat left top;vertical-align:middle} .look_slider .controls .slide_fwd{display:inline-block;width:23px;height:23px;background:url(images/ar_right.gif) no-repeat left top;;vertical-align:middle} .look_slider .controls .slide_bwd:hover, .controls .slide_fwd:hover{background-position:left bottom} .look_slider .controls{line-height:23px !important;text-align:center;width:700px;} .look_slider .controls span{text-align:center;display:inline-block;height:23px;;vertical-align:middle;font:normal 12px/23px 'trebuchet ms';color:#000;padding:0 5px 0 5px;}
Теперь дописать компонент выводящий детальную новость
result_modifier.php добавляем строку
<?$this->__component->SetResultCacheKeys(array("CACHED_TPL"));?>
template.php обрамляем код шаблона строками
<?ob_start();?> ... Код шаблона ... <? $this->__component->arResult["CACHED_TPL"] = @ob_get_contents(); ob_get_clean(); ?>
component_epilog.php
<? echo preg_replace_callback( "/#([^#]+)#/is".BX_UTF_PCRE_MODIFIER, create_function('$matches', 'ob_start(); $GLOBALS["APPLICATION"]->IncludeComponent( "farrock:gallery", "", Array( "NAME" => trim($matches[1]), "WIDTH" => "700", "HEIGHT" => "450", "CACHE_TYPE" => "A", "CACHE_TIME" => "3600" ) ); $retrunStr = @ob_get_contents(); ob_get_clean(); return $retrunStr;'), $arResult["CACHED_TPL"]); ?>
Далее создаем коллекцию и добавляем в текст новости строку #Название коллекции#. Наслаждаемся результатом.
Оставить комментарий
Комментарии (7)