2

I realize this may not be possible to do at all. But I thought I'd go ahead and ask anyway. I'm trying to set up a "hero" image of sorts for specific entries. Here is how I have it setup currently:

Series > Series Entries

Each series entry has a series artwork entry that belongs to it. Here is an example of the "hero" unit I'm trying to add in. What I'm trying to do, is have Craft dynamically add the image in based on what series comes up. However, I have it styled just right in my css and I'm using it as background-image: url(). Is it possible to have craft dynamically change it? I tried to using a for loop and putting it in hard coded in the html, but I lose the responsiveness framework of Foundation.

Edit: Code:

<section id="hero">
    <h1>{{ entry.title }}</h1> 
    {% endfor %}
</section>


    #hero {
        background: url(https://s3-us-west-2.amazonaws.com/bridge-     assets/photos/hero_image_blue.jpg) #074e68;
        background-repeat:no-repeat;
        background-size:cover;
        height: 200px;
        text-align: left;
        position: relative;
        width:100%;
        padding: 100px 20px 0 20px;    

        @media #{$medium-only} {        
            height:300px;
       }

       @media #{$large-up} {        
        height:300px;
       }
    }

Edit 2:

Here is my series page which lists all the series

{% extends "_layouts/_page" %}    

{% block content %}
  <section id="hero">
    <h1>Messages</h1>
  </section>

  <section class="series">
    <div class="row">    
      <ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1">
        {% for series in craft.entries.section('series').level(1).order('postDate desc') %}
          <li><a href="{{ series.url }}">

            {% for image in series.seriesArtwork %}    
                <div id="overlay"><img src="{{ image.getUrl('seriesThumbnail') }}" alt="Logo Image"></div>
                <div class="card">
                  <span class="series-title"> {{ series.title }}</span>
                  <span class="series-dates">{{ series.seriesDates }}</span></a> 
                </div>
            {% endfor %}

          </li>    
        {% endfor %}
      </ul>
    </div>
  </section>

  <a href="#"><img src="http://placehold.it/60x60" /></a>

{% endblock %}

and the css

section.series {
    position: relative;
    top: 20px;   
    display: inline;

    li {
        list-style: none;
        text-align: left;   
    }

    #overlay img {    
        width: 100%;
        vertical-align: top;
    }

    img {
        position: relative;
    }

   @media #{$medium-up}{

   }

    .card {
        padding: 10px;
        margin-top: -10px;

        span.series-dates {
            display: block;
            color: #0A9CC9;
            font-family: 'grota_sansregular';
            font-size: 14px;
            margin-top: -5px;
        }

        span.series-title {
            font-family: 'grota_sansregular';
            font-size: 24px;
            color: #333;
        }    
    }
}

And then when you click on a series (still work in progress, just trying to get image working first),

{% extends "_layouts/_page" %}   

{% block content %}
  {% for image in entry.seriesArtwork %}

    <section id="hero">
      <h1>{{ entry.title }}</h1> 
   {% endfor %}
    </section>

    <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
    {{ entry.body }}
    <p>Written by {{ entry.author }} on {{ entry.postDate|date('M d, Y') }}</p>
{% endblock %}
6
  • Can you add some more code examples from the template and CSS so we can see how it's setup? Doesn't sound to difficult. – naboovalley Dec 8 '14 at 21:51
  • I made a few edits for you to see some more of my code. I feel like I'm overcomplicating it. This may be more of a css question than a craft question at this point. I need to dynamically set the #hero background url based on what series i'm currently in. Does that make sense? – misteroptimist Dec 8 '14 at 22:09
  • When I add in "style="background: url({{ image.getURL() }})"> It gives me my image all wonky. It doesn't keep its responsiveness or other properties in the css. – misteroptimist Dec 8 '14 at 22:12
  • 3
    Try style="background-image:url({{ image.getURL() }})" instead, this means you would only overwrite the image and not any of the other background properties – Alec Ritson Dec 8 '14 at 22:25
  • Brilliant!!! Why does "background-image" work but "background" doesnt – misteroptimist Dec 9 '14 at 0:37
10

Adding this from the comments above as a solution:

Try style="background-image:url({{ image.getURL() }})" instead, this means you would only overwrite the image and not any of the other background properties

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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