1

I'm super new to Craft and was wondering if someone could help.

I'm trying to set up a hero banner. So there will be a full-width image, on top of this will be the heading text and a CTA button.

I'd like the background to be editable by the user so have set up a field for this called 'hero image'. This is how it looks now but it doesn't seem to be working:

<div class="hero-image" style="background-image: url('{{heroImage}}');">
    <div id="home">
        <div class="hero-overlay">
            <header id="site-header">  
                <div class="main-message">  
                    <div class="container">
                        <p class="description-image">
                            {{ entry.description }}
                        </p>

                        <a class="btn btn-cta-primary btn-cta-blue" href="{{entry.buttonUrl}}" role="button">{{ entry.buttonText }}</a>
                    </div>
                </div>
            </header>
        </div>
    </div>
</div>

I'm so confused!

Any help would be greatly appreciated!

1
  • It didn't seem to paste in my code? <div class="hero-image" style="background-image: url('{{heroImage}}');"> <div id="home"> <div class="hero-overlay"> <header id="site-header"> <div class="main-message"> <div class="container"> <p class="description-image"> {{entry.description}} </p> <a class="btn btn-cta-primary btn-cta-blue" href="{{entry.buttonUrl}}" role="button">{{entry.buttonText}}</a> </div> </div> </header> </div> </div> </div>
    – Chris
    Sep 20, 2017 at 16:54

1 Answer 1

1

I see a few issues with your code. (1) Unless you set heroImage as a variable somewhere, then you need to change heroImage to entry.heroImage. (2) But, an asset field returns an assetModel, not the actual image. To access the image, you need to use .first() to select the first asset in the assetModel. (3) Then you need to access the URL on that image, by using url.

This code should work:

{% set heroImage = entry.heroImage.first() %}

<div class="hero-image" style="background-image: url('{{ heroImage.url() }}');">
    <div id="home">
        <div class="hero-overlay">
            <header id="site-header">
                <div class="main-message">
                    <div class="container">
                        <p class="description-image"> {{ entry.description }}</p>
                        <a class="btn btn-cta-primary btn-cta-blue" href="{{ entry.buttonUrl }}" role="button">{{ entry.buttonText }}</a>
                    </div>
                </div>
            </header>
        </div>
    </div>
</div>
2
  • Thank you! I just tried it and it says "Internal Server Error The block 'content' has already been defined line 2."
    – Chris
    Sep 21, 2017 at 8:35
  • @Chris as the code I posted nowhere references a content block, that probably has to do with something else in that template.
    – Jake Dohm
    Sep 21, 2017 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.