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

22018  |  76

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

Для вывода дополнительных изображений в элементах информационного блока (т.е. изображений кроме 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
Зашел по ссылке с примером, фотографии открываются в новом окне :(
Михаил Базаров
Цитата
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 ?
Страницы: 1 2 3 4 След.

© 2011—2016 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности
x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения: