Unverified Commit 51266987 authored by Joost Rijneveld's avatar Joost Rijneveld
Browse files

Rotate photos using CSS

This modifies the fancybox plugin to support the rotation.
To achieve this properly, we switch to using the non-packed version.
Future improvements might include automatically minifying JS,
as well as upstreaming this fix. However, the Fancybox repository
seems inactive and has numerous unanswered pull requests.
parent 4f3eb46b
# -*- coding: utf-8 -*-
# Generated by Django 1.10 on 2016-08-09 16:56
from __future__ import unicode_literals
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('photos', '0002_auto_20160809_1755'),
]
operations = [
migrations.AlterField(
model_name='photo',
name='rotation',
field=models.IntegerField(choices=[(0, 0), (90, 90), (180, 180), (270, 270)], default=0, help_text='This does not modify the original image file.'),
),
]
......@@ -16,7 +16,11 @@ def photo_uploadto(instance, filename):
class Photo(models.Model):
album = models.ForeignKey('Album', on_delete=models.CASCADE)
file = models.ImageField(upload_to=photo_uploadto)
rotation = models.IntegerField(default=0)
rotation = models.IntegerField(
default=0,
choices=((x, x) for x in (0, 90, 180, 270)),
help_text="This does not modify the original image file.",
)
def __str__(self):
return self.file.name
......
/* 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);
}
......@@ -3,6 +3,11 @@
{% block page_title %}{% trans "Photos" %}{% endblock %}
{% block css_head %}
{{ block.super }}
<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
<h1>{{ album.title }}</h1>
<h2>{{ album.date|date:"d-m-Y" }}</h2>
......@@ -10,10 +15,10 @@
<ul class="gallery-photos row">
{% for photo in album.photo_set.all %}
<li class="post gallery-photo span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
<a class="gallery-box" rel="gallery" data-download="{% url 'photos:download' photo.file %}" href="{% thumbnail photo.file '1024x768' fit=False %}">
<a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery" data-download="{% url 'photos:download' photo.file %}" href="{% thumbnail photo.file '1024x768' fit=False %}">
<span class="post-inner">
<span class="inner-img">
<img src="{% thumbnail photo.file '220x220' %}" alt="" />
<img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
</span>
<span class="post-overlay">
</span>
......
{% extends 'base.html' %}
{% load i18n thumbnail %}
{% load i18n thumbnail staticfiles %}
{% block page_title %}{% trans "Photos" %}{% endblock %}
{% block css_head %}
{{ block.super }}
<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
<h1>{% trans "Photos" %}</h1>
......@@ -13,7 +18,7 @@
<a href="{% url 'photos:album' album.slug %}">
<span class="post-inner">
<span class="inner-img">
<img src="{% thumbnail album.cover.file '220x220' %}" alt="" />
<img class="rotate{{ album.cover.rotation }}" src="{% thumbnail album.cover.file '220x220' %}" alt="" />
</span>
<span class="post-overlay">
<span class="post-overlay-meta">
......
......@@ -132,13 +132,14 @@
index : 0,
type : null,
href : null,
rotation : 0,
content : null,
title : null,
// HTML templates
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
image : '<img class="fancybox-image" src="{href}" data-rotation="{rotation}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
......@@ -262,6 +263,7 @@
obj = {
href : element.data('fancybox-href') || element.attr('href'),
title : element.data('fancybox-title') || element.attr('title'),
rotation : element.data('fancybox-rotation') || element.attr('rotation'),
isDom : true,
element : element
};
......@@ -777,6 +779,7 @@
obj,
href,
type,
rotation,
margin,
padding;
......@@ -942,9 +945,14 @@
img.onload = function () {
this.onload = this.onerror = null;
F.coming.width = this.width / F.opts.pixelRatio;
F.coming.height = this.height / F.opts.pixelRatio;
if (F.coming.rotation == '90' || F.coming.rotation == '270') {
F.coming.width = this.height / F.opts.pixelRatio;
F.coming.height = this.width / F.opts.pixelRatio;
}
else {
F.coming.width = this.width / F.opts.pixelRatio;
F.coming.height = this.height / F.opts.pixelRatio;
}
F._afterLoad();
};
......@@ -1052,6 +1060,7 @@
type,
scrolling,
href,
rotation,
embed;
F.hideLoading();
......@@ -1093,6 +1102,7 @@
});
href = current.href;
rotation = current.rotation;
switch (type) {
case 'inline':
......@@ -1117,7 +1127,7 @@
break;
case 'image':
content = current.tpl.image.replace('{href}', href);
content = current.tpl.image.replace('{href}', href).replace('{rotation}', rotation);
break;
case 'swf':
......@@ -1363,6 +1373,16 @@
inner.width( width ).height( height );
if (current.type == 'image') {
var img = inner.find('img')
var transform = 'rotate(' + img.data('rotation') + 'deg)';
if (img.data('rotation') == '90' || img.data('rotation') == '270') {
var ratio = height / width;
transform += ' scale(' + ratio + ', ' + (1/ratio) + ')';
}
img.css('transform', transform);
}
wrap.width( width + wPadding );
width_ = wrap.width();
......
......@@ -32,7 +32,7 @@
{% block js_head %}
<script type="text/javascript" src="{% static "plugins/jquery-1.8.3.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/jquery.jscroll.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/jquery.fancybox.pack.js" %}"></script>
<script type="text/javascript" src="{% static "js/jquery.fancybox.js" %}"></script>
<script type="text/javascript" src="{% static "js/thimbus.js" %}"></script>
<script type="text/javascript" src="{% static "js/scripts.js" %}"></script>
{% endblock %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment