added template tags to get get image url and re-wrote gallery template

to use new syntax. also added some migrations.

1 files changed, 62 insertions, 0 deletions

diff --git a/design/templates/details/photo_gallery.html b/design/templates/details/photo_gallery.html
new file mode 100644
index 0000000..b991ba2
--- /dev/null
+++ b/design/templates/details/photo_gallery.html
@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% load get_image_size %}
+{% load number_to_word  %}
+
+{% block pagetitle %}{{object.title}} - Luxagraf, Photos{% endblock %}
+{%block htmlclass%}class="black"{%endblock%}
+
+
+{% block metadescription %}{{object.description|truncatewords:30|smartypants|safe}}{% endblock %}
+
+{% block extrahead %}
+     <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+     <style>
+         #map-canvas img{ border: none;}
+     </style>
+{% endblock %}
+{%block bodyid%}class="image_gallery"{%endblock%}	
+
+{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+        <li><a href="/photos/" title="See all Photos" itemprop="url"><span>Photos</span></a> &rarr;</li> 
+        <li>{{object.title}}</li>
+    </ul>
+    <p class="directions">Use left/right arrow keys to navigate through photos</p>
+    <main id="slides" class="image-gallery--wrapper">
+        <h1 class="hide">Photos from {{object.title}}</h1>{%for photo in object.image.all reversed %}
+        <article id="image-{{forloop.counter}}"> 
+            <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">&#8734; {{forloop.counter|number_to_word}} &#8734;</a></h6>
+            <figure class="fig">
+                <img sizes="(max-width: 960px) 100vw"
+                     srcset="{% get_image_size photo "small" %} 720w,
+                             {% get_image_size photo "medium" %} 1140w,
+                             {% get_image_size photo "large" %} 2280w,"
+                     src="{% get_image_size photo "medium" %}" alt="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%} >
+            <figcaption class="figcaption">
+                <div class="caption" id="id-{{photo.id}}">
+                    <h3 class="figcaption--title">{{photo.title}}</h3>
+                    <time class="figcaption--date" datetime="{{photo.exif_date|date:'c'}}">{{photo.exif_date|date:"M j, Y"}}</time>
+                    {% if object.is_public %}<a class="map-link" href="#" data-latitude="{{photo.lat}}" data-longitude="{{photo.lon}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%}
+                    {%if photo.caption%}<p class="figcaption--desc">{{photo.caption|safe}}</p> {%endif%}  
+                </div>
+                <div class="photo-options">
+                    {% if object.is_public %}<p>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 with {%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}Lumix 14-45mm lens{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}Lumix 20mm lens{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}Lumix 45-200mm lens{%endif%}{%if photo.exif_lens == 'OLYMPUS M.9-18mm F4.0-5.6' %}Olympus 9-18mm lens{%endif%}{%if photo.exif_lens == None %}{%endif%}</p>
+                    <p>{{photo.exif_exposure}} sec at f/{{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p>{% endif %}
+                    <!--<p><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></p>-->
+                    <!--<a href="#" class="exif-link" title="{{photo.id}}">Camera</a>-->
+                </div>
+            </figcaption>
+        </figure>
+        </article>
+        {% endfor %}
+    </section>
+{%endblock%}
+
+{% block js %}
+    <script type="text/javascript" src="/media/js/jquery.js"></script>
+    <script type="text/javascript" src="/media/js/jquery.scrollTo-1.4.2-min.js"></script>
+    <script type="text/javascript" src="/media/js/photos.min.js" ></script>
+{% endblock%}
+
+