Article Forum Symmetrical Grid Layout

[unproperlypropagated]

I wonder if there an "article forum in preview mode" widget?

 

[Davyc]

@Paul B any update for 2.3.x on this, it's a big miss for making the article layout look great. With thanks

 

[Deleted member 184953]

@Paul B any update for 2.3.x on this, it's a big miss for making the article layout look great. With thanks

Seems to be fine with a small correction...

Post in thread 'Article Forum Symmetrical Grid Layout'

Jun 22, 2024

Still broken in 2.3.0 RC4

I've added this to my forum:

.block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
    height: auto;
}

And it works:

E-reader News

News about e-readers and the world of e-books.

www.ereadersforum.com

• BassMan

• 

 

[Davyc]

@Old Nick Works for me - thanks for pointing it out, I missed it

 

[Davyc]

There was one anomaly where the fifth image was displaying a different size, I corrected this in the CSS file as the ratio was different from all the other images - I also added some additional CSS to give the 'Read Full Article >>' text a button like look - see below:



The image ratio for the fifth image was set at 5/3 I changed this to reflect all the others to 4/3 which corrected the anomaly. I also altered the number of characters from 750 to 250 as my articles are short quick reads.

 

[Oblivion Knight]

Potentially a third-party styling issue but it wasn't apparent on 2.2.x and is on 2.3.x (I could do more testing but.. meh).

In addition to @BassMan 's code, I had to add:

.articlePreview-image {
    background-size: 100%;
    background-position: center;
}

With:


Without:

 

[Silverstar]

Hello, how can I reduce the length of the text displayed before reading the rest?

 

[alfaNova]

Setting default image codes were not respecting the image behaviour regarding size. So I did a bit changes and it worked.

<xf:if is="$thread.cover_image">
                <a href="{$linkUnread}" class="articlePreview-image" tabindex="-1">
                <img src="{$thread.cover_image}" alt="{$thread.title}" loading="lazy" />
                </a>
            <xf:elseif is="$forum.node_id == 77" />
                <a href="{$linkUnread}" class="articlePreview-image" tabindex="-1">
                <img src="{{ {$xf.options.boardUrl}.'/styles/isgtr/sunum/guncel_haberler.jpg' }}" alt="{$thread.title}" loading="lazy" />
                </a>
            </xf:if>

3rd image was not fitting before.