Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Brogan

XenForo moderator
Staff member
@Ozzy I should be able to take a look next week.

It rained all day Saturday and I've (stress) fractured my right arm and left ankle so progress is slower than I'd like (using the mallet hurts, a lot).

Should be finished with the pavers tomorrow though then I just need to infill.

20210426_143603.jpg
 

Brogan

XenForo moderator
Staff member
@Ozzy My path project expanded so I didn't have time to look at it this week.

I've pencilled it in to my task list for next week.
 

Brogan

XenForo moderator
Staff member
@Ozzy47 My project expanded (again) 🙄 😕 :cry:

However, I made some time tonight to look into it.

Out of the box, there's no sticky class for article view thread so it needs to be added.

Edit the post_article_macros template.
Add this -- $thread.sticky ? 'message--articlePreview--sticky' :'' }}{{ -- like so on line 224:

HTML:
    <article class="message message--article message--articlePreview {{
        $thread.sticky ? 'message--articlePreview--sticky' :'' }}{{
        $thread.discussion_state == 'moderated' ? 'is-moderated' : '' }}{{
        $thread.discussion_state == 'deleted' ? 'is-deleted' : ''
        }} js-inlineModContainer js-threadListItem-{$thread.thread_id}">

1620693083450.png

Then add this section of code to the cta_article_grid.less template, or extra.less template, depending on which you are using:
Less:
&--sticky
{
    grid-area: a !important;
}

Here's the full file so you can see where it's added - line 55:
Less:
@media (min-width: @xf-responsiveMedium)
{
    @__ctaArticleFooter: 40px;

    .block.block--articles.block--previews .block-body .message--articlePreview
    {
        margin-top: 0;

        &:nth-of-type(n)
        {
            grid-area: unset;

            & .articlePreview
            {
                &-main
                {
                    flex-direction: column;
                    min-height: 100%;
                    padding-bottom: @__ctaArticleFooter;
                }

                &-image
                {
                    width: 100%;
                }

                &-title
                {
                    font-size: @xf-fontSizeLarger;
                }

                &-content
                {
                    margin-bottom: -@__ctaArticleFooter;
                }

                &-footer
                {
                    position: relative;
                    bottom: @__ctaArticleFooter;
                }

                &-meta
                {
                    border-top: solid 1px @xf-borderColor;

                    & .articlePreview-by
                    {
                        display: none;
                    }
                }
            }
        }

        &--sticky
        {
            grid-area: a !important;
        }
    }
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
    background: none;
}

The result is this:

1620693301400.png


Note that this only works if there is a single sticky thread.
 

anons

Member
is there a way to add a image view count on the article preview page? and if no image a generic image to say no image was added to this article? like this screen shot.
 

Attachments

  • this.png
    this.png
    32.9 KB · Views: 7

Brogan

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

Setting a default image

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"...

Read the rest of this update entry...
 

KevinL

Active member
Noticed that image height of the fifth article (first one in the second row) is different than the others?
Yeah I am seeing that also. You can see it in the preview picture here too


is this by design? Or can they all be the same size?
 

Brogan

XenForo moderator
Staff member
It's automatic based on the original image ratio.

Use custom CSS to force them to a fixed height if you want.
 

KevinL

Active member
All the images are the same ratio. It happens just like your preview picture. After the fifth one they are all slightly larger. And when more threads are posted the first ones that were smaller take the larger size on the second row.
 

Brogan

XenForo moderator
Staff member
I've wiped my local since I posted this so I'll have to set it up again and check.

Alternatively, if you want to set up a demo, create the article threads, etc. and post a link to it, I can take a look: https://xenforo.com/demo/
 

KevinL

Active member
I just added a height to the &-image section. For some reason the first 5 were at 187px and all the rest were at 230px. This was for the fixed footer option.
 

ivp

Active member
@KevinL try this one:
Code:
@media (min-width: @xf-responsiveMedium)
{
    @__ctaArticleFooter: 40px;

    .block.block--articles.block--previews .block-body .message--articlePreview
    {
        margin-top: 0;

        &:nth-of-type(n)
        {
            grid-area: unset;

            & .articlePreview
            {
                &-main
                {
                    flex-direction: column;
                    min-height: 100%;
                    padding-bottom: @__ctaArticleFooter;
                }

                &-image
                {
                    width: 100%;
                    
                    &:after
                    {
                        padding-bottom: 75%;
                    }                    
                }

                &-title
                {
                    font-size: @xf-fontSizeLarger;
                }

                &-content
                {
                    margin-bottom: -@__ctaArticleFooter;
                }

                &-footer
                {
                    position: relative;
                    bottom: @__ctaArticleFooter;
                }

                &-meta
                {
                    border-top: solid 1px @xf-borderColor;

                    & .articlePreview-by
                    {
                        display: none;
                    }
                }
            }
        }
    }
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
    background: none;
}
 
Top