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

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

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

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

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

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

@ -1,10 +1,20 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %} {% set image = Image(section.image) %}
{% set caption = section.text %} {% set caption = section.text %}
{{ image.copy()}} {{ image.copy() }}
{% endif %}
{% if section.background %} {% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};"> <div style="padding: 1px 0px;background: {{ section.background }};">
{% endif %} {% endif %}
<div class="bordered-picture baguette caption"> <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 %}> <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}"> <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
{% if caption %} {% if caption %}
@ -13,7 +23,9 @@
</div> </div>
{% endif %} {% endif %}
</a> </a>
</div> {% endif %}
{% if section.background %} </div>
{% if section.background %}
</div> </div>
{% endif %} {% endif %}

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

@ -19,7 +19,7 @@
{% if video %} {% if video %}
<div class="picture card-image"> <div class="picture card-image">
<img class="lazy" src="{{ video.generate_thumbnail("600") }}"> <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"> <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video> </video>
</div> </div>