Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Brogan

XenForo moderator
Staff member
Yes, any of the HTML 5 attributes can be used, for example:
Less:
[data-logged-in="false"]

[data-logged-in="true"]

[data-template*="name"]

[data-template="template_name"]

[data-type="type"]

[data-container-key="node-ID"]

[data-content-key="thread-ID"]


They can be further refined by joining attributes without a comma:
Less:
[data-template="template_name"][data-type="type"]


Or made to apply to multiple attributes with a comma:
Less:
[data-container-key="node-ID"],
[data-content-key="thread-ID"],
[data-type="type"]
 

Brogan

XenForo moderator
Staff member
There was a suggestion to have this layout on page 2 and beyond is that possible? Thanks

Until the suggestion I made is implemented, here's one way of achieving it.

Move the code to a custom template - 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>

1615855644883.png


The result:

1615855711364.png

1615855730355.png
 

Brogan

XenForo moderator
Staff member
Brogan updated Article Forum Symmetrical Grid Layout with a new update entry:

Changing the layout from page 2 onwards

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:

Read the rest of this update entry...

I figured it was worth posting an update for the page specific layout so it doesn't get lost in the thread.
 

sixlxvi

Well-known member
@Brogan I like this, but here is what I get with the fixed footer code:

1615905143332.png

A lot of the longer text areas are overlapping the footer area.
 

Brogan

XenForo moderator
Staff member
It works on my local with short and long previews so I would need a URL to see what's going on.

In the meantime you can use the floating footer option.

1615906043471.png
 
Last edited:

Brogan

XenForo moderator
Staff member
Hello,

Could you give example code to setup fixed footer with default layout of 1:2:2:4:4?

Thank you.
Less:
@media (min-width: @xf-responsiveMedium)
{
    @__ctaArticleFooter: 40px;

    .message--articlePreview .articlePreview-main
    {
        min-height: 100%;
        padding-bottom: @__ctaArticleFooter;
    }

    .message--articlePreview .articlePreview-footer
    {
        position: relative;
        bottom: @__ctaArticleFooter;
    }

    .message--articlePreview .articlePreview-content
    {
        margin-bottom: -@__ctaArticleFooter;
    }
}

The 40px at at the top can be adjusted to suit.
 

Brogan

XenForo moderator
Staff member
Figures.

I don't use Safari and Apple no longer develop it for Windows so there's not a lot I can do.
 

rdn

Well-known member
Is it possible to have a default image for threads without image attachment?
And also how to make the thumbnails display exactly the same height?

Thanks a lot.
 

Brogan

XenForo moderator
Staff member
Is it possible to have a default image for threads without image attachment?
That's core XF functionality - this guide just changes the layout.

And also how to make the thumbnails display exactly the same height?
You can probably do that by setting a fixed height for the containers.
It would have to be the height of the largest container you expect to have based on the size of images and content, and the page widths.
 
  • Like
Reactions: rdn
Top