prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bordered video

Browse Source
This commit is contained in:
Adrien Beudin 2016-04-30 10:24:37 +02:00
parent 6a6b3e8925
commit 5fd7b89ca9
5 changed files with 66 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
prosopopee/themes/exposure/static/css/style-page.css
View File

@ -338,6 +338,7 @@ a.google {
color: #333;
}
.bordered-picture video,
.picture video {
position: absolute;
top: 0;
@ -347,6 +348,12 @@ a.google {
height: auto;
}
.bordered-picture video {
width: 77%;
margin-left: 11.5%;
margin-right: 11.5%;
}
.bg-section {
padding: 1px 0px;
}

41
prosopopee/themes/exposure/templates/sections/bordered-picture.html
View File

@ -1,22 +1,33 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy()}}
{% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};">
{{ image.copy() }}
{% endif %}
<section class="bordered-picture baguette">
<div class="caption">
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
<img src="{{ image }}">
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</div>
</a>
</section>
{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
<section class="bordered-picture baguette">
{% if video %}
<img class="lazy" src="{{ 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>
{% else %}
<div class="caption">
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
<img class="lazy" data-original="{{ image }}">
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</div>
</a>
{% endif %}
</section>
{% if section.background %}
</div>
{% endif %}

7
prosopopee/themes/material/static/css/styles.css
View File

@ -127,6 +127,7 @@ main {
height: 100%;
}
.bordered-picture video,
.picture video {
position: absolute;
top: 0;
@ -136,6 +137,12 @@ main {
height: auto;
}
.bordered-picture video {
width: 77%;
margin-left: 11.5%;
margin-right: 11.5%;
}
div#bg-section {
padding: 1px 0px;
}

38
prosopopee/themes/material/templates/sections/bordered-picture.html
View File

@ -1,19 +1,31 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy()}}
{{ image.copy() }}
{% endif %}
{% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};">
{% endif %}
<div class="bordered-picture baguette caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
{% if caption %}
<div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>
{% if section.background %}
{% endif %}
<div class="bordered-picture baguette caption">
{% if video %}
<img class="lazy" src="{{ 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>
{% else %}
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
{% if caption %}
<div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5>
</div>
{% endif %}
</a>
{% endif %}
</div>
{% if section.background %}
</div>
{% endif %}

2
prosopopee/themes/material/templates/sections/pictures-group.html
View File

@ -19,7 +19,7 @@
{% if video %}
<div class="picture card-image">
<img class="lazy" src="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<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>