Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

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"]
 
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 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.
 
Hello,

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

Thank you.
 
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.webp
 
Last edited:
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.
 
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.
 
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 Bottom