unproperlypropagated
Active member
I wonder if there an "article forum in preview mode" widget?
Article Forum Symmetrical Grid Layout
- Thread starter Paul B
- Start date
D
Deleted member 184953
Guest
Seems to be fine with a small correction...@Paul B any update for 2.3.x on this, it's a big miss for making the article layout look great. With thanks
I've added this to my forum:
Less:
.block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
height: auto;
}And it works:
Davyc
Well-known member
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.
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
Well-known member
Silverstar
Member
Hello, how can I reduce the length of the text displayed before reading the rest?
alfaNova
Well-known member
Setting default image codes were not respecting the image behaviour regarding size. So I did a bit changes and it worked.
3rd image was not fitting before.
Code:
<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.
Sprony
Member
I keep running into a problem which I sadly haven't fixed yet. I'm using the Equal Grid - Fixed Footer code, but not everything lined up so - based on the comments here - I added a little bit of code and now it's almost perfect, except for one post that seemingly doesn't want to align at all.
This is the complete code I'm now using, what am I missing here for that one post not to line up? Here's my code:
This is the complete code I'm now using, what am I missing here for that one post not to line up? Here's my code:
@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;
.block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
height: auto;
}
.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;
&:nth-of-type
{
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;
}
alfaNova
Well-known member
I think the reason of this problem is image height. you should give fixed image height.
Sprony
Member
Thank you for the quick reply. I'm new to all of this, including CSS code. Google tells me that fixed height may cause problems which may stretch or squash images that have a different aspect ratio than your with/height defines. I'm fine with using a specific size of image for the thumbnails (I can make them myself) but then I'm not sure where in the code I should specify that?
Wildcat Media
Well-known member
Actually, your first five images are the incorrect height. Compare the first row to the second.
The first five posts were originally 1 across/2 across/ 2 across (totaling five).
I'm having that same issue, but won't be revisiting this for a while and haven't fixed it (nor, do I know how to fix it).
The first five posts were originally 1 across/2 across/ 2 across (totaling five).
I'm having that same issue, but won't be revisiting this for a while and haven't fixed it (nor, do I know how to fix it).
@Sprony @Wildcat Media
or
Code:
.message--articlePreview .articlePreview-image>img {
aspect-ratio: 5 / 3;
}or
Code:
.message--articlePreview .articlePreview-image>img {
aspect-ratio: 4 / 3 !important;
}Sprony
Member
Where exactly in the code do I need to paste this? articlePreview is mentioned multiple times and I've been experimenting but so far the results widely differ.
Sprony
Member
Yeah, I have a bunch of code in that, but I figured I need to change the existing code, but you can just add it as it's own thing and it works like a charm, thanks!
One last thing, can I do something about the text not aligning when the title is shorter like here?
alfaNova
Well-known member
@Sprony I am using the following code, give a try. It is applied for specific forums so dont forget to change forum IDs. Additionally I set up default image for non-imaged threads, you should modify them as well.
Less:
/*** Article Forum Symmetrical Grid Layout with Equal Grid - Fixed Footer ***/
[data-container-key="node-77"], // Change Haberler forum design
[data-container-key="node-136"] // Change Firma Tanıtımları forum design
{
@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;
.block.block--articles.block--previews .block-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 15px;
align-items: stretch;
}
.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%;
height: 180px; // Fixed height for consistency
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain; // Crop excess while keeping aspect ratio
display: block;
}
}
&-title {
font-size: @xf-fontSizeLarger;
}
&-content {
margin-bottom: -@__ctaArticleFooter;
.bbWrapper {
display: -webkit-box;
-webkit-line-clamp: 3; // Limit to 3 lines
-webkit-box-orient: vertical;
overflow: hidden;
}
}
&-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;
}
}
/*** === NEW: Specific Default Images === ***/
// Default image for Haberler (node-77)
[data-container-key="node-77"] .articlePreview-image:empty {
background: url('/styles/isgtr/sunum/isg_haberler.png') center center / cover no-repeat;
width: 100%;
height: 180px;
display: block;
}
// Default image for Firma Tanıtımları (node-136)
[data-container-key="node-136"] .articlePreview-image:empty {
background: url('/styles/isgtr/sunum/firma_tanitim.png') center center / cover no-repeat;
width: 100%;
height: 180px;
display: block;
}
/*** Article Forum Symmetrical Grid Layout with Equal Grid - Fixed Footer ***/
I suppose you need to modify template post_article_macros template and move this part of the code:
Code:
<h2 class="articlePreview-title">
<xf:if is="$thread.discussion_state == 'moderated'">
<i class="structItem-status structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
<xf:elseif is="$thread.discussion_state == 'deleted'" />
<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('deleted') }}</span>
</xf:if>
<xf:if is="$thread.prefix_id">
<xf:if is="$forum">
<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>
<xf:else />
{{ prefix('thread', $thread, 'html', '') }}
</xf:if>
</xf:if>
<a href="{$linkUnread}">{$thread.title}</a>
</h2>Above this other part:
Code:
<xf:if is="$thread.cover_image">
