add limit 600px height limit in template. Create templatetag to get image ratio.
--- a/src/egonomy/templates/egonomy_annotate_picture.html Tue Feb 19 15:46:37 2013 +0100
+++ b/src/egonomy/templates/egonomy_annotate_picture.html Tue Feb 19 16:29:53 2013 +0100
@@ -2,6 +2,7 @@
{% load static %}
{% load i18n %}
{% load thumbnail %}
+{% load egonomy_thumbnail %}
{% block title %}{% trans "Annotate a picture" %}{% endblock %}
@@ -9,13 +10,21 @@
<div class="fullwidth">
<div class="column column-half">
<h2>{% if img.metadata.titre %}{{ img.metadata.titre }}{% else %}({% trans "No title" %}){% endif %}</h2>
- <div class="fullphoto">
+ <div class="fullphoto center-image">
{% with img.info.image_file as image %}
- {% thumbnail image "476" format="PNG" crop="center" as im %}
+ {% if image|ratio > 0.8 %}
+ {% thumbnail image "476" format="PNG" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
- {% empty %}
+ {% empty %}
<img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
- {% endthumbnail %}
+ {% endthumbnail %}
+ {% else %}
+ {% thumbnail image "x600" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
+ {% endthumbnail %}
+ {% endif %}
{% endwith %}
</div>
</div>
--- a/src/egonomy/templates/egonomy_create_fragment.html Tue Feb 19 15:46:37 2013 +0100
+++ b/src/egonomy/templates/egonomy_create_fragment.html Tue Feb 19 16:29:53 2013 +0100
@@ -2,6 +2,7 @@
{% load static %}
{% load i18n %}
{% load thumbnail %}
+{% load egonomy_thumbnail %}
{% block title %}{% trans "Create or edit a fragment" %}{% endblock %}
@@ -18,15 +19,25 @@
<a href="#" class="head-button clear-fragment" title="{% trans 'Erase the drawing' %}">×</a>
<a href="#" class="head-button reset-fragment" title="{% trans 'Back to the original drawing' %}">↺</a>
<h2>{% trans 'New fragment' %} :</h2>
- <div class="image-and-fragment">
- {% with img.info.image_file as image %}
- {% thumbnail image "476" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
- {% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
- {% endthumbnail %}
- {% endwith %}
- <div class="cutout-canvas"></div>
+ <div class="center-image">
+ <div class="image-and-fragment">
+ {% with img.info.image_file as image %}
+ {% if image|ratio > 0.8 %}
+ {% thumbnail image "476" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
+ {% endthumbnail %}
+ {% else %}
+ {% thumbnail image "x600" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
+ {% endthumbnail %}
+ {% endif %}
+ {% endwith %}
+ <div class="cutout-canvas"></div>
+ </div>
</div>
<input name="fragment_path" id="fragment_path" type="text" class="fragment-path column-half" value="M0.1 0.5L0.5 0.1L0.9 0.5L0.5 0.9Z" />
<input name="image_id" id="image_id" type="hidden" value="{{ img.id }}" />
--- a/src/egonomy/templates/egonomy_view_fragment.html Tue Feb 19 15:46:37 2013 +0100
+++ b/src/egonomy/templates/egonomy_view_fragment.html Tue Feb 19 16:29:53 2013 +0100
@@ -2,6 +2,7 @@
{% load static %}
{% load i18n %}
{% load thumbnail %}
+{% load egonomy_thumbnail %}
{% block title %}{% trans "View a fragment" %}{% endblock %}
@@ -9,18 +10,28 @@
<div class="fullwidth">
<div class="column column-half">
<h2>{{ fragment.title }}</h2>
- <div class="image-and-fragment">
- {% with fragment.image.info.image_file as image %}
- {% thumbnail image "476" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
- {% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
- {% endthumbnail %}
- {% endwith %}
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
- <path d="{{ fragment.coordinates }}" stroke="red" stroke-width=".002" fill="red" fill-opacity=".3" />
- </svg>
- </div>
+ <div class="center-image">
+ <div class="image-and-fragment">
+ {% with fragment.image.info.image_file as image %}
+ {% if image|ratio > 0.8 %}
+ {% thumbnail image "476" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
+ {% endthumbnail %}
+ {% else %}
+ {% thumbnail image "x600" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
+ {% endthumbnail %}
+ {% endif %}
+ {% endwith %}
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+ <path d="{{ fragment.coordinates }}" stroke="red" stroke-width=".002" fill="red" fill-opacity=".3" />
+ </svg>
+ </div>
+ </div>
</div>
<div class="column column-half">
<form action="#">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/templatetags/egonomy_thumbnail.py Tue Feb 19 16:29:53 2013 +0100
@@ -0,0 +1,19 @@
+from django.template import Library
+from sorl.thumbnail import default
+from sorl.thumbnail.images import ImageFile
+from sorl.thumbnail.templatetags.thumbnail import safe_filter
+
+
+register = Library()
+
+
+@safe_filter(error_output=False)
+@register.filter
+def ratio(file_):
+ """
+ A very handy filter to determine if an image is portrait or landscape.
+ """
+ if not file_:
+ return False
+ image_file = default.kvstore.get_or_set(ImageFile(file_))
+ return image_file.ratio