xF2 Guides Article Forum Symmetrical Grid Layout

This modification is courtesy of @BassMan

The core code is the same as for the Equal Grid - Fixed Footer layout in the main resource: Article Forum Symmetrical Grid Layout

Add the following code before it:

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";
}

That will display two articles per row.

To display three, change the repeat(2, 1fr) to repeat(3, 1fr), like so:

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";
}

For threads without images, it is possible to configure those to use a default image.

Edit the post_article_macros template.

Look for:

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>

Replace with:

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>

Change the image path -- style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/xenforo-icon-large.png' }}')" -- as required.


You can then expand that as required to use conditional statements related to node IDs, so a different image can be used in each forum, with a fallback to the generic icon:

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>

Change the node IDs -- <xf:elseif is="$forum.node_id == 2" /> -- and image paths -- style="background-image: url('{{ {$xf.options.boardUrl}.'/styles/default/xenforo/node-2-icon.png' }}')" -- as required.

Added a media query to prevent issues with the fixed footer layout below the medium break point.

See the main resource for the latest code: xF2 Guides - Article Forum Symmetrical Grid Layout

It isn't possible to target specific pages in less templates, so a different approach is required.

Move the code to a custom template (just create one) - in this case I have called it ctaArticleGridLayout.less.

Then edit the forum_view_type_article template like so:

Less:

<xf:if is="$page > 1">
    <xf:css src="ctaArticleGridLayout.less" />
</xf:if>

The result is the first page appears as the default style:

Subsequent pages have the symmetrical grid layout:

The code has been updated to remove the fade out effect of the content for the first row of articles.

See the main resource for the latest code: xF2 Guides - Article Forum Symmetrical Grid Layout