fix some stuff on material theme
This commit is contained in:
Adrien Beudin
parent
0805c8183b
commit
31b0da1a2e
32
README.md
32
README.md
@ -211,7 +211,6 @@ image:
|
||||
auto-orient: False
|
||||
```
|
||||
|
||||
|
||||
### Different kind of sections
|
||||
|
||||
A gallery is composed of a succession of sections as you can see on this [wonderfully
|
||||
@ -250,6 +249,7 @@ With text:
|
||||
title: Big picture title
|
||||
sub_title: Some text
|
||||
date: 2016-01-15
|
||||
date_end: 2016-01-24 (Optional)
|
||||
```
|
||||
|
||||
Without text:
|
||||
@ -344,6 +344,36 @@ How to use it:
|
||||
image: 7.jpg
|
||||
```
|
||||
|
||||
### Images caption
|
||||
|
||||
|
||||
Prosopopée has a support of caption in images, you can use it on bordered-picture and pictures-group.
|
||||
|
||||
Exemple on bordered-picture :
|
||||
|
||||
```yaml
|
||||
- type: bordered-picture
|
||||
image: another_picture.jpg
|
||||
text: This is a caption
|
||||
```
|
||||
|
||||
And on pictures-group
|
||||
|
||||
```yaml
|
||||
- type: pictures-group
|
||||
images:
|
||||
-
|
||||
- name: image1.jpg
|
||||
text: This is a caption
|
||||
- image2.jpg
|
||||
- image3.jpg
|
||||
-
|
||||
- image4.jpg
|
||||
- image5.jpg
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Example
|
||||
|
||||
As a recap, here is how the files of the example gallery are organised:
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<h2>{{ gallery.title }}</h2>
|
||||
{% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
|
||||
{% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
|
||||
{% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span>{{ tag }}</span> {% endfor -%}</div>{% endif %}
|
||||
{% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% set cover = Image(gallery.cover) %}
|
||||
|
||||
@ -61,10 +61,6 @@ main {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.bordered-picture .caption__overlay {
|
||||
margin-left: 11.5% !important;
|
||||
margin-right: 11.5% !important;
|
||||
}
|
||||
|
||||
.caption .card-panel {
|
||||
margin: 0;
|
||||
@ -79,3 +75,40 @@ main {
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
.bordered-picture .caption__overlay {
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
.pictures-line {
|
||||
min-width: 77%;
|
||||
width: 77%;
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.pictures-line .picture img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.small-card {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.chip .tag {
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
font-size: 22px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-action .right {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
@ -9,15 +9,14 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
|
||||
<div class="galleries-line covers-{{ galleries_line|length }}">
|
||||
{% for gallery in galleries_line|reverse %}
|
||||
{% if loop.length is divisibleby 2 %}
|
||||
<div class="col m6 l6">
|
||||
<div class="col s12 m12 l6">
|
||||
{% else %}
|
||||
{% if loop.last %}
|
||||
<div class="col m12 l12">
|
||||
<div class="col s12 m12 l12">
|
||||
{% else %}
|
||||
<div class="col m6 l6">
|
||||
<div class="col s12 m12 l6">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<a href="{{ gallery.link }}">
|
||||
@ -25,16 +24,38 @@
|
||||
<div class="card-image">
|
||||
{% set cover = Image(gallery.cover) %}
|
||||
{{ cover.copy() }}
|
||||
<img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
|
||||
<span class="card-title truncate">{{ gallery.title }}</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-title truncate">{% if gallery.sub_title %}{{ gallery.sub_title }}{% endif %}</span>
|
||||
{% if gallery.tags %}{% for tag in gallery.tags -%}<div class="chip right"><i class="mdi-action-label"></i> {{ tag }} </div>{% endfor -%}{% endif %}
|
||||
<img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}">
|
||||
<img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
|
||||
<span class="card-title truncate">{{ gallery.title }}
|
||||
{% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<div class="left">
|
||||
<a href="{{ gallery.link }}">Read more..</a>
|
||||
{% if gallery.date %}<div class="right">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
|
||||
</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>
|
||||
@ -43,7 +64,6 @@
|
||||
</div>
|
||||
{% 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>
|
||||
|
||||
@ -1,29 +1,27 @@
|
||||
<div class="container">
|
||||
<div class="row baguette">
|
||||
<div class="pictures-group baguette">
|
||||
<div class="row">
|
||||
{% for line in section.images %}
|
||||
<div class="pictures-line">
|
||||
{% 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="col">
|
||||
<div class="card">
|
||||
<div class="card-image caption">
|
||||
<div class="picture card-image caption">
|
||||
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
|
||||
<img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
|
||||
<img src="{{ image.generate_thumbnail("x600") }}">
|
||||
{% if caption %}
|
||||
<div class="caption__overlay card-panel center">
|
||||
<h5 class="black-white">{{ caption }}</h5>
|
||||
<div class="caption__overlay center">
|
||||
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if not loop.last %}
|
||||
<div class="separator"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user