🖼️ Adding the poster block

info

The files in this step are pre-imported in the chapter's snapshot!

Adding a poster block

For our next task, let's tackle a block that contains long image and some text. We'll refer to this block as the 'poster.' Let's dive in!

The markup

First, let's add the starting markup code to our poster.twig.

/views/partials/poster.twig

<section class="c-poster">
    <div class="c-poster_inner">
        <h2 class="u-screen-reader-text">{{ poster.title }}</h2> {# For accessibility since our design didn't have a proper title #}
    </div>
</section>

Then add some markup for the upper text, the image and the small block at the end of the block (foot).

/views/partials/poster.twig

<section class="c-poster">
    <div class="c-poster_inner">
        <h2 class="u-screen-reader-text">{{ poster.title }}</h2>

        <div class="c-wysiwyg || c-poster_description">{{ poster.description }}</div>

        <div class="c-poster_columns-text">
            {# columns-text snippet will go here #}
        </div>

        <div class="c-poster_foot">
            <span>{{ poster.foot }}</span>
        </div>
    </div>

    {% include "@snippets/image.twig" with {
        classes: 'c-poster_image',
        modifiers: '-cover',
        src: poster.img.src,
        width: poster.img.width,
        height: poster.img.height,
    } only %}
</section>

The styles

First, let's add some basic layout styles. These styles will define how the grid works and how elements are initially positioned.

/assets/styles/components/_poster.scss

.c-poster {
    @include -margin-large-bottom;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.c-poster_inner {
    position: relative;
    z-index: 1;
    padding: var(--container-margin);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--grid-gutter);
    min-height: 200vh;

    @media (max-width: $to-medium) {
        --grid-columns: 1;
        min-height: 120vh;
    }
}

Then let's add a few styles for the following elements :

• c-poster_description
• c-poster_columns-text
• c-poster_foot
• c-poster_image

note

We will apply basic positioning styles to the c-poster_columns-text within the c-poster, and this class will also function as the parent for a snippet that already exists with its own files. 👀

/assets/styles/components/_poster.scss

.c-poster_description {
    grid-row: 1;

    @media (min-width: $from-medium) {
        grid-column: 4/7;
    }
}

.c-poster_columns-text {
    display: inline-flex;
    align-items: center;
    grid-row: 2;

    @media (min-width: $from-medium) {
        grid-column: 1/-1;
    }
}

.c-poster_foot {
    display: inline-flex;
    align-items: flex-end;
    grid-row: 3;

    @media (min-width: $from-medium) {
        grid-column: 4/7;
    }
}

.c-poster_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Adding the columns-text snippet

Let's incorporate the pre-created columns-text snippet, which can be reused in other sections of the page.

/views/partials/poster.twig

<section class="c-poster">
    <div class="c-poster_inner">
        <h2 class="u-screen-reader-text">{{ poster.title }}</h2>

        <div class="c-wysiwyg || c-poster_description">{{ poster.description }}</div>

        <div class="c-poster_columns-text">
            {% include "@snippets/columns-text.twig" with {
                columns: poster.columns
            } only %}
        </div>

        <div class="c-poster_foot">
            <span>{{ poster.foot }}</span>
        </div>
    </div>

    {% include "@snippets/image.twig" with {
        classes: 'c-poster_image',
        modifiers: '-cover',
        src: poster.img.src,
        width: poster.img.width,
        height: poster.img.height,
    } only %}
</section>