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

add caption on exposure theme

Browse Source
This commit is contained in:
Adrien Beudin 2016-02-26 19:52:14 +01:00
parent 283bfd6804
commit dbdd257c52
7 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
{{ image.copy()}}
<section class="bordered-picture baguette">
<div class="caption">
<a href="{{ image }}">
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
<img src="{{ image }}">
{% if caption %}
<div class="caption__overlay">

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

@ -6,7 +6,7 @@
{% set image = Image(image) %}
{{ image.copy() }}
<div class="picture caption">
<a href="{{ image }}">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img src="{{ image.generate_thumbnail("x600") }}">
{% if caption %}
<div class="caption__overlay">

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

@ -31,3 +31,44 @@ main {
text-align: center;
width: 100%;
}
.caption {
position: relative;
overflow: hidden;
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
background-color: rgba(0, 0, 0, .4);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
transform: translateY(101%);
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
transform: translateY(0);
}
.bordered-picture .caption__overlay {
margin-left: 11.5%;
margin-right: 11.5%;
}
.caption .card-panel {
margin: 0;
padding: 1px;
text-align: center;
}

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

@ -25,7 +25,7 @@
<div class="card-image">
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<img src="{{ cover.generate_thumbnail("x800") }}">
<img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
<span class="card-title truncate">{{ gallery.title }}</span>
</div>
<div class="card-content">

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

@ -1,14 +1,13 @@
<div class="container baguette hide-on-med-and-down">
<div class="container baguette caption">
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy()}}
<a href="{{ image }}">
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
</a>
</div>
<div class="container baguette hide-on-large-only">
{% set image = Image(section.image) %}
{{ image.copy()}}
<a href="{{ image.generate_thumbnail("x1024") }}">
<img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
{% if caption %}
<div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>

3
prosopopee/themes/material/templates/sections/full-picture.html
View File

@ -1,8 +1,7 @@
{% set image = Image(section.image) %}
{{ image.copy() }}
<div class="parallax-container z-depth-1 valign-wrapper">
<div class="parallax hide-on-med-and-down"><img src="{{ image }}"></div>
<div class="parallax hide-on-large-only"><img src="{{ image.generate_thumbnail("x1024") }}"></div>
<div class="parallax"><img src="{{ image }}"></div>
{% if section.text %}
<div class="parallax-tittle white-text">
<h1>{{ section.text.title }}</h1>

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

@ -2,19 +2,20 @@
<div class="row baguette">
{% for line in section.images %}
{% for image in line %}
{% set caption = image.text %}
{% set image = Image(image) %}
{{ image.copy() }}
{% set plop = 12 // loop.length %}
<div class="col m{{ plop }} l{{ plop }}">
<div class="card">
<div class="card-image hide-on-med-and-down">
<a href="{{ image }}">
<div class="card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
</a>
{% if caption %}
<div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5>
</div>
<div class="card-image hide-on-large-only">
<a href="{{ image.generate_thumbnail("x1024") }}">
<img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
{% endif %}
</a>
</div>
</div>