Full-width wrapper (that maintains DRY)

sage
1

I’ve read a few of the other posts while doing a search for this problem, but didn’t find an adequate solution. I’m running Sage 9, and trying to build pages that sometimes (but not always) use full-width content areas.

As an example, I have a front-page template that will use some full-width sections with background images/colors, and the header and footer element both need to span the full-width of the page, while their interior elements (logo, nav, etc.) remain within a container element; whereas blog pages will only use the full-width element on the hero image (using the post thumbnail), but all other page elements (including the main content area and sidebar), remain within a fixed-width container.

On previous projects (using Sage 8), I did some tomfoolery with re-tooling the wrappers in the template files, but this ended with me repeating a lot of code in those files.

Is there currently a best (DRY) practice for implementing full-width sections (with inner content wrapped in a .container class)?

2

I create a section above and below the container, @prewrap and @postwrap. Then in your templates you can define what goes above, inside and below the container.

3

Thanks Simeon. I just started working in Blade (most of my previous projects were on Sage 8). Do you mind posting an example so I can wrap my head around it in practice?

4

Sure, was just on my phone earlier :smiley:

So in app.blade.php I have

    @yield('pre-wrap')

    <section class="wrap">
        @yield('content')
        // Lots of other elements inside this section, omitted for clarity
    </section>

    @yield('post-wrap')

Then in template parts like page.blade.php

@section('pre-wrap')
  @include('partials.featured-image')
@endsection

@section('content')
  @while(have_posts()) @php(the_post())
    @include('partials.content-page')
  @endwhile
@endsection

@section('post-wrap')
  @include('partials.content-page-children')
@endsection

I think this functionality is one of the main/only things I like about Sage 9. Being able to inject content into different parts of the page from one template part.

5 Likes
5

This is a great solution, Simeon. Thanks so much for the example. Makes a lot of sense. Simple. Elegant.