XF 2.2 Articles Layout

[ChrisTERiS]

I've found 4 very useful articles for Articles layout but none on how to set the grid to show always 2 articles per row in all pages.

Is it possible?

Thank you
Chris

 

[Deleted member 241496]

Something may conflict in your site. I replaced my code with your code above and works fine:

ChrisTERiS's Blog

The only difference in my site is that I don't have sidebar.

It does seem to be the sidebar that's causing the issue. I just removed the sidebar on those pages and it works now. Interesting, I don't understand how the sidebar would cause a conflict like that.

 

[ChrisTERiS]

It does seem to be the sidebar that's causing the issue. I just removed the sidebar on those pages and it works now. Interesting, I don't understand how the sidebar would cause a conflict like that.

Really don't know. But getting in account that Articles page does not have by default sidebar, maybe means something. As for me, is a long time now that I try to have all my pages without sidebar. At least those pages that does not have a categories block.

 

[BassMan]

Oh, what a discussion...

Bassman has just modified it to change the number of articles per row.

Absolutely right. Nothing much has been done here from my side. And the first answer after getting this request (on my forum) was a link to @Brogan 's resource.

Sorry for any misunderstanding.

 

[Paul B]

No worries @BassMan - I was just having fun.

If you like/want, I can add your modification (credited) as an update to the resource.

 

[ChrisTERiS]

No worries @BassMan - I was just having fun.

If you like/want, I can add your modification (credited) as an update to the resource.

Maybe to post an Article on how to have a nice widget for Last Threads when the Node Type is Articles?

eg This is a widget that I created for last 3 Articles. There is no any option to cutoff the text so the full text appears. The default shows one article per row, but with some custom css I was able to show 3 articles per row, but not responsive.

Forum list

Community platform by XenForo®

www.christeris.com

And this is the real Article listing page. Everything nice and configurable.

ChrisTERiS's Blog

I do believe that most, if not all, of those who are using Article nodes, should love a better widget created especially for Articles.

 

[BassMan]

but not responsive.

Wrap the widget code you have to this:

@media (min-width: @xf-responsiveMedium) {

    *** your code ***

}

 

[ChrisTERiS]

Wrap the widget code you have to this:

@media (min-width: @xf-responsiveMedium) {

    *** you code ***

}

Thank you for your continued help but the main problem is the long text and secondary I prefer title below the photo and other details in footer like in normal listing.

Tomorrow I'll try to find the original template for article listing and then for widget and I'll try to change it on my own. But for sure a tutorial is much more helpful Smarty has a nice function to do it directly to template. eg

 {$article_text|truncate:150:"..."}

This one will displays 150 characters and then .... if the length is more than 150 characters. Don't know if XF has something similar.

 

[Paul B]

In XF you can use {{ snippet($var, 150 }} .

 

[ChrisTERiS]

In XF you can use {{ snippet($var, 150 }} .

I think that you've a typo, a missing closing ")" after 150. But the problem is that for article body there is no single variable but a function:

{{ bb_code($post.message, 'post', $post) }}

I tried to edit it to:

{{ snippet(bb_code($post.message, 'post', $post), 150) }}

and here is my output:


this means that function snippet works as it shows only 150 characters but most probably I need to replace $post.message, 'post', $post with someting else. I need the variable for the article text and here it has all the code including the photo.

Thank you
Chris

 

[BassMan]

Try with this code:

{{ bb_code(snippet($post.message, 150), 'post', $post) }}

 

[ChrisTERiS]

Super !! It works fine.

 

[Deleted member 241496]

So I'm still trying to get 3 articles in each row and it isn't working. I put the code you have and you can see the results here https://www.talkingevs.com/forums/ev-news.142/:

/* Blog / Directory layout page */
@media (max-width: @xf-responsiveMedium)
{
    .p-body-sidebar
    {
        display: none;
    }
}

.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}

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

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

 

[Kalidor]

This has been a useful thread in helping me get the desired result of the uniform 4xgrid.

I've implemented the code that allows for the static footers on each article. With that in mind, if I wanted to do 2:4:4:4:etc how would I be able to change the code to implement that for the top row?

I can't say how much I'm in love with this community for all the resources and help