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

video index material

Browse Source
This commit is contained in:
Adrien Beudin 2016-05-06 14:16:43 +02:00
parent feed72fa26
commit fd3eca33e8
8 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
prosopopee/themes/exposure/templates/index.html
View File

@ -35,6 +35,7 @@
<video autoplay loop muted class="fillWidth"> <video autoplay loop muted class="fillWidth">
<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>
<img class="full-picture" src="{{ video.generate_thumbnail("900") }}">
</div> </div>
{% set video = "" %} {% set video = "" %}
{% else %} {% else %}

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

@ -151,12 +151,10 @@ div#bg-section {
margin-top: 20px margin-top: 20px
} }
.parallax video { video.fillWidth {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
bottom: 0; bottom: 0;
}
.parallax video.fillWidth {
width: 100%; width: 100%;
} }

125
prosopopee/themes/material/templates/index.html
View File

@ -8,70 +8,75 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{% for galleries_line in galleries|reverse|batch(3)|reverse %} {% for galleries_line in galleries|reverse|batch(2)|reverse %}
{% for gallery in galleries_line|reverse %} {% for gallery in galleries_line|reverse %}
{% if loop.length is divisibleby 2 %} <div class="col s12 m12 l{{ 12 // galleries_line|length }}">
<div class="col s12 m12 l6"> <a href="{{ gallery.link }}">
{% else %} <div class="card hoverable blue-grey lighten-5">
{% if loop.last %} <div class="card-image">
<div class="col s12 m12 l6"> {% if gallery.cover_type == "video" %}
{% else %} {% set video = Video(gallery.cover) %}
<div class="col s12 m12 l6"> {{ video.copy() }}
{% endif %} {% else %}
{% endif %} {% set cover = Image(gallery.cover) %}
<a href="{{ gallery.link }}"> {{ cover.copy() }}
<div class="card hoverable blue-grey lighten-5"> {% endif %}
<div class="card-image"> {% if video %}
{% set cover = Image(gallery.cover) %} <img class="responsive-img" src="{{ video.generate_thumbnail("900") }}">
{{ cover.copy() }} <video autoplay loop muted class="fillWidth">
<img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}"> <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}"> </video>
<span class="card-title truncate">{{ gallery.title }} {% set video = "" %}
{% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %} {% else %}
</span> <img src="{{ cover.generate_thumbnail("x900") }}">
</div> {% endif %}
<div class="card-action">
<div class="left">
<a href="{{ gallery.link }}">Read more..</a>
</div>
{% if gallery.tags or gallery.date %}
<div class="right">
{% if gallery.tags %}{% for tag in gallery.tags -%}
<div class="chip">
<div class="image">
<img class="grey">
<div class="tag white-text">
{{ tag[0].capitalize() }}
</div>
</img>
{{ tag }}
</div>
</div>
{% endfor -%}
{% endif %}
{% if gallery.date %}
<div class="chip">
{{ gallery.date.strftime("%d %B %Y") }}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script> <span class="card-title truncate">{{ gallery.title }}
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script> {% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
<script type="text/javascript" charset="utf-8"> </span>
</div>
<div class="card-action">
<div class="left">
<a href="{{ gallery.link }}">Read more..</a>
</div>
{% if gallery.tags or gallery.date %}
<div class="right">
{% if gallery.tags %}{% for tag in gallery.tags -%}
<div class="chip">
<div class="image">
<img class="grey">
<div class="tag white-text">
{{ tag[0].capitalize() }}
</div>
</img>
{{ tag }}
</div>
</div>
{% endfor -%}
{% endif %}
{% if gallery.date %}
<div class="chip">
{{ gallery.date.strftime("%d %B %Y") }}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</a>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('.button-collapse').sideNav(); $('.button-collapse').sideNav();
$(document).ready(function(){ $(document).ready(function(){
$('.scrollspy').scrollSpy(); $('.scrollspy').scrollSpy();
}); });
</script> </script>
{% endblock %} {% endblock %}

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

@ -7,25 +7,25 @@
{% endif %} {% 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 %} {% if video %}
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}"> <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted=""> <video class="lazy" poster="{{ video.generate_thumbnail("2000") }}" 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>
{% else %} {% 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 lazy" data-original="{{ image.generate_thumbnail("x2000") }}" alt="">
{% if caption %} {% if caption %}
<div class="caption__overlay card-panel center"> <div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5> <h5 class="black-white">{{ caption }}</h5>
</div> </div>
{% endif %} {% endif %}
</a> </a>
{% endif %} {% endif %}
</div> </div>
{% if section.background %} {% if section.background %}
</div> </div>
{% endif %} {% endif %}

2
prosopopee/themes/material/templates/sections/html.html
View File

@ -1,5 +1,5 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<section class="html"> <section class="html">
<center> <center>

2
prosopopee/themes/material/templates/sections/paragraph.html
View File

@ -1,5 +1,5 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<div class="container"> <div class="container">
{% if section.title %} {% if section.title %}

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

@ -18,11 +18,12 @@
<div class="card"> <div class="card">
{% 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" data-original="{{ 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>
{% set video = "" %}
{% else %} {% else %}
<div class="picture card-image caption"> <div class="picture card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}> <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>

2
prosopopee/themes/material/templates/sections/text.html
View File

@ -1,5 +1,5 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<div class="container"> <div class="container">
<p class="flow-text"> <p class="flow-text">