Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

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: https://xenforo.com/community/resources/article-forum-symmetrical-grid-layout.8303/
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>

1615857331022.png



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

1615857355767.png



Subsequent pages have the symmetrical grid layout:

1615857395440.png
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: https://xenforo.com/community/resources/article-forum-symmetrical-grid-layout.8303/
Top