{% if promotion.link_url %}
    <a href="{{ promotion.link_url }}"><img src="{{ promotion.image.url }}" /></a>
{% else %}
    <img src="{{ promotion.image.url }}" />
{% endif %}

<!-- This is the bootstrap image Carousel with captions. All images are able to be wrapped in links. -->

<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
    <img alt="Picture no. 1" src="/media/images/promotions/oscar_img_1_4.jpg">
    <div class="carousel-caption">
        <h4>First Thumbnail label</h4>
        <p>Mauris condimentum sem nec erat iaculis sit amet cursus nulla euismod. Maecenas ligula mauris, ornare non pulvinar in, pretium nec dolor. Aliquam eget ornare ligula.</p>
    </div>
</div>
<div class="item">
    <img alt="Picture no. 2" src="/media/images/promotions/oscar_img_2_2.jpg">
    <div class="carousel-caption">
        <h4>Second Thumbnail label</h4>
        <p>Sed varius ultricies turpis, et viverra sem faucibus non. Vestibulum ut ligula nisi, eget pulvinar nibh. Donec vel ligula at mauris auctor dictum.</p>
    </div>
</div>
<div class="item">
    <img alt="Picture no. 3" src="/media/images/promotions/oscar_img_3_1.jpg">
    <div class="carousel-caption">
        <h4>Third Thumbnail label</h4>
        <p>Donec aliquet cursus diam a varius. Morbi augue lacus, luctus in lacinia nec, rutrum non velit. Donec rutrum sodales neque vitae pellentesque. Aenean a leo ipsum. Morbi tincidunt suscipit nibh vel hendrerit. Vivamus vestibulum posuere ipsum, ac venenatis metus mattis quis.</p>
    </div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>