picture group responsible

This commit is contained in:
Adrien Beudin 2016-05-18 17:43:43 +02:00
parent 112d0f13b7
commit 530a524373
2 changed files with 42 additions and 34 deletions

View File

@ -401,3 +401,12 @@ a.google {
.video-container video.fillWidth {
width: 100%;
}
@media only screen and (max-device-width : 992px) {
.pictures-line {
display: inherit;
}
}

View File

@ -1,46 +1,45 @@
{% if section.background %}
<div id="bg-section" style="background: {{ section.background }};">
{% endif %}
<div class="pictures-group baguette">
<div class="container baguette">
<div class="row">
{% for line in section.images %}
<div class="pictures-line">
{% for image in line %}
{% if image.type == "video" %}
{% set video = Video(image) %}
{{ video.copy() }}
{% else %}
{% set caption = image.text %}
{% set image = Image(image) %}
{{ image.copy() }}
{% endif %}
<div class="col">
<div class="card">
{% if video %}
<div class="picture card-image">
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
</div>
{% set video = "" %}
{% else %}
<div class="picture card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
{% if caption %}
<div class="caption__overlay center">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>
{% endif %}
{% set number = line|length %}
{% for image in line %}
{% if image.type == "video" %}
{% set video = Video(image) %}
{{ video.copy() }}
{% else %}
{% set caption = image.text %}
{% set image = Image(image) %}
{{ image.copy() }}
{% endif %}
<div class="col s12 m{{24 // number }} l{{12 // number }}">
<div class="card">
{% if video %}
<div class="picture card-image">
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
</div>
{% set video = "" %}
{% else %}
<div class="picture card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
{% if caption %}
<div class="caption__overlay center">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% if section.background %}