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!