I'm not sure why this isn't working as I set the variable outside the scope of the matrix block. The variable is working inside the matrix block, but not accessible outside of it. What am I missing?
Index template:
{% set slideImg = "" %}
{% block hero %}
{% for block in entry.hero %}
{% set slideImg = block.heroImg.first().url %}
{% endfor %}
{% endblock %}
{% block footerJs %}
<script>
$(function() {
$('#slide-1').backstretch('{{ slideImg }}');
)};
</script>
{% endblock %}
Update: Full Index template
{% extends "_layout" %}
{% set metaTitle = entry.seoTitle %}
{% set metaDescription = entry.seoDescription %}
{% set metaKeywords = entry.seoKeywords %}
{% set slideImg = "" %}
{% block hero %}
{% for block in entry.hero %}
<h2>{{ block.headline|raw }}</h2>
{% set slideImg = block.heroImg.first().url %}
{% set link1 = block.buttonLink1.first() %}
<a href="{{ link1.url }}" class="btn-gradient">{{ block.buttonLabel1 }}</a>
{% if block.buttonLabel2%}
{% set link2 = block.buttonLink1.first() %}
<a href="{{ link2.url }}" class="btn-gradient">{{ block.buttonLabel2 }}</a>
{% endif %}
{% endfor %}
{% endblock %}
{% block footerJs %}
<script>
$(function() {
$('#slide-1').backstretch('{{ slideImg }}');
)};
</script>
{% endblock %}
Update #2 _layout
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block head %}
<title>{% if metaTitle is defined %}{{ metaTitle }}{% else %}{{ entry.title }}{% endif %}{{siteName}}</title>
{% if metaDescription is defined %}<meta name="description" content="{{ metaDescription }}">{% endif %}
{% if metaKeywords is defined %}<meta name="keywords" content="{{ metaKeywords }}">{% endif %}
{% endblock %}
<meta name="author" content="@siebird">
<link rel="stylesheet" href="/assets/css/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Arvo:400,400italic|PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="header{% if craft.request.firstSegment == '' %} big{% endif %}">
<div id="slide{% if craft.request.firstSegment == '' %}-int{% endif %}" class="slide">
<div class="row">
<h1>{{ general.companyName}}</h1>
{% block hero %}
{% endblock %}
</div>
</div>
</div>
<div class="nav-bar">
<div class="buns">
<span>MENU</span>
<a href="#" class="hamburger nav-main">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="nav nav-main">
<li{% if craft.request.firstSegment == '' %} class="active"{% endif %}><a href="{{ siteUrl }}">Home</a></li>
<li{% if craft.request.firstSegment == 'who-we-are' %} class="active"{% endif %}><a href="{{ url('who-we-are') }}">Who We Are</a></li>
<li{% if craft.request.firstSegment == 'community' %} class="active"{% endif %}><a href="{{ url('community') }}">Community</a></li>
<li{% if craft.request.firstSegment == 'floorplans' %} class="active"{% endif %}><a href="{{ url('floorplans') }}">Floor Plans</a></li>
<li{% if craft.request.firstSegment == 'energy' %} class="active"{% endif %}><a href="{{ url('energy') }}">Energy</a></li>
<li{% if craft.request.firstSegment == 'gallery' %} class="active"{% endif %}><a href="{{ url('gallery') }}">Gallery</a></li>
<li{% if craft.request.firstSegment == 'agents' %} class="active"{% endif %}><a href="{{ url('agents') }}">Agents</a></li>
<li class="nav-btn"><a href="{{ url('visit') }}">Schedule a Visit</a></li>
</ul>
</div>
{% block main %}
{% endblock %}
<div class="footer">
<div class="row">
<div class="block-3">
<address>{{ general.address }}<br> <a href="{{ general.directions }}" target="_blank">Get Directions!</a></address>
</div>
<div class="block-3">
<p>Contact Us Today<br> <a href="tel:{{ general.phoneNumber }}" class="tel">{{ general.phoneNumber }}</a></p>
</div>
<div class="block-6">
<small>© {{ now.year }} {{ general.companyName }}. All Rights Reserved.<br> <a href="http://siebird.com">Website design & development by <em>Siebird</em></a></small>
<img src="assets/img/eho.png" class="pull-right" alt="equal housing opportunity" height="51">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/assets/js/plugins.js"></script>
<script src="/assets/js/application.js"></script>
{% block footerJs %}
{% endblock %}
{#
Google Analytics: change UA-XXXXX-X to be your site's ID.
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
#}
</body>
</html>
$('#slide-1').backstretch('{{ slideImg }}');
The way your code currently is, theslideImg
in the footerJs block should be equal to the firstheroImg
URL of the last Matrix block inentry.hero
.{{ slideImg }}
within the script tag does not parse anything. If I put it within the matrixfor
loop it parse the correct file path. To add context, the matrix can only have one row