Full-width wrapper (that maintains DRY)

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)?

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.

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?

Sure, was just on my phone earlier :smiley:

So in app.blade.php I have


    <section class="wrap">
        // Lots of other elements inside this section, omitted for clarity


Then in template parts like page.blade.php


  @while(have_posts()) @php(the_post())


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.


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