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