Article Forum Symmetrical Grid Layout

[Ozzy47]

Ahh pavers, that’s always a bunch of fun (not).

 

[Paul B]

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

 

[Ozzy47]

Take your time sir, I’m in no hurry.

 

[kelle67]

@Brogan, when you are ready, you can come to me and create new paths here.

 

[Paul B]

Path's finished (thank ****!).

+10

Path

• Paul B
• Apr 29, 2021
• 19

Got a few other jobs on the to do list over the next few days, but I should be (semi) back to normal some time next week.

 

[Paul B]

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

 

[Ozzy47]

Not a problem sir.

 

[Paul B]

@Ozzy47 My project expanded (again)

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:

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

Then add this section of code to the cta_article_grid.less template, or extra.less template, depending on which you are using:

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

Here's the full file so you can see where it's added - line 55:

@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:




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

 

[Ozzy47]

Thanks, I’ll try this as soon as I get some free time.

 

[anons]

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.

 

[Paul B]

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:

<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:

<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image"...

Read the rest of this update entry...

 

[Paul B]

and if no image a generic image

See this update: https://xenforo.com/community/resou...rid-layout.8303/updates#resource-update-39167

is there a way to add a image view count on the article preview page

You may be able to edit the template and use the xf_attachment.view_count var, if it's available.
It's out of scope for this guide though.

 

[KevinL]

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

Article Forum Symmetrical Grid Layout

Brogan submitted a new resource: Article Forum Symmetrical Grid Layout - Evolver In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the...

xenforo.com

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

 

[Paul B]

It's automatic based on the original image ratio.

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

 

[KevinL]

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.

 

[Paul B]

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]

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]

@KevinL try this one:

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

 

[KevinL]

Thank you @ivp I will give it a try on my local test and report back.

 

[Pepelepew]

Can this be used in thread types nodes NOT article type?