Дополнительные картинки в новостях Битрикс, почти фотогалерея.

Просмотров: 35364 | Комментариев: 92

По интернету ходит вполне подробная инструкция по добавлению и выводу дополнительных изображений в новостях- ею и воспользуемся :

Для вывода дополнительных изображений в элементах информационного блока (т.е. изображений кроме PREVIEW_PICTURE и DETAIL_PICTURE) необходимо создать дополнительное свойство типа ФАЙЛ с кодом MORE_PHOTO.

Дополнительные картинки в новостях Битрикс

Детальное редактирование.

Дополнительные картинки в новостях Битрикс

Нужно в шаблоне news.detail добавить в файл result_modifier.php следующий код:

<? 
 $arResult["MORE_PHOTO"] = array(); 
 if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
 { 
 foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
 { 
 $FILE = CFile::GetFileArray($FILE); 
 if(is_array($FILE)) 
 $arResult["MORE_PHOTO"][]=$FILE; 
 } 
 } 
 ?>

тем самым мы сможем обращаться к массиву фотографий также, как это происходит в шаблоне каталога: $arResult["MORE_PHOTO"].

Далее копируем код из шаблона каталога для вывода изображений в шаблон новостей news.detail:

<?
// additional photos
$LINE_ELEMENT_COUNT = 2; // number of elements in a row
if(count($arResult["MORE_PHOTO"])>0):?>
<a name="more_photo"></a>
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
<img border="0" src="<?=$PHOTO["SRC"]?>" width="<?=$PHOTO["WIDTH"]?>" height="<?=$PHOTO["HEIGHT"]?>"
alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /><br />
<?endforeach?>
<?endif?>  

После этого подгруженные изображения будут отображаться при выводе новостей. Правда таким образом выводить изображения навтрятли кто станет, ведь они выводятся в реальном размере и могут сильно попортить дизайн сайта. Чтобы этого не происходило применяют следующую функцию.

CFile::ResizeImageGet

Вот что говорится в официальной документации: Функция уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове функция вернет путь к уменьшенному файлу.

Таким образом нам достаточно немного подправить код:

<?
// additional photos
$LINE_ELEMENT_COUNT = 2; // number of elements in a row
if(count($arResult["MORE_PHOTO"])>0):?>
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>150, 'height'=>'112'), BX_RESIZE_IMAGE_EXACT, true); ?>
<div class="more_photo">
<a href="<?=$PHOTO["SRC"]?>" name="more_photo">
<img border="0" src="<?=$file["src"]?>" width="<?=$file["width"]?>" height="<?=$file["height"]?>"
alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" />
</a>
</div>
<?endforeach?>
<?endif?>  

И мы получаем список превьюшек с ссылками на оригиналы. В итоге при добавлении новости просто выбираем изображения при добавлении статьи или новости:

Дополнительные картинки в новостях Битрикс

Прикручиваем красотулечку

Итак, мы вывели превьюшки в новость, сделали их ссылками на полное изображение. Давайте теперь прикрутим к этому fancybox

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

Добавляем в news.detail:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/

$("a#example1").fancybox();

$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});

$("a#example5").fancybox();

$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});

$("a#example7").fancybox({
'titlePosition' : 'inside'
});

$("a#example8").fancybox({
'titlePosition' : 'over'
});

$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox();

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>

И в строчке

 <a href="<?=$PHOTO["SRC"]?>" name="more_photo">

Дописываем

 <a rel="example_group" href="<?=$PHOTO["SRC"]?>" name="more_photo"   title="<?=(strlen($arResult["DETAIL_PICTURE"]["DESCRIPTION"]) > 0 ? $arResult["DETAIL_PICTURE"]["DESCRIPTION"] : $arResult["NAME"])?>">

Видео по записке. Наглядно:


Михаил
Не забудте указать свойство MORE_PHOTO для вывода в детальной новости. Это делается в настройках компонента через публичную часть сайта:
Зашел по ссылке с примером, фотографии открываются в новом окне  :(
Михаил
Цитата
Timur пишет:
Зашел по ссылке с примером, фотографии открываются в новом окне
Да, там владелец сайта что-то поломал, сайт не поддерживаю потому не знаю что. Можете вот тут посмотреть http://moto-hit.ru/252/8148/
Как с помощью функции CFILE::RESIZEIMAGEGET сделать вывод картинки превью и картинки полной новости ?
Михаил
Цитата
Дмитрий Рунов пишет:
Как с помощью функции CFILE::RESIZEIMAGEGET сделать вывод картинки превью и картинки полной новости ?
Плохо представляю при каких условиях это может понадобиться, но попробуйте вместо t["PROPERTIES"]["MORE_PHOTO"]["VALUE"] указать ['DETAIL_PICTURE']['SRC'] - допускаю что не сработает, если однажды с чем-то таким столкнусь, допишу в записку. Но копать примерно в эту сторону
Добрый  день,  не могу найти файл  result_modifier.php
Михаил
Цитата
Александр пишет:
Добрый день, не могу найти файл result_modifier.php
Если его нет-то нужно создать вручную
Почему мой вопрос удалили?
Михаил
Цитата
Александр пишет:
Почему мой вопрос удалили?
Удалил по причине плохой постановки вопроса. Данный метод рабочий, реализован и проверен мной на нескольких проектах. Видимо Вы где-то ошибаетесь в реализации. Подсказать я Вам не смогу, так как Вы не дали ни полного описания своей реализации ни более менее подробного описания задачи.
Цитата
Михаил Базаров пишет:
Цитата
Александр пишет:
Почему мой вопрос удалили?
Удалил по причине плохой постановки вопроса. Данный метод рабочий, реализован и проверен мной на нескольких проектах. Видимо Вы где-то ошибаетесь в реализации. Подсказать я Вам не смогу, так как Вы не дали ни полного описания своей реализации ни более менее подробного описания задачи.
Согласен, возможно я не правильно спросил, попробую еще,  у меня не получается вывести превьюшку на стр с детальной новостью, выводятся там только ссылки "загрузить", если пройти по нет то открывается на весь экран большое фото, в какую сторону копать?
Михаил
Цитата
Гость сайта пишет:
Дополнительные картинки в новостях Битрикс, почти фотогалерея.
Весь вот этот код:
Код
<? 
// additional photos 
$LINE_ELEMENT_COUNT = 2; // number of elements in a row 
if(count($arResult["MORE_PHOTO"])>0):?> 
<a name="more_photo"></a> 
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> 
   <img border="0" src="<?=$PHOTO["SRC"]?>"  />
<?endforeach?> 
<?endif?>  
 
как раз и отвечает за-то чтобы вместо загрузить выводилась картинка превью. Точнее они у вас вместе должны появиться. В итоге удаляете из шаблона news.detail кусочек который выводит "Загрузить" и оставляете только этот.

Рядом с template.php подробной новости создаете файл result_modifier.php с содержимым

Код
<? 
   $arResult["MORE_PHOTO"] = array(); 
   if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
      { 
      foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
         { 
            $FILE = CFile::GetFileArray($FILE); 
            if(is_array($FILE)) 
            $arResult["MORE_PHOTO"][]=$FILE; 
         } 
      } 
?>  
 
Само собой если он уже  есть- то просто добавляете это в него.

Вот и все, а фансибокс или что-то другое это уже по вкусу.
Цитата
Михаил Базаров пишет:
Цитата
Гость сайта пишет:
Дополнительные картинки в новостях Битрикс, почти фотогалерея.
Весь вот этот код:
Код
 <? 
// additional photos 
$LINE_ELEMENT_COUNT = 2; // number of elements in a row 
if(count($arResult["MORE_PHOTO"])>0):?> 
<a name="more_photo"></a> 
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> 
   <img border="0" src="<?=$PHOTO["SRC"]?>"  />
<?endforeach?> 
<?endif?>  
  
как раз и отвечает за-то чтобы вместо загрузить выводилась картинка превью. Точнее они у вас вместе должны появиться. В итоге удаляете из шаблона news.detail кусочек который выводит "Загрузить" и оставляете только этот.

Рядом с template.php подробной новости создаете файл result_modifier.php с содержимым
Код
 <? 
   $arResult["MORE_PHOTO"] = array(); 
   if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
      { 
      foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
         { 
            $FILE = CFile::GetFileArray($FILE); 
            if(is_array($FILE)) 
            $arResult["MORE_PHOTO"][]=$FILE; 
         } 
      } 
?>  
  
Само собой если он уже есть- то просто добавляете это в него.

Вот и все, а фансибокс или что-то другое это уже по вкусу.
Большое спасибо за ответ, не внимательно читал инструкцию, и огромное спасибо за ваши видео уроки)
Добавляем в news.detail:"код скрипта fancybox"Я правильно понимаю, этот код нужно добавить в файл  template.php?
Михаил
Код
Добавляем в news.detail:"код скрипта fancybox"Я правильно понимаю, этот код нужно добавить в файл template.php?
 
Да, прямо в верстку детальной новости. Не обязательно fancybox - у меня для примера, Более красиво получается hightslide- ом
Здравствуйте, спасибо за видеоуроки
У меня вот такой вопрос возник: мне необходимо вывести в списке новостей доп.свойство типа "файл", а точнее картинку (нужно для слайдера новостей), предложенный способ в Вашей статье для детальной новости не работает ( но в шаблоне детальной новости у меня работает). Не подскажете как можно это реализовать?
Михаил
Цитата
Павел пишет:
Здравствуйте, спасибо за видеоуроки
У меня вот такой вопрос возник: мне необходимо вывести в списке новостей доп.свойство типа "файл", а точнее картинку (нужно для слайдера новостей), предложенный способ в Вашей статье для детальной новости не работает ( но в шаблоне детальной новости у меня работает). Не подскажете как можно это реализовать?
Данная инструкция для того и нжна, все работает в ней- только что на одном сайте это проделал
то есть данная инструкция подойдёт и для шаблона списка новостей?
Михаил
Да, только вместо $arResult используйте $arItem
в Ваших кусках кода поменял $arResult на $arItem, но блин так  чуда и не произошло, свойство назвал также MORE_PHOTO, а картинки так и не появились
$arResult на $arItem нужно поменять и в файле шаблона, и в файле result_modifier.php ?
Михаил
Везде
Простите, но что-то не выходит
Можно ещё поспрашиваю: вот если по шагам, то взял к примеру шаблон списка новостей, в папке шаблона создал файл result_modifier.php с кодом:
Код
<? 
$arItem["MORE_PHOTO"] = array(); 
if(isset($arItem["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arItem["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
{ 
foreach($arItem["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
{ 
$FILE = CFile::GetFileArray($FILE); 
if(is_array($FILE)) 
$arItem["MORE_PHOTO"][]=$FILE; 
} 
} 
?>
 
в файл шаблона добавил код из статьи, приведу весь код шаблона:
Код
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="news-list">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
   <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
   <?
   $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
   $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
   ?>
    
   <div class="news-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
      
        <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
         <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
            <a href="<?=$arItem["DETAIL_PAGE_URL"]?>"><img class="preview_picture" border="0" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>"/></a>
         <?else:?>
            <img class="preview_picture" border="0" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" style="float:left" />
         <?endif;?>
      <?endif?>
        
      <?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
         <span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
      <?endif?>
        
      <?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
         <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
            <a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><b><?echo $arItem["NAME"]?></b></a><br />
         <?else:?>
            <b><?echo $arItem["NAME"]?></b><br />
         <?endif;?>
      <?endif;?>
        
      <?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
         <p><?echo $arItem["PREVIEW_TEXT"];?></p>
      <?endif;?>
        
      <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
         <div style="clear:both"></div>
      <?endif?>
        
<? 
// additional photos 
$LINE_ELEMENT_COUNT = 2; // number of elements in a row 
if(count($arItem["MORE_PHOTO"])>0):?> 
<?foreach($arItem["MORE_PHOTO"] as $PHOTO):?> 
<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>150, 'height'=>'112'), BX_RESIZE_IMAGE_EXACT, true); ?> 
<div class="more_photo"> 
<a href="<?=$PHOTO["SRC"]?>" name="more_photo"> 
<img border="0" src="<?=$file["src"]?>" width="<?=$file["width"]?>" height="<?=$file["height"]?>" 
alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" /> 
</a> 
</div> 
<?endforeach?> 
<?endif?>

      <?foreach($arItem["FIELDS"] as $code=>$value):?>
         <small>
         <?=GetMessage("IBLOCK_FIELD_".$code)?>:&nbsp;<?=$value;?>
         </small><br />
      <?endforeach;?>
        
      <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
         <small>
         <?=$arProperty["NAME"]?>:&nbsp;
         <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
            <?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
         <?else:?>
            <?=$arProperty["DISPLAY_VALUE"];?>
         <?endif?>
            
         </small><br />
      <?endforeach;?>
        
   </div>
<?endforeach;?>

<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
   <br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>
где может быть ошибка может подскажете?
Что сделать чтобы при загрузке на сервер картинок дополнительных они сжимались или обрезались (при загрузке).
Просто я загрузил картинки (хорошего качества), штук так 7-8 и новость не открывается её не возможно отредактировать.
Выскакивает ошибка Fatal error: Out of memory (allocated 109051904) (tried to allocate 13824 bytes)

Я думаю, что не хватает ресурсов хостинга. В php.ini мемори лимит стоял 64 метра, сейчас я поставил 128 - но не помогло.

Картинки большие.  
Михаил
Цитата
Дмитрий пишет:
Что сделать чтобы при загрузке на сервер картинок дополнительных они сжимались или обрезались (при загрузке).
...
Воспользуйтесь API функцией CFile::ResizeImage
Более подробно в документации http://dev.1c-bitrix.ru/api_help/main/reference/cfile/resizeimageget.php
Отлично работает. Стоило бы чуть внести правки в материал, например там где говорится о внесении изменений в result_modifer.php уточнить, что его может и не быть))

А так, ОЧЕНЬ СПАСИБО ВАМ!!!)))
Цитата
Михаил Базаров пишет:
Цитата
Timur пишет:
Зашел по ссылке с примером, фотографии открываются в новом окне
Да, там владелец сайта что-то поломал, сайт не поддерживаю потому не знаю что. Можете вот тут посмотреть http://moto-hit.ru/252/8148/
К сожалению здесь тоже уже не работает, так же как и на сайте врача. Видимо тут какая-нибудь ошибка. Не могли же два заказчика поломать на двух сайтах именно фенси бокс?
Михаил
Цитата
Денис пишет:
Цитата
Михаил Базаров пишет:
Да, там владелец сайта что-то поломал, сайт не поддерживаю потому не знаю что. Можете вот тут посмотреть http://moto-hit.ru/252/8148/
К сожалению здесь тоже уже не работает, так же как и на сайте врача. Видимо тут какая-нибудь ошибка. Не могли же два заказчика поломать на двух сайтах именно фенси бокс?
Что удивительно, как раз таки могут) Каждый заказчик пытается что-то поправить на сайте и делает только хууже. Этот сайт я поддерживаю- можете посмотреть, все отремонтировано ;)
Комментарий удален, ввиду... просто не понятно что имелось ввиду
Здравствуйте, вывожу дополнительные изображения в подробном описании новости, всё показывается, но титлы (альт)) одинаковые у всех, как сделать чтобы показывал нужное описание (на каждое изображение своё описание добавлять при добавлении картинки) таким образом:

название картинки 1
[изображение]


название картинки 2
[изображение]


Версия 1С-Битрикс: Управление сайтом 11.5.4.


Спасибо.
Михаил
Цитата
Гость сайта пишет:
Здравствуйте, вывожу дополнительные изображения в подробном описании новости, всё показывается, но титлы (альт)) одинаковые у всех, как сделать чтобы показывал нужное описание (на каждое изображение своё описание добавлять при добавлении картинки) таким образом:

Для вывода описания картинки:

Код
<? echo $PHOTO["DESCRIPTION"]?>
 

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

Показать еще