XF 2.3 Help modify template message.less

[macroforum]

Hello,
I would need support to modify this code of the message.less template. In this page of my forum https://www.macroforum.org/pagine/area-commento/ I want the photographs to be all arranged like rows n. 4 and n. 5, of equal width and height. Can someone give me some advice? Unfortunately I don't know CSS well.
I think the code I should change is this:

// expanded article grid behavior
@supports (display: grid)
{
    @media (min-width: @xf-responsiveMedium)
    {
        .block--previews .block-body
        {
            display: grid;
            gap: @xf-paddingLarge;
            grid-template-rows: auto;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "a";

            > .message:first-of-type:last-of-type
            {
                grid-area: a;
            }

            > .message--articlePreview
            {
                margin-bottom: 0;

                // first five
                &:nth-of-type(-n+5)
                {
                    .articlePreview-title
                    {
                        font-size: @xf-fontSizeLarger;
                    }

                    .articlePreview-image
                    {
                        max-width: none;

                        > img
                        {
                            aspect-ratio: 5 / 3;
                        }
                    }

                    .articlePreview-meta
                    {
                        .articlePreview-by
                        {
                            display: block;
                        }
                    }
                }

                // first
                &:first-of-type
                {
                    grid-area: a;

                    .articlePreview-title
                    {
                        font-size: @xf-fontSizeLargest;
                    }

                    .articlePreview-meta
                    {
                        border-top: none;
                    }

                    .articlePreview-main
                    {
                        flex-direction: row-reverse;
                    }

                    .articlePreview-image
                    {
                        width: 50%;
                        height: 100%;

                        > img
                        {
                            height: 100%;
                        }
                    }
                }
            }
        }
    }

    // max width multi-columns
    .m-maxPreviewColumns()
    {
        .block--previews .block-body
        {
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas:
                "a a a a"
                "b_1 b_1 b_2 b_2"
                "b_3 b_3 b_4 b_4";

            > .message:first-of-type:last-of-type
            {
                grid-area: a;
            }

            > .message--articlePreview
            {
                &:nth-of-type(1) { grid-area: a; }
                &:nth-of-type(2) { grid-area: b_1; }
                &:nth-of-type(3) { grid-area: b_2; }
                &:nth-of-type(4) { grid-area: b_3; }
                &:nth-of-type(5) { grid-area: b_4; }
            }
        }
    }

    .p-body-main:not(.p-body-main--withSidebar)
    {
        @media (min-width: @xf-responsiveWide)
        {
            .m-maxPreviewColumns();
        }
    }

    .p-body-main--withSidebar
    {
        @media (min-width: (@xf-responsiveWide + @xf-sidebarWidth))
        {
            .m-maxPreviewColumns();
        }
    }
}

Thanks
Antonio

 

[macroforum]

This is my best result, unfortunately I can't figure out how to improve and get all rows and columns of equal size, i see a mix of a, b_1, b2, b3, b4. https://www.macroforum.org/pagine/area-commento/

/* Comment Area custom CSS */
            

.block--articles.block--messages.block--expanded
{
    .article-title
    {
        // from .p-title-value
        margin: 0 0 5px;
        font-size: @xf-fontSizeLargest;
        font-weight: @xf-fontWeightNormal;
    }

    .message-snippet-link
    {
        margin-top: .5em;
        text-align: center;
    }

    .message + .message
    {
        margin-top: @xf-paddingLargest;
    }
}

// expanded article grid behavior
@supports (display: grid)
{
    @media (min-width: @xf-responsiveMedium)
    {
        .block--previews .block-body
        {
            display: grid;
            gap: @xf-paddingLarge;
            grid-template-rows: auto;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "a a";

            > .message:first-of-type:last-of-type
            {
                grid-area: a;
            }

            > .message--articlePreview
            {
                margin-bottom: 0;

                // first five
                &:nth-of-type(-n+5)
                {
                    .articlePreview-title
                    {
                        font-size: @xf-fontSizeLarger;
                    }

                    .articlePreview-image
                    {
                        max-width: none;

                        > img
                        {
                            aspect-ratio: 5 / 3;
                        }
                    }

                    .articlePreview-meta
                    {
                        .articlePreview-by
                        {
                            display: block;
                        }
                    }
                }

                // first
                &:first-of-type
                {
                    grid-area: a;

                    .articlePreview-title
                    {
                        font-size: @xf-fontSizeLargest;
                    }

                    .articlePreview-meta
                    {
                        border-top: none;
                    }

                    .articlePreview-main
                    {
                        flex-direction: row-reverse;
                    }

                    .articlePreview-image
                    {
                        width: 50%;
                        height: 100%;

                        > img
                        {
                            height: 100%;
                        }
                    }
                }
            }
        }
    }

    // max width multi-columns
    .m-maxPreviewColumns()
    {
        .block--previews .block-body
        {
                grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";

            > .message:first-of-type:last-of-type
            {
                grid-area: a;
            }

            > .message--articlePreview
            {
                &:nth-of-type(1) { grid-area: a; }
                &:nth-of-type(2) { grid-area: b_1; }
                &:nth-of-type(3) { grid-area: b_2; }
                &:nth-of-type(4) { grid-area: b_3; }
                &:nth-of-type(5) { grid-area: b_4; }
            }
        }
    }

    .p-body-main:not(.p-body-main--withSidebar)
    {
        @media (min-width: @xf-responsiveWide)
        {
            .m-maxPreviewColumns();
        }
    }

    .p-body-main--withSidebar
    {
        @media (min-width: (@xf-responsiveWide + @xf-sidebarWidth))
        {
            .m-maxPreviewColumns();
        }
    }
}

 

[BassMan]

Try by adding this to your extra.less template:

.block.block--articles.block--previews .block-body .message--articlePreview
{
    margin-top: 0;

    &:nth-of-type(n)
    {
        grid-area: unset;

        & .articlePreview
        {
            &-main
            {
                flex-direction: column;
            }

            &-image
            {
                width: 100%;
            }

            &-title
            {
                font-size: @xf-fontSizeLarger;
            }

            &-content .bbWrapper:after
            {
                background: none;
            }

            &-meta
            {
                border-top: solid 1px @xf-borderColor;

                & .articlePreview-by
                {
                    display: none;
                }
            }
        }
    }
}

@media (min-width: @xf-responsiveMedium) {
    .block--previews .block-body>.message--articlePreview:nth-of-type(-n+5) .articlePreview-image>img {
        aspect-ratio: 4 / 3;
    }
}

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

 

[macroforum]

@BassMan Thanks, it's perfect!
Antonio