Article Forum Symmetrical Grid Layout

[briansol]

When using the equal grid, fixed footer variant,

this causes breakage/text overlap. The title ends up in the profile /meta footer area.

1st col is the issue.

The image is: View attachment 330478which doesn't seem too out of proportion, standard 4:3. Why is it showing all 9:16-like?

View attachment 330477

This is repeatable on other article categories as well, it is not limited to this image. just col 1 every time.

 

[Sprony]

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

/*** 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 ***/

Thank you!

 

[Sprony]

Not sure what cause this in the code, but I've got everything working fine, unless it's the first post, which for whatever reason gets blown up way out of proportions. Here's what a normal test page looks like:



The moment I remove 2 and leave only one, it turns into this. How do I disable that?

 

[Sprony]

Anyone?

 

[Mendalla]

I can check. I have some members blogs on my site that I used this for. Not sure offhand though.