Система форумных статей - Симметричная схема сетки

Система форумных статей - Симметричная схема сетки

Основной код такой же, как и для макета Равная сетка - Фиксированный нижний колонтитул на основном ресурсе: Система форумных статей - Симметричная схема сетки

Добавьте перед ним следующий код:

Less:
.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body
{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}

В каждой строке будут отображаться две статьи.

Чтобы отобразить три, измените repeat(2, 1fr) на repeat(3, 1fr), например:

Less:
.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body
{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}
  • Мне нравится
Реакции: Garri83
Для тем без изображений можно настроить их на использование изображения по умолчанию.

Отредактируйте шаблон post_article_macros.

Найти

HTML:
<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{$thread.cover_image}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
</xf:if>

Заменить на

HTML:
<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{$thread.cover_image}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
<xf:else />
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/xenforo-icon-large.png' }}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
</xf:if>

Измените путь к изображению - style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/xenforo-icon-large.png' }}')" - как требуется.


Затем вы можете расширить это по мере необходимости, чтобы использовать условные операторы, связанные с идентификаторами узлов, чтобы на каждом форуме можно было использовать другое изображение с резервным вариантом к общему значку:

HTML:
<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{$thread.cover_image}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
<xf:elseif is="$forum.node_id == 2" />
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/node-2-icon.png' }}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
<xf:elseif is="$forum.node_id == 8" />
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/node-8-icon.png' }}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
<xf:else />
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/xenforo-icon-large.png' }}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
</xf:if>

Измените идентификаторы узлов - <xf:elseif is="$forum.node_id == 2" /> - и пути к изображениям - style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/node-2-icon.png' }}')"- по мере необходимости.
Назад
Сверху Снизу