Migrate photos package to new template

parent fb65c313
......@@ -41,21 +41,6 @@
}
#events-index {
.section-title {
.btn {
position: absolute;
top: 15px;
&.btn-first {
right: 0;
}
&.btn-second {
right: 50px
}
}
}
.fc-bootstrap4 .fc-today {
background: #fff9fc;
}
......
/* Solving this with dynamic a data attribute (i.e. attr(data-rotation)) does not work, as that's a string. */
img.rotate90 {
transform: rotate(90deg);
}
img.rotate180 {
transform: rotate(180deg);
}
img.rotate270 {
transform: rotate(270deg);
}
img.grayscale {
filter: grayscale(1);
}
#photos-index, #photos-album {
.rotate90 {
img {
transform: rotate(90deg);
}
}
.rotate180 {
img {
transform: rotate(180deg);
}
}
.rotate270 {
img {
transform: rotate(270deg);
}
}
.grayscale {
img {
filter: grayscale(1);
}
}
.thimbus-page .gallery .gallery-album .post-overlay.grayscale {
background-color: rgba(88, 88, 88, 0.6);
.grid-item.grayscale {
.overlay {
background-color: rgba(88, 88, 88, 0.6);
}
}
}
$(function() {
$(".photo-card a").fancybox({
helpers: {
title : {
type : 'float'
}
},
afterShow: function() {
var downloadUrl = $(this.element).attr('data-download');
if(downloadUrl != undefined) {
$('<a class="fancybox-download" href="' + downloadUrl + '"></a>').appendTo(this.outer);
}
},
padding: 0
});
});
{% extends 'old-base.html' %}
{% load staticfiles i18n thumbnail shared_thumbnail compress %}
{% extends 'base.html' %}
{% load staticfiles i18n compress photos_cards %}
{% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "photos/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock %}
{% block body %}
<h1>{{ album.title }}
<span class="title-meta clearfix">
<span><a href="{% url 'photos:album-download' album.slug %}" class="download"></a></span>
<span><a href="{% url 'photos:index' %}" class="back"></a></span>
</span>
<span class="title-meta clearfix">
</h1>
<h2>{{ album.date|date:"d-m-Y" }}</h2>
{% if album.shareable %}
<p class="tcenter">
{% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br>
<small><a href="{% url 'photos:shared_album' album.slug album.access_token %}">
{{ request.get_host }}{% url 'photos:shared_album' album.slug album.access_token %}
</a></small>
</p>
{% endif %}
<div class="gallery">
<ul class="gallery-photos row">
{% for photo in photos %}
<li class="post gallery-photo span3 has-overlay">
<a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery"
{% if album.shareable %}
data-download="{% url 'photos:shared-download' album.slug album.access_token photo %}" href="{% shared_thumbnail album.slug album.access_token photo.file '1024x768' fit=False %}"
{% else %}
data-download="{% url 'photos:download' photo %}" href="{% thumbnail photo.file '1024x768' fit=False %}"
{% endif %}>
<span class="post-inner">
<span class="inner-img">
<section id="photos-album" class="page-section">
<div class="container">
<h1 class="text-center section-title">
{{ album.title }}
<a href="{% url 'photos:album-download' album.slug %}"
target="_blank"
class="btn btn-primary btn-first"
>
<i class="fas fa-download"></i>
</a>
</h1>
<h2 class="text-center mt-2">{{ album.date|date:"d-m-Y" }}</h2>
{% if album.shareable %}
<img class="rotate{{ photo.rotation }}" src="{% shared_thumbnail album.slug album.access_token photo.file '220x220' %}" alt="" />
{% else %}
<img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
<p class="text-center">
{% trans "Note: This album can be shared with people outside the association by sending them the following link:" %}<br>
<small><a href="{% url 'photos:shared_album' album.slug album.access_token %}">
{{ request.get_host }}{% url 'photos:shared_album' album.slug album.access_token %}
</a></small>
</p>
{% endif %}
</span>
<span class="post-overlay">
</span>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="row">
{% for photo in photos %}
<div class="col-4 col-md-3 my-3">
{% photo_card photo %}
</div>
{% endfor %}
</div>
</div>
</section>
{% endblock %}
{% block js_body %}
{{ block.super }}
{% compress js %}
<script type="text/javascript" src="{% static "photos/js/main.js" %}"></script>
{% endcompress %}
{% endblock %}
{% extends 'old-base.html' %}
{% load i18n thumbnail staticfiles compress %}
{% extends 'base.html' %}
{% load i18n staticfiles compress photos_cards %}
{% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block opengraph_title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static 'photos/css/style.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock header_image%}
{% block header_image %}{% static "img/headers/fixed/banner7.jpg" %}{% endblock header_image %}
{% block body %}
<h1>{% trans "Photos" %}</h1>
<p class="tcenter">
{% trans 'Interested in a full resolution version of a photo? Send your request to <a href="mailto:media@thalia.nu">media@thalia.nu</a>.' %}
</p>
<div class="gallery">
<ul class="gallery-albums row">
{% for album in albums %}
<li class="post gallery-album span3 has-overlay">
{% if album.accessible %}
<a href="{% url 'photos:album' album.slug %}">
{% endif %}
<span class="post-inner">
<span class="inner-img">
{% if album.cover is not None %}
<img class="rotate{{ album.cover.rotation }} {{ album.accessible|yesno:",grayscale" }}" src="{% thumbnail album.cover.file '220x220' %}" alt=""/>
{% endif %}
</span>
<span class="post-overlay {{ album.accessible|yesno:",grayscale" }}">
<span class="post-overlay-meta">
<h2>{{ album.title }}</h2>
<p>{{ album.date|date:"d-m-Y" }}</p>
</span>
</span>
</span>
{% if album.accessible %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="clearfix"></div>
<div class="pagination-wrapper row">
<ul class="pagination">
{% if albums.has_previous %}
<li>
<a class="page-prev" href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}">Previous</a>
</li>
{% endif %}
{% for page in page_range %}
{% if page == albums.number %}
<li class="current">
<span class="page-number">
{{ page }}
</span>
</li>
{% else %}
<li>
<a href="{% url 'photos:index' %}?page={{ page }}" class="page-number button">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
{% if albums.has_next %}
<li>
<a class="page-next" href="{% url 'photos:index' %}?page={{ albums.next_page_number }}">{% trans "Next" %}</a>
</li>
{% endif %}
</ul>
</div>
<section id="photos-index" class="page-section">
<div class="container">
<h1 class="text-center section-title">{% trans "Photos" %}</h1>
<p class="text-center">
{% trans 'Interested in a full resolution version of a photo? Send your request to <a href="mailto:media@thalia.nu">media@thalia.nu</a>.' %}
</p>
<div class="row">
{% for album in albums %}
<div class="col-4 col-md-3 my-3">
{% album_card album %}
</div>
{% endfor %}
</div>
<nav>
<ul class="pagination justify-content-center mt-4">
{% if albums.has_previous %}
<li class="page-item">
<a class="page-link"
href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-directory">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}
{% for page in page_range %}
<li class="page-item{% if page == albums.number %} active{% endif %}">
<a class="page-link" href="{% url 'photos:index' %}?page={{ page }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}#albums-director">{{ page }}
</a>
</li>
{% endfor %}
{% if albums.has_next %}
<li class="page-item">
<a class="page-link"
href="{% url 'photos:index' %}?page={{ albums.next_page_number }}{% if filter %}&filter={{ filter }}{% endif %}{% if keywords %}&keywords={{ keys }}{% endif %}">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</section>
{% endblock %}
from django import template
from django.conf import settings
from django.template.defaultfilters import date
from django.urls import reverse
from photos.templatetags.shared_thumbnail import shared_thumbnail
from thaliawebsite.templatetags.grid_item import grid_item
from utils.templatetags.thumbnail import thumbnail
register = template.Library()
@register.inclusion_tag('includes/grid_item.html')
def album_card(album):
class_name = 'album-card'
image_url = ''
if album.cover:
image_url = thumbnail(album.cover.file,
settings.THUMBNAIL_SIZES['medium'])
if album.cover.rotation > 0:
class_name += ' rotate{}'.format(album.cover.rotation)
if not album.accessible:
class_name += ' grayscale'
return grid_item(
title=album.title,
meta_text='<p>{}</p>'.format(date(album.date, 'Y-m-d')),
url=album.get_absolute_url,
image_url=image_url,
class_name=class_name,
)
@register.inclusion_tag('includes/grid_item.html')
def photo_card(photo):
class_name = 'photo-card rotate{}'.format(photo.rotation)
anchor_attrs = 'data-fancybox-rotation="{}" rel="gallery"'.format(
photo.rotation)
if photo.album.shareable:
anchor_attrs += ' data-download={}'.format(
reverse('photos:shared-download',
args=[photo.album.slug, photo.album.access_token, photo]))
else:
anchor_attrs += ' data-download={}'.format(
reverse('photos:download', args=[photo]))
image_url = thumbnail(photo.file, settings.THUMBNAIL_SIZES['medium'])
if photo.album.shareable:
image_url = shared_thumbnail(photo.album.slug,
photo.album.access_token, photo.file,
settings.THUMBNAIL_SIZES['medium'])
if photo.rotation > 0:
class_name += ' rotate{}'.format(photo.rotation)
return grid_item(
title='',
url=thumbnail(photo.file, settings.THUMBNAIL_SIZES['large'],
fit=False),
image_url=image_url,
class_name=class_name,
anchor_attrs=anchor_attrs
)
......@@ -103,6 +103,7 @@
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
}
......@@ -135,6 +136,19 @@
width: 80px;
top: -1px;
}
.btn {
position: absolute;
top: 15px;
&.btn-first {
right: 0;
}
&.btn-second {
right: 50px
}
}
}
}
}
......
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background-color: #000;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../images/fancybox/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
background:url('../images/misc/icon_close.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-download {
background:url('../images/misc/icon_download.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 72px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-close:hover, .fancybox-download:hover {
background-position: 0 -32px;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../images/fancybox/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
background: url('../images/misc/slider_large_next_prev.png') 0 0 no-repeat;
background-size: 64px 64px;
position: absolute;
top: 50%;
width: 32px;
height: 32px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 20px;
background-position: 0 0;
}
.fancybox-prev span:hover {
background-position: -32px 0;
}
.fancybox-next span {
right: 20px;
background-position: 0 -32px;
}
.fancybox-next span:hover {
background-position: -32px -32px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: rgba(255,255,255,0.7);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;