Full-width image just for index page

I want a full-width image to be displayed under the navigation for just the index page.

Here is my markup for the master template:

<body>
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    <div class="container">
        {+body /}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

However, any content in the index page will be limited in width by the container from the master template. If I add the full-width content in the template, then it will appear in all my other pages as well.

What is the best way to work around this?

Solution

You can achieve this with blocks. Take a look at the relevant section (Blocks and Inline Partials) in the dust.js guide.

You can specify blocks in your master template that can be optionally overridden in your calling templates

A block may be self-closing ({+block/}), in which case it is not displayed unless a calling template overrides the content of the block

You are already using the syntax for your {+body/} definition.

tl;dr

So in your master template you could do something like (note image block on 5th line):

<body>
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    {+image/}                
    <div class="container">
        {+body/}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

and in your index template provide the image override (below), leaving it out of your other templates:

{<image}
  ...your image
{/image}
{<body}
  ...your body
{/body}