Efficiant template code factorization.
authorcavaliet
Thu, 28 Feb 2013 20:18:59 +0100
changeset 79 2a51570e986b
parent 78 67d3fb0e54a6
child 80 92ecdd581995
Efficiant template code factorization.
src/egonomy/templates/egonomy_all_fragments.html
src/egonomy/templates/egonomy_annotate_picture.html
src/egonomy/templates/egonomy_create_fragment.html
src/egonomy/templates/egonomy_home.html
src/egonomy/templates/egonomy_view_fragment.html
src/egonomy/templates/partial/fragment_only.html
src/egonomy/templates/partial/picture_and_fragment.html
src/egonomy/templates/partial/picture_and_red_fragment.html
--- a/src/egonomy/templates/egonomy_all_fragments.html	Thu Feb 28 17:56:27 2013 +0100
+++ b/src/egonomy/templates/egonomy_all_fragments.html	Thu Feb 28 20:18:59 2013 +0100
@@ -29,29 +29,9 @@
                               <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
                               <div class="center-image">
                                 <div class="image-and-fragment little_square_fragment">
-                                 {% with frgmt=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
-                                 {% with image=frgmt.image.info.image_file %}
-                                 {% if image %}
-                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ frgmt.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                        <defs>
-                                            <clipPath id="fragment-clip{{ frgmt.pk }}">
-                                                <path d="{{ frgmt.coordinates }}" />
-                                            </clipPath>
-                                        </defs>
-                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ frgmt.pk }})"/>
-                                      </svg>
-	                             {% else %}
-                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                        <defs>
-                                            <clipPath id="fragment-clip{{ frgmt.pk }}">
-                                                <path d="{{ frgmt.coordinates }}" />
-                                            </clipPath>
-                                        </defs>
-                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ frgmt.pk }})"/>
-                                      </svg>
-	                             {% endif %}
+                                 {% with fragment=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
+                                 {% with image=fragment.image.info.image_file %}
+                                 {% include "partial/fragment_only.html" %}
 	                             {% endwith %}
                                  {% endwith %}
                                 </div>
--- a/src/egonomy/templates/egonomy_annotate_picture.html	Thu Feb 28 17:56:27 2013 +0100
+++ b/src/egonomy/templates/egonomy_annotate_picture.html	Thu Feb 28 20:18:59 2013 +0100
@@ -90,37 +90,16 @@
                     <div class="column column-full">
                         <h2>{% trans "Fragments from this picture" %}</h2>
                         <ul class="fullwidth">
-                          {% for frg in fragment_list %}
+                          {% for fragment in fragment_list %}
                             <li class="subcol subcol-eighth">
-                                <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
+                                <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
                                 <div class="center-image">
                                     <div class="image-and-fragment">
-                                     {% with frg.image.info.image_file as image %}
-                                     {% if image %}
-                                      {% if image|is_portrait %}
-                                       {% thumbnail image "x110" 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="110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% else %}
-                                       {% thumbnail image "110" 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=110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% endif %}
-                                     {% else %}
-                                        <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
-                                     {% endif %}
-                                     {% endwith %}
-                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
-                                            <path d="{{ frg.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
-                                        </svg>
+                                     {% include "partial/picture_and_red_fragment.html" %}
                                     </div>
                                 </div>
-                                <h3>{{ frg.title }}</h3></a>
-                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
+                                <h3>{{ fragment.title }}</h3></a>
+                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                             </li>
                           {% endfor %}
                         </ul>
--- a/src/egonomy/templates/egonomy_create_fragment.html	Thu Feb 28 17:56:27 2013 +0100
+++ b/src/egonomy/templates/egonomy_create_fragment.html	Thu Feb 28 20:18:59 2013 +0100
@@ -149,39 +149,18 @@
                 </div>
                 <div class="fullwidth">
                     <div class="column column-full">
-                        <h2>{% trans 'Fragments from this picture' %}</h2>
+                        <h2>{% trans "Fragments from this picture" %}</h2>
                         <ul class="fullwidth">
-                          {% for frg in fragment_list %}
+                          {% for fragment in fragment_list %}
                             <li class="subcol subcol-eighth">
-                                <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
+                                <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
                                 <div class="center-image">
                                     <div class="image-and-fragment">
-                                     {% with frg.image.info.image_file as image %}
-                                     {% if image %}
-                                      {% if image|is_portrait %}
-                                       {% thumbnail image "x110" 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="110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% else %}
-                                       {% thumbnail image "110" 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=110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% endif %}
-                                     {% else %}
-                                        <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
-                                     {% endif %}
-                                     {% endwith %}
-                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
-                                            <path d="{{ frg.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
-                                        </svg>
+                                     {% include "partial/picture_and_red_fragment.html" %}
                                     </div>
                                 </div>
-                                <h3>{{ frg.title }}</h3></a>
-                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
+                                <h3>{{ fragment.title }}</h3></a>
+                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                             </li>
                           {% endfor %}
                         </ul>
--- a/src/egonomy/templates/egonomy_home.html	Thu Feb 28 17:56:27 2013 +0100
+++ b/src/egonomy/templates/egonomy_home.html	Thu Feb 28 20:18:59 2013 +0100
@@ -47,38 +47,19 @@
                         <h2>{% trans "Last created fragments" %}
                             <span class="right"><a href="{% url 'all_fragments' %}" alt="{% trans "All fragments" %}">{% trans "All fragments" %}</a></span></h2>
                         <ul class="fullwidth">
-                          {% for frg in fragment_list %}
+                          {% for fragment in fragment_list %}
                             <li class="subcol subcol-half-fourth">
-                                <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
+                                <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
                                 <div class="center-image">
-                                    <div class="image-and-fragment">
-                                     {% if frg.image %}
-                                      {% with frg.image.info.image_file as image %}
-		                              {% if image|is_portrait %}
-		                               {% thumbnail image "x110" 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="110" height="110" class="placeholder" />
-		                               {% endthumbnail %}
-		                              {% else %}
-		                               {% thumbnail image "110" 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=110" height="110" class="placeholder" />
-		                               {% endthumbnail %}
-		                              {% endif %}
-		                              {% endwith %}
-		                             {% else %}
-		                                <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
-		                             {% endif %}
-                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
-                                            <path d="{{ frg.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
-                                        </svg>
+                                    <div class="image-and-fragment little_square_fragment">
+                                    {% with image=fragment.image.info.image_file %}
+                                    {% include "partial/fragment_only.html" %}
+                                    {% endwith %}
                                     </div>
                                 </div>
-                                <h3>{{ frg.title }}</h3></a>
-                                <h4>{% trans "Fragment from" %} <a href="{% url 'annotate_picture' image_id=frg.image.id %}">{{ frg.image.metadata.titre|default:_("No title") }}</a></h4>
-                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
+                                <h3>{{ fragment.title }}</h3></a>
+                                <h4>{% trans "Fragment from" %} <a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}</a></h4>
+                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                             </li>
                           {% endfor %}
                         </ul>
--- a/src/egonomy/templates/egonomy_view_fragment.html	Thu Feb 28 17:56:27 2013 +0100
+++ b/src/egonomy/templates/egonomy_view_fragment.html	Thu Feb 28 20:18:59 2013 +0100
@@ -14,80 +14,18 @@
                           {% if fragment_only %}
                             <div class="image-and-fragment large_square_fragment">
                              {% with fragment.image.info.image_file as image %}
-                             {% if image %}
-                                  <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                    <defs>
-                                        <clipPath id="fragment-clip{{ fragment.pk }}">
-                                            <path d="{{ fragment.coordinates }}" />
-                                        </clipPath>
-                                    </defs>
-                                    <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                    <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                  </svg>
-                             {% else %}
-                                  <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                    <defs>
-                                        <clipPath id="fragment-clip{{ fragment.pk }}">
-                                            <path d="{{ fragment.coordinates }}" />
-                                        </clipPath>
-                                    </defs>
-                                    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                  </svg>
-                             {% endif %}
+                             {% include "partial/fragment_only.html" %}
                              {% endwith %}
                             </div>
                           {% else %}
 	                        <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 }}" class="sub_svg_image"/>
-                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                  <defs>
-                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-                                          <path d="{{ fragment.coordinates }}" />
-                                      </clipPath>
-                                  </defs>
-                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                </svg>
-	                           {% empty %}
-	                            <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
-                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                  <defs>
-                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-                                          <path d="{{ fragment.coordinates }}" />
-                                      </clipPath>
-                                  </defs>
-                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                </svg>
-	                           {% endthumbnail %}
-	                          {% else %}
-	                           {% thumbnail image "x600" format="PNG" crop="center" as im %}
-	                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
-                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                  <defs>
-                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-                                          <path d="{{ fragment.coordinates }}" />
-                                      </clipPath>
-                                  </defs>
-                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-	                           {% empty %}
-	                            <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
-                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                  <defs>
-                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-                                          <path d="{{ fragment.coordinates }}" />
-                                      </clipPath>
-                                  </defs>
-                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                </svg>
-	                           {% 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-->
+	                          {% with 0.8 as ratio %}
+	                          {% with "476" as w_size %}
+	                          {% with "x600" as h_size %}
+	                          {% include "partial/picture_and_fragment.html" %}
+                              {% endwith %}
+                              {% endwith %}
+                              {% endwith %}
 	                        </div>
                           {% endif %}
 	                    </div>
@@ -127,55 +65,13 @@
                             <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
                                 {% trans "See the fragment in its full picture" %} :<br/>
 	                            <div class="image-and-fragment">
-	                              {% with fragment.image.info.image_file as image %}
-	                              {% if image|is_portrait %}
-	                               {% thumbnail image "110" format="PNG" crop="center" as im %}
-	                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
-	                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	                                  <defs>
-	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-	                                          <path d="{{ fragment.coordinates }}" />
-	                                      </clipPath>
-	                                  </defs>
-	                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-	                                </svg>
-	                               {% empty %}
-	                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
-	                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	                                  <defs>
-	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-	                                          <path d="{{ fragment.coordinates }}" />
-	                                      </clipPath>
-	                                  </defs>
-	                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-	                                </svg>
-	                               {% endthumbnail %}
-	                              {% else %}
-	                               {% thumbnail image "x110" format="PNG" crop="center" as im %}
-	                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
-	                                <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	                                  <defs>
-	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-	                                          <path d="{{ fragment.coordinates }}" />
-	                                      </clipPath>
-	                                  </defs>
-	                                  <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-	                               {% empty %}
-	                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder sub_svg_image" />
-	                                <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	                                  <defs>
-	                                      <clipPath id="fragment-clip{{ fragment.pk }}">
-	                                          <path d="{{ fragment.coordinates }}" />
-	                                      </clipPath>
-	                                  </defs>
-	                                  <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-	                                </svg>
-	                               {% endthumbnail %}
-	                              {% endif %}
+	                              {% with 1 as ratio %}
+	                              {% with "110" as w_size %}
+	                              {% with "x110" as h_size %}
+	                              {% include "partial/picture_and_fragment.html" %}
 	                              {% 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-->
+	                              {% endwith %}
+	                              {% endwith %}
 	                            </div>
                             </a>
                           {% else %}
@@ -183,27 +79,7 @@
                                 {% trans "See the fragment only" %} :<br/>
                                 <div class="image-and-fragment little_square_fragment">
                                  {% with image=fragment.image.info.image_file %}
-                                 {% if image %}
-                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                        <defs>
-                                            <clipPath id="fragment-clip{{ fragment.pk }}">
-                                                <path d="{{ fragment.coordinates }}" />
-                                            </clipPath>
-                                        </defs>
-                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                        <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                      </svg>
-                                 {% else %}
-                                      <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                                        <defs>
-                                            <clipPath id="fragment-clip{{ fragment.pk }}">
-                                                <path d="{{ fragment.coordinates }}" />
-                                            </clipPath>
-                                        </defs>
-                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
-                                        <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
-                                      </svg>
-                                 {% endif %}
+                                 {% include "partial/fragment_only.html" %}
                                  {% endwith %}
                                 </div>
                             </a>
@@ -215,37 +91,16 @@
                     <div class="column column-full">
                         <h2>{% trans "Fragments from this picture" %}</h2>
                         <ul class="fullwidth">
-                          {% for frg in fragment_list %}
+                          {% for fragment in fragment_list %}
                             <li class="subcol subcol-eighth">
-                                <a href="{% url 'view_fragment' fragment_pk=frg.pk  %}">
+                                <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
                                 <div class="center-image">
                                     <div class="image-and-fragment">
-                                     {% with frg.image.info.image_file as image %}
-                                     {% if image %}
-                                      {% if image|is_portrait %}
-                                       {% thumbnail image "x110" 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="110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% else %}
-                                       {% thumbnail image "110" 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=110" height="110" class="placeholder" />
-                                       {% endthumbnail %}
-                                      {% endif %}
-                                     {% else %}
-                                        <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
-                                     {% endif %}
-                                     {% endwith %}
-                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
-                                            <path d="{{ frg.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
-                                        </svg>
+                                     {% include "partial/picture_and_red_fragment.html" %}
                                     </div>
                                 </div>
-                                <h3>{{ frg.title }}</h3></a>
-                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
+                                <h3>{{ fragment.title }}</h3></a>
+                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                             </li>
                           {% endfor %}
                         </ul>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/templates/partial/fragment_only.html	Thu Feb 28 20:18:59 2013 +0100
@@ -0,0 +1,22 @@
+{% load static %}
+{% if image %}
+     <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+       <defs>
+           <clipPath id="fragment-clip{{ fragment.pk }}">
+               <path d="{{ fragment.coordinates }}" />
+           </clipPath>
+       </defs>
+       <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+       <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+     </svg>
+{% else %}
+     <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+       <defs>
+           <clipPath id="fragment-clip{{ fragment.pk }}">
+               <path d="{{ fragment.coordinates }}" />
+           </clipPath>
+       </defs>
+       <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
+       <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+     </svg>
+{% endif %}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/templates/partial/picture_and_fragment.html	Thu Feb 28 20:18:59 2013 +0100
@@ -0,0 +1,52 @@
+{% load static %}
+{% load thumbnail %}
+{% load egonomy_thumbnail %}
+{% with fragment.image.info.image_file as image %}
+{% if image|ratio > ratio %}
+ {% thumbnail image w_size format="PNG" crop="center" as im %}
+  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
+  <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="fragment-clip{{ fragment.pk }}">
+            <path d="{{ fragment.coordinates }}" />
+        </clipPath>
+    </defs>
+    <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+  </svg>
+ {% empty %}
+  <img src="{% static 'egonomy/img/empty.gif' %}" width="{{w_size}}" height="{{w_size}}" class="placeholder sub_svg_image" />
+  <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="fragment-clip{{ fragment.pk }}">
+            <path d="{{ fragment.coordinates }}" />
+        </clipPath>
+    </defs>
+    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+  </svg>
+ {% endthumbnail %}
+{% else %}
+ {% thumbnail image h_size format="PNG" crop="center" as im %}
+  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
+  <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="fragment-clip{{ fragment.pk }}">
+            <path d="{{ fragment.coordinates }}" />
+        </clipPath>
+    </defs>
+    <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+ {% empty %}
+  <img src="{% static 'egonomy/img/empty.gif' %}" width="{{w_size}}" height="{{w_size}}" class="placeholder sub_svg_image" />
+  <svg preserveAspectRatio="none" width="{{w_size}}" height="{{w_size}}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="fragment-clip{{ fragment.pk }}">
+            <path d="{{ fragment.coordinates }}" />
+        </clipPath>
+    </defs>
+    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
+  </svg>
+ {% 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-->
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/templates/partial/picture_and_red_fragment.html	Thu Feb 28 20:18:59 2013 +0100
@@ -0,0 +1,24 @@
+{% load static %}
+{% load thumbnail %}
+{% if fragment.image %}
+ {% with fragment.image.info.image_file as image %}
+ {% if image|is_portrait %}
+  {% thumbnail image "x110" 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="110" height="110" class="placeholder" />
+  {% endthumbnail %}
+ {% else %}
+  {% thumbnail image "110" 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=110" height="110" class="placeholder" />
+  {% endthumbnail %}
+ {% endif %}
+ {% endwith %}
+{% else %}
+   <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
+{% endif %}
+   <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=".02" fill="red" fill-opacity=".3" />
+   </svg>
\ No newline at end of file