Битрикс. Простой компонент «Список новостей»
03.07.2018
Теги: $arResult • CMS • init.php • Web-разработка • Битрикс • Изображение • Компонент • Новости • ШаблонКомпонента
На главной странице сайта, в правой колонке, надо вывести список трех последних записей блога. Для решения это задачи используем простой компонент «Список новостей». Как обычно, чтобы получить код вызова компонента со всеми параметрами, переходим на тестовую страницу и вызываем визуальный редактор. Выбираем в правой колонке компонент «Контент • Новости • Список новостей».
В настройках
- оставляем шаблон по умолчанию
.default - выбираем тип информационного блока
- выбираем код информационного блока
- задаем количество новостей на странице
- убираем постраничную навигацию под списком
Копируем в буфер обмена код вызова компонента и выходим из редактора без сохранения. Открываем на редактирование файл шаблона local/templates/voguis_index/footer.php и в правую колонку вставляем код вызова компонента из буфера обмена:
<?php $APPLICATION->IncludeComponent( "bitrix:news.list", "", array( // настройки компонента ) ); ?>
Переходим на главную страницу сайта, включаем режим правки и копируем шаблон компонента:
Задаем имя шаблона posts_sidebar и выбираем куда копировать:
Файл шаблона local/templates/voguis_index/footer.php был перезаписан, теперь вызов компонента теперь выглядит так:
<?php $APPLICATION->IncludeComponent( "bitrix:news.list", "posts_sidebar", array( "ACTIVE_DATE_FORMAT" => "d.m.Y", // Формат показа даты "ADD_SECTIONS_CHAIN" => "Y", // Включать раздел в цепочку навигации "AJAX_MODE" => "N", // Включить режим AJAX "AJAX_OPTION_ADDITIONAL" => "", // Дополнительный идентификатор "AJAX_OPTION_HISTORY" => "N", // Включить эмуляцию навигации браузера "AJAX_OPTION_JUMP" => "N", // Включить прокрутку к началу компонента "AJAX_OPTION_STYLE" => "Y", // Включить подгрузку стилей "CACHE_FILTER" => "N", // Кешировать при установленном фильтре "CACHE_GROUPS" => "Y", // Учитывать права доступа "CACHE_TIME" => "36000000", // Время кеширования (сек.) "CACHE_TYPE" => "A", // Тип кеширования "CHECK_DATES" => "Y", // Показывать только активные на данный момент элементы "DETAIL_URL" => "", // URL страницы детального просмотра (по умолчанию - из настроек инфоблока) "DISPLAY_BOTTOM_PAGER" => "N", // Выводить под списком "DISPLAY_DATE" => "Y", // Выводить дату элемента "DISPLAY_NAME" => "Y", // Выводить название элемента "DISPLAY_PICTURE" => "Y", // Выводить изображение для анонса "DISPLAY_PREVIEW_TEXT" => "Y", // Выводить текст анонса "DISPLAY_TOP_PAGER" => "N", // Выводить над списком "FIELD_CODE" => array( // Поля 0 => "", 1 => "", ), "FILTER_NAME" => "", // Фильтр "HIDE_LINK_WHEN_NO_DETAIL" => "N", // Скрывать ссылку, если нет детального описания "IBLOCK_ID" => "1", // Код информационного блока "IBLOCK_TYPE" => "content", // Тип информационного блока (используется только для проверки) "INCLUDE_IBLOCK_INTO_CHAIN" => "Y", // Включать инфоблок в цепочку навигации "INCLUDE_SUBSECTIONS" => "Y", // Показывать элементы подразделов раздела "MESSAGE_404" => "", // Сообщение для показа (по умолчанию из компонента) "NEWS_COUNT" => "3", // Количество новостей на странице "PAGER_BASE_LINK_ENABLE" => "N", // Включить обработку ссылок "PAGER_DESC_NUMBERING" => "N", // Использовать обратную навигацию "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000", // Время кеширования страниц для обратной навигации "PAGER_SHOW_ALL" => "N", // Показывать ссылку "Все" "PAGER_SHOW_ALWAYS" => "N", // Выводить всегда "PAGER_TEMPLATE" => ".default", // Шаблон постраничной навигации "PAGER_TITLE" => "Новости", // Название категорий "PARENT_SECTION" => "", // ID раздела "PARENT_SECTION_CODE" => "", // Код раздела "PREVIEW_TRUNCATE_LEN" => "", // Максимальная длина анонса для вывода (только для типа текст) "PROPERTY_CODE" => array( // Свойства 0 => "", 1 => "", ), "SET_BROWSER_TITLE" => "Y", // Устанавливать заголовок окна браузера "SET_LAST_MODIFIED" => "N", // Устанавливать в заголовках ответа время модификации страницы "SET_META_DESCRIPTION" => "Y", // Устанавливать описание страницы "SET_META_KEYWORDS" => "Y", // Устанавливать ключевые слова страницы "SET_STATUS_404" => "N", // Устанавливать статус 404 "SET_TITLE" => "Y", // Устанавливать заголовок страницы "SHOW_404" => "N", // Показ специальной страницы "SORT_BY1" => "ACTIVE_FROM", // Поле для первой сортировки новостей "SORT_BY2" => "SORT", // Поле для второй сортировки новостей "SORT_ORDER1" => "DESC", // Направление для первой сортировки новостей "SORT_ORDER2" => "ASC", // Направление для второй сортировки новостей "STRICT_SECTION_CHECK" => "N", // Строгая проверка раздела для показа списка ), false ); ?>
Скопированный шаблон у нас теперь в директории local/templates/voguis_index/components/bitrix/news.list/posts_sidebar. Удаляем файл стилей style.css и открываем шаблон template.php на редактирование. Убираем весь мусор от разработчиков Битрикс и пишем свой код:
<?php if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); /** @var array $arParams */ /** @var array $arResult */ /** @global CMain $APPLICATION */ /** @global CUser $USER */ /** @global CDatabase $DB */ /** @var CBitrixComponentTemplate $this */ /** @var string $templateName */ /** @var string $templateFile */ /** @var string $templateFolder */ /** @var string $componentPath */ /** @var CBitrixComponent $component */ $this->setFrameMode(true); ?> <?php foreach ($arResult['ITEMS'] as $arItem): ?> <div class="blog-grids"> <div class="blog-grid-left"> <a href="<?= $arItem['DETAIL_PAGE_URL']; ?>"> <img src="<?= $arItem['PREVIEW_PICTURE']['SRC']; ?>" class="img-responsive" alt="<?= $arItem['PREVIEW_PICTURE']['ALT']; ?>" /> </a> </div> <div class="blog-grid-right"> <h4><a href="<?= $arItem['DETAIL_PAGE_URL']; ?>"><?= $arItem['NAME']; ?></a></h4> <?php // обрезаем текст анонса до 50 символов $preview = iconv_strlen($arItem['PREVIEW_TEXT']) > 50 ? iconv_substr($arItem['PREVIEW_TEXT'], 0, iconv_strpos($arItem['PREVIEW_TEXT'], ' ', 50)).'…' : $arItem['PREVIEW_TEXT']; ?> <p><?= $preview; ?></p> </div> <div class="clearfix"></div> </div> <?php endforeach; ?>
Для удобства можно распечатать массив $arResult с помощью функции debug(), которую можно добавить в файл init.php:
function debug($data) { echo '<pre>' . print_r($data, true) . '</pre>'; }
array
(
[ID] => 1
[~ID] => 1
[TIMESTAMP_X] => 25.06.2018 11:26:10
[~TIMESTAMP_X] => 25.06.2018 11:26:10
[IBLOCK_TYPE_ID] => content
[~IBLOCK_TYPE_ID] => content
[LID] => s1
[~LID] => s1
[CODE] => blog
[~CODE] => blog
[NAME] => Блог
[~NAME] => Блог
[ACTIVE] => Y
[~ACTIVE] => Y
[SORT] => 500
[~SORT] => 500
[LIST_PAGE_URL] =>
[~LIST_PAGE_URL] =>
[DETAIL_PAGE_URL] => /#IBLOCK_CODE#/category/#SECTION_CODE_PATH#/post/#ELEMENT_CODE#/
[~DETAIL_PAGE_URL] => /#IBLOCK_CODE#/category/#SECTION_CODE_PATH#/post/#ELEMENT_CODE#/
[SECTION_PAGE_URL] => /#IBLOCK_CODE#/category/#SECTION_CODE_PATH#/
[~SECTION_PAGE_URL] => /#IBLOCK_CODE#/category/#SECTION_CODE_PATH#/
[CANONICAL_PAGE_URL] =>
[~CANONICAL_PAGE_URL] =>
[PICTURE] =>
[~PICTURE] =>
[DESCRIPTION] =>
[~DESCRIPTION] =>
[DESCRIPTION_TYPE] => text
[~DESCRIPTION_TYPE] => text
[RSS_TTL] => 24
[~RSS_TTL] => 24
[RSS_ACTIVE] => Y
[~RSS_ACTIVE] => Y
[RSS_FILE_ACTIVE] => N
[~RSS_FILE_ACTIVE] => N
[RSS_FILE_LIMIT] =>
[~RSS_FILE_LIMIT] =>
[RSS_FILE_DAYS] =>
[~RSS_FILE_DAYS] =>
[RSS_YANDEX_ACTIVE] => N
[~RSS_YANDEX_ACTIVE] => N
[XML_ID] =>
[~XML_ID] =>
[TMP_ID] => 24b419b95508c0efa9de16e20eb4beb5
[~TMP_ID] => 24b419b95508c0efa9de16e20eb4beb5
[INDEX_ELEMENT] => Y
[~INDEX_ELEMENT] => Y
[INDEX_SECTION] => Y
[~INDEX_SECTION] => Y
[WORKFLOW] => N
[~WORKFLOW] => N
[BIZPROC] => N
[~BIZPROC] => N
[SECTION_CHOOSER] => L
[~SECTION_CHOOSER] => L
[LIST_MODE] =>
[~LIST_MODE] =>
[RIGHTS_MODE] => S
[~RIGHTS_MODE] => S
[SECTION_PROPERTY] =>
[~SECTION_PROPERTY] =>
[PROPERTY_INDEX] =>
[~PROPERTY_INDEX] =>
[VERSION] => 1
[~VERSION] => 1
[LAST_CONV_ELEMENT] => 0
[~LAST_CONV_ELEMENT] => 0
[SOCNET_GROUP_ID] =>
[~SOCNET_GROUP_ID] =>
[EDIT_FILE_BEFORE] =>
[~EDIT_FILE_BEFORE] =>
[EDIT_FILE_AFTER] =>
[~EDIT_FILE_AFTER] =>
[SECTIONS_NAME] => Категории
[~SECTIONS_NAME] => Категории
[SECTION_NAME] => Категория
[~SECTION_NAME] => Категория
[ELEMENTS_NAME] => Статьи
[~ELEMENTS_NAME] => Статьи
[ELEMENT_NAME] => Статья
[~ELEMENT_NAME] => Статья
[EXTERNAL_ID] =>
[~EXTERNAL_ID] =>
[LANG_DIR] => /
[~LANG_DIR] => /
[SERVER_NAME] =>
[~SERVER_NAME] =>
[USER_HAVE_ACCESS] => 1
[SECTION] =>
[ITEMS] => array (
[0] => array (
[ID] => 8
[~ID] => 8
[IBLOCK_ID] => 1
[~IBLOCK_ID] => 1
[IBLOCK_SECTION_ID] => 4
[~IBLOCK_SECTION_ID] => 4
[NAME] => Восьмая статья блога
[~NAME] => Восьмая статья блога
[ACTIVE_FROM] => 25.06.2018
[~ACTIVE_FROM] => 25.06.2018
[TIMESTAMP_X] => 25.06.2018 12:08:00
[~TIMESTAMP_X] => 25.06.2018 12:08:00
[DETAIL_PAGE_URL] => category/tretya-kategoriya/dochernyaya-kategoriya/post/vosmaya-statya-bloga/
[~DETAIL_PAGE_URL] => category/tretya-kategoriya/dochernyaya-kategoriya/post/vosmaya-statya-bloga/
[LIST_PAGE_URL] =>
[~LIST_PAGE_URL] =>
[DETAIL_TEXT] => ..........
[~DETAIL_TEXT] => ..........
[DETAIL_TEXT_TYPE] => html
[~DETAIL_TEXT_TYPE] => html
[PREVIEW_TEXT] => ..........
[~PREVIEW_TEXT] => ..........
[PREVIEW_TEXT_TYPE] => text
[~PREVIEW_TEXT_TYPE] => text
[PREVIEW_PICTURE] => array (
[ID] => 17
[TIMESTAMP_X] => 25.06.2018 12:08:00
[MODULE_ID] => iblock
[HEIGHT] => 354
[WIDTH] => 830
[FILE_SIZE] => 59190
[CONTENT_TYPE] => image/jpeg
[SUBDIR] => iblock/73c
[FILE_NAME] => 73cfee09bfe27e6a6124541bd1d6f20c.jpg
[ORIGINAL_NAME] => 11.jpg
[DESCRIPTION] =>
[HANDLER_ID] =>
[EXTERNAL_ID] => d92457cbe985fae03e83d7619b8a9aee
[~src] =>
[SRC] => /upload/iblock/73c/73cfee09bfe27e6a6124541bd1d6f20c.jpg
[UNSAFE_SRC] => /upload/iblock/73c/73cfee09bfe27e6a6124541bd1d6f20c.jpg
[SAFE_SRC] => /upload/iblock/73c/73cfee09bfe27e6a6124541bd1d6f20c.jpg
[ALT] => Восьмая статья блога
[TITLE] => Восьмая статья блога
)
[~PREVIEW_PICTURE] => 17
[LANG_DIR] => /
[~LANG_DIR] => /
[SORT] => 500
[~SORT] => 500
[CODE] => vosmaya-statya-bloga
[~CODE] => vosmaya-statya-bloga
[EXTERNAL_ID] => 8
[~EXTERNAL_ID] => 8
[IBLOCK_TYPE_ID] => content
[~IBLOCK_TYPE_ID] => content
[IBLOCK_CODE] => blog
[~IBLOCK_CODE] => blog
[IBLOCK_EXTERNAL_ID] =>
[~IBLOCK_EXTERNAL_ID] =>
[LID] => s1
[~LID] => s1
[EDIT_LINK] => /bitrix/admin/iblock_element_edit.php?IBLOCK_ID=1&type=content&ID=8&lang=ru
[DELETE_LINK] => /bitrix/admin/iblock_list_admin.php?IBLOCK_ID=1&type=content&lang=ru
[DISPLAY_ACTIVE_FROM] => 25.06.2018
[IPROPERTY_VALUES] => array (
[SECTION_META_TITLE] => Блог веб-разработчика
[SECTION_META_KEYWORDS] => HTML CSS JavaScript PHP MySQL Apache
)
[FIELDS] => array()
[DISPLAY_PROPERTIES] => array()
)
[1] => array(
..........
)
..........
)
Чтобы у контент-менеджера была возможность редактировать и удалять статьи блога не через панель управления, а прямо с морды сайта, в шаблон надо добавить php-код (его можно взять из шаблона компонента, который мы удалили):
<?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); /** @var array $arParams */ /** @var array $arResult */ /** @global CMain $APPLICATION */ /** @global CUser $USER */ /** @global CDatabase $DB */ /** @var CBitrixComponentTemplate $this */ /** @var string $templateName */ /** @var string $templateFile */ /** @var string $templateFolder */ /** @var string $componentPath */ /** @var CBitrixComponent $component */ $this->setFrameMode(true); ?> <?php foreach ($arResult['ITEMS'] as $arItem): ?> <?php /* код, который позволяет редактировать и удалять статьи */ $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="blog-grids" id="<?= $this->GetEditAreaId($arItem['ID']); /* идентификатор статьи */ ?>"> <!-- здесь код без изменений --> </div> <?php endforeach; ?>
По дизайну, посты в правой колонке должны быть с квадратной превьюшкой, а у нас она прямоугольная. Так что для каждого поста надо создать квадратную превьюшку. Для этого создаем файл result_modifier.php, и добавляем в него код генерации превьюшек размером 100x100px с помощью метода CFile::ResizeImageGet(). Путь к файлам превьюшек добавляем в массив $arResult:
array CFile::ResizeImageGet( mixed file, array arSize, const resizeType = BX_RESIZE_IMAGE_PROPORTIONAL, bool bInitSizes = false, array arFilters = false, bool bImmediate = false, bool jpgQuality = false );
Метод возвращает массив вида:
array( 'src', // путь к уменьшенной картинке относительно корня сайта 'width', // если bInitSizes = true ширина уменьшенной картинки, иначе 0 'height', // если bInitSizes = true высота уменьшенной картинки, иначе 0 )
Метод уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове метод вернет путь к уменьшенному файлу. Статический метод.
<?php /* * Файл local/templates/voguis_index/components/bitrix/news.list/posts_sidebar/result_modifier.php */ foreach ($arResult['ITEMS'] as &$arItem) { $thumb = CFile::ResizeImageGet( $arItem['PREVIEW_PICTURE'], array('width' => 100, 'height' => 100), BX_RESIZE_IMAGE_EXACT ); $arItem['PREVIEW_PICTURE']['SRC'] = $thumb['src']; } unset($arItem);
Поиск: $arResult • CMS • Web-разработка • init.php • Битрикс • Изображение • Компонент • Новости • Шаблон компонента