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

Implemented much of polaroid-group galleries now. By default they are centered, image height maxes out at 85% so text should be visible practically always; "h" and "w" can be added for height and width (accept everything that CSS accepts) and if x, y is provided we use position:absolute. There is margin_bottom if all elements are absolute by your choice but I prefer making one centered and default (just chaning its wdth and height using "w" and "h", and others defined as absolute around it. This way the single centered element makes the width of the whole group. I just wanted to note somewhere this trick.

Browse Source
This commit is contained in:
Richard Thier 2020-03-06 17:09:40 +01:00
parent ebc1e96c76
commit 59d5ce18eb
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
prosopopee/themes/exposure/static/css/style.css
View File

@ -556,6 +556,7 @@ nav ul ul ul li {
.polaroid-line {
width: 70vw;
margin: auto;
position: relative; /* Needed when cust_pos becomes active and children are absolute positioned for this one */
}
a.polaroid {
@ -577,6 +578,7 @@ a.polaroid {
-o-transition: width 1s, height 1s,-o-transform 1s;
text-align: center;
overflow: hidden; /*Bullet-proofing*/
margin: auto;
}
/* Remove rotation and make it visible (z-index) */
@ -600,7 +602,7 @@ a.polaroid img {
display: block;
min-width: 10vw;
max-width: 100%;
max-height: 100%;
max-height: 85%; /* Never hide the text this way! */
margin: auto; /* Centers wth display: block */
}

8
prosopopee/themes/exposure/templates/sections/polaroid-group.html
View File

@ -36,10 +36,8 @@
{% set z = loop.index %}
{% endif %}
{% if image.w %}
{% set w = image.w %}
{% else %}
{% endif %}
{% set w = image.w %}
{% set h = image.h %}
{% set image = Image(image) %}
{{ image.copy() }}
@ -50,7 +48,7 @@
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
class="polaroid"
style="{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
{% if caption %}
<img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
<h5 class="polaroid__title">{{ caption }}</h5>