widened site, created new photo layouts and prepped homepage redesign

29 files changed, 739 insertions, 70 deletions

diff --git a/app/books/migrations/0003_auto_20161023_2014.py b/app/books/migrations/0003_auto_20161023_2014.py
new file mode 100644
index 0000000..809c465
--- /dev/null
+++ b/app/books/migrations/0003_auto_20161023_2014.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-23 20:14
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('books', '0002_book_is_public'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='book',
+            name='image',
+            field=models.FileField(blank=True, null=True, upload_to='/home/lxf/sites/luxagraf/site/media/images/book-covers/'),
+        ),
+    ]
diff --git a/app/daily/migrations/0010_auto_20161023_2014.py b/app/daily/migrations/0010_auto_20161023_2014.py
new file mode 100644
index 0000000..72a68cf
--- /dev/null
+++ b/app/daily/migrations/0010_auto_20161023_2014.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-23 20:14
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('daily', '0009_remove_daily_title'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='daily',
+            options={'get_latest_by': 'date', 'ordering': ('-date',)},
+        ),
+    ]
diff --git a/app/jrnl/models.py b/app/jrnl/models.py
index ceaefa6..2fc775e 100644
--- a/app/jrnl/models.py
+++ b/app/jrnl/models.py
@@ -37,15 +37,16 @@ def image_url_replace(s):
 def parse_image(s):
     soup = BeautifulSoup(s.group(), "lxml")
     for img in soup.find_all('img'):
-        print(img)
         src = img['src'].split("images/")[1]
-        print(src)
         i = LuxImage.objects.get(image__icontains=src)
         cl = img['class']
         caption = False
         exif = False
+        cluster_class = None
         if len(cl) > 1:
             css_class = cl[0]
+            if css_class == 'cluster':
+                cluster_class = cl[1]
             if cl[1] == 'caption':
                 caption = True
             if cl[1] == 'exif':
@@ -59,7 +60,7 @@ def parse_image(s):
             print('caption'+str(caption))
         else:
             css_class = cl[0]
-        c = Context({'image': i, 'caption': caption, 'exif': exif})
+        c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class})
         return render_to_string("lib/img_%s.html" % css_class, c)
 
 
@@ -72,7 +73,10 @@ def extract_images(s):
     soup = BeautifulSoup(s, "lxml")
     imgs = []
     for img in soup.find_all('img'):
-        imgs.append(img['src'])
+        try:
+            imgs.append(img['src'])
+        except:
+            pass
     return imgs
 
 
diff --git a/app/jrnl/views.py b/app/jrnl/views.py
index c68625d..6d0e85b 100644
--- a/app/jrnl/views.py
+++ b/app/jrnl/views.py
@@ -7,6 +7,7 @@ from django.conf import settings
 from utils.views import PaginatedListView
 
 from .models import Entry, HomepageCurrator
+from daily.models import CheckIn
 
 from locations.models import Country, Region
 
@@ -84,7 +85,8 @@ class HomepageList(ListView):
     Return a main entry and list of Entries in reverse chronological order
     """
     context_object_name = 'recent'
-    queryset = Entry.objects.filter(status__exact=1)[:5]
+    exclude = HomepageCurrator.objects.get(pk=1)
+    queryset = Entry.objects.filter(status__exact=1).exclude(pk=exclude.featured.pk)[:8]
 
     def get_template_names(self):
         obj = HomepageCurrator.objects.get(pk=1)
@@ -94,6 +96,7 @@ class HomepageList(ListView):
         # Call the base implementation first to get a context
         context = super(HomepageList, self).get_context_data(**kwargs)
         context['homepage'] = HomepageCurrator.objects.get(pk=1)
+        context['location'] = CheckIn.objects.get(pk=1)
         context['IMAGES_URL'] = settings.IMAGES_URL
         return context
 
diff --git a/app/photos/admin.py b/app/photos/admin.py
index 22de1fd..f0eb1c7 100644
--- a/app/photos/admin.py
+++ b/app/photos/admin.py
@@ -13,6 +13,7 @@ from .forms import UploadZipForm, GalleryForm
 
 
 class LuxImageSizeAdmin(OSMGeoAdmin):
+    list_display = ('name', 'width', 'height', 'quality')
     pass
 
 
diff --git a/app/photos/forms.py b/app/photos/forms.py
index 4e00189..06e829d 100644
--- a/app/photos/forms.py
+++ b/app/photos/forms.py
@@ -151,7 +151,7 @@ class UploadZipForm(forms.Form):
             if file_extension != ".mp4":
                 img = Image.open(image.image.path)
                 if img.size[0] > img.size[1]:
-                    image.sizes.add(LuxImageSize.objects.get(width=2280))
+                    image.sizes.add(LuxImageSize.objects.get(width=2560))
                     image.sizes.add(LuxImageSize.objects.get(width=1140))
                     image.sizes.add(LuxImageSize.objects.get(width=720))
                 if img.size[1] > img.size[0]:
diff --git a/app/photos/migrations/0011_luximagesize_name.py b/app/photos/migrations/0011_luximagesize_name.py
new file mode 100644
index 0000000..49d046b
--- /dev/null
+++ b/app/photos/migrations/0011_luximagesize_name.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-21 08:46
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0010_auto_20160517_0906'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='luximagesize',
+            name='name',
+            field=models.CharField(blank=True, max_length=30, null=True),
+        ),
+    ]
diff --git a/app/photos/migrations/0012_luximagesize_is_portrait.py b/app/photos/migrations/0012_luximagesize_is_portrait.py
new file mode 100644
index 0000000..a2c2e3a
--- /dev/null
+++ b/app/photos/migrations/0012_luximagesize_is_portrait.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-22 13:46
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0011_luximagesize_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='luximagesize',
+            name='is_portrait',
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/app/photos/migrations/0013_auto_20161022_1348.py b/app/photos/migrations/0013_auto_20161022_1348.py
new file mode 100644
index 0000000..8dfbf98
--- /dev/null
+++ b/app/photos/migrations/0013_auto_20161022_1348.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-22 13:48
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0012_luximagesize_is_portrait'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='luximagesize',
+            old_name='width',
+            new_name='long_edge',
+        ),
+    ]
diff --git a/app/photos/migrations/0014_remove_luximagesize_is_portrait.py b/app/photos/migrations/0014_remove_luximagesize_is_portrait.py
new file mode 100644
index 0000000..b8e0aa8
--- /dev/null
+++ b/app/photos/migrations/0014_remove_luximagesize_is_portrait.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-22 14:11
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0013_auto_20161022_1348'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='luximagesize',
+            name='is_portrait',
+        ),
+    ]
diff --git a/app/photos/migrations/0015_auto_20161022_1411.py b/app/photos/migrations/0015_auto_20161022_1411.py
new file mode 100644
index 0000000..d380b52
--- /dev/null
+++ b/app/photos/migrations/0015_auto_20161022_1411.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-22 14:11
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0014_remove_luximagesize_is_portrait'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='luximagesize',
+            old_name='long_edge',
+            new_name='width',
+        ),
+    ]
diff --git a/app/photos/migrations/0016_auto_20161022_1411.py b/app/photos/migrations/0016_auto_20161022_1411.py
new file mode 100644
index 0000000..54b84d7
--- /dev/null
+++ b/app/photos/migrations/0016_auto_20161022_1411.py
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-22 14:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0015_auto_20161022_1411'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='luximagesize',
+            name='height',
+            field=models.IntegerField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='luximagesize',
+            name='width',
+            field=models.IntegerField(blank=True, null=True),
+        ),
+    ]
diff --git a/app/photos/models.py b/app/photos/models.py
index 6940110..4207ad4 100644
--- a/app/photos/models.py
+++ b/app/photos/models.py
@@ -1,10 +1,13 @@
 import os.path
+import io
 import datetime
 from PIL import Image
 
+from django.core.exceptions import ValidationError 
 from django.contrib.gis.db import models
 from django.contrib.sitemaps import Sitemap
 from django.utils.encoding import force_text
+from django.utils.text import slugify
 from django.conf import settings
 
 from taggit.managers import TaggableManager
@@ -24,15 +27,20 @@ def get_upload_path(self, filename):
 
 
 class LuxImageSize(models.Model):
-    width = models.IntegerField()
+    name = models.CharField(null=True, blank=True, max_length=30)
+    width = models.IntegerField(null=True, blank=True)
+    height = models.IntegerField(null=True, blank=True)
     quality = models.IntegerField()
 
     class Meta:
         verbose_name_plural = 'Image Sizes'
 
     def __str__(self):
-        return str(self.width)
-
+        if self.width:
+            size = self.width
+        if self.height:
+            size = self.height
+        return "%s - %s" %(self.name, str(size))
 
 class LuxImage(models.Model):
     image = models.FileField(blank=True, null=True, upload_to=get_upload_path)
@@ -75,8 +83,9 @@ class LuxImage(models.Model):
 
     def get_admin_image(self):
         for size in self.sizes.all():
-            if size.width <= 800:
-                return self.get_image_by_size(size)
+            if size.width and size.width <= 820 or size.height and size.height<=800:
+                print("Size name" +size.name)
+                return self.get_image_by_size(size.name)
 
     def get_largest_image(self):
         t = []
@@ -139,12 +148,21 @@ class LuxImage(models.Model):
         n = self.get_next_by_pub_date()
         return "/admin/photos/luximage/%s/change/" % n.pk
 
+    @property
+    def is_portait(self):
+        if int(self.height) > int(self.width):
+            return True
+        else:
+            return False 
 
 @receiver(post_save, sender=LuxImage)
 def post_save_events(sender, update_fields, created, instance, **kwargs):
     if instance.exif_raw == '':
         filename, file_extension = os.path.splitext(instance.image.path)
         if file_extension != ".mp4":
+            img = Image.open(instance.image.path)
+            instance.height = img.height
+            instance.width = img.width
             instance = readexif(instance)
             post_save.disconnect(post_save_events, sender=LuxImage)
             instance.save()
@@ -159,16 +177,24 @@ def update_photo_sizes(sender, instance, **kwargs):
         img = Image.open(instance.image.path)
         resize_image(img, 160, None, 78, base_path, "%s_tn.%s" % (instance.get_image_name(), instance.get_image_ext()))
         for size in instance.sizes.all():
-            if img.size[0] > img.size[1]:
+            if size.width:
+                print("Image width is:"+str(img.width))
                 try:
-                    resize_image(img, size.width, None, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), size.width, instance.get_image_ext()))
+                    if size.width <= img.width:
+                        resize_image(img, size.width, None, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), slugify(size.name), instance.get_image_ext()))
+                    else:
+                        raise ValidationError({'items': ["Size is larger than source image"]})
                 except ImageSizeError:
                     m2m_changed.disconnect(update_photo_sizes, sender=LuxImage.sizes.through)
                     instance.sizes.remove(size)
                     m2m_changed.connect(update_photo_sizes, sender=LuxImage.sizes.through)
-            if img.size[1] > img.size[0]:
+            if size.height:
                 try:
-                    resize_image(img, None, size.width, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), size.width, instance.get_image_ext()))
+                    if size.height <= img.height:
+                        resize_image(img, None, size.height, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), slugify(size.name), instance.get_image_ext()))
+
+                    else:
+                        pass
                 except ImageSizeError:
                     m2m_changed.disconnect(update_photo_sizes, sender=LuxImage.sizes.through)
                     instance.sizes.remove(size)
@@ -205,10 +231,12 @@ class LuxGallery(models.Model):
             return "/photos/galleries/private/%s" % (self.slug)
 
     def latitude(self):
-        return self.point.y
+        if self.point:
+            return self.point.y
 
     def longitude(self):
-        return self.point.x
+        if self.point:
+            return self.point.x
 
     def thumbs(self):
         lst = [x.image.name for x in self.images.all()]
diff --git a/app/syndication/migrations/0003_auto_20161023_2014.py b/app/syndication/migrations/0003_auto_20161023_2014.py
new file mode 100644
index 0000000..2b311fb
--- /dev/null
+++ b/app/syndication/migrations/0003_auto_20161023_2014.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9 on 2016-10-23 20:14
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('syndication', '0002_auto_20160628_2149'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='fboauthtoken',
+            options={'get_latest_by': 'expires', 'ordering': ('-expires',)},
+        ),
+    ]
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 8f4b207..b0c83e0 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -138,7 +138,11 @@ nav[role="navigation"] {
     }
     @include breakpoint(delta) {
         margin-top: 1.5em; 
-        max-width: 1170px;
+        max-width: $breakpoint-delta - 40px;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.5em; 
+        max-width: $max_width;
     }
 }
 
diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss
index 6582da5..bea884d 100644
--- a/design/sass/_homepage.scss
+++ b/design/sass/_homepage.scss
@@ -44,32 +44,45 @@
 }
 
 .homepage--bright {
+    max-width: 100%;
+    @extend %clearfix;
     article { 
         margin-top: 0;
         margin-bottom: 20px;
-        width: 100%;
-    }
-    @include breakpoint(alpha) {
         max-width: 100%;
+    }
+    .odd, .even { margin-left: 0; margin-right: 0; padding-left: 0;}
+    @include breakpoint(delta) {
         margin-left: 0;
+        float: right;
+        max-width: 33%;
         article {
             float: left;
-            width: 47%;
+            width: 45%;
             margin-left: 1em;
         }
+        .odd { margin-right: 10px;}
     }
     @include breakpoint(gamma) {
-        float: left;
-        width: 250px;
+        float: right;
+        max-width: 33%;
         margin-top: 0;
         article {
-            float: none;
-            width: 100%;
-            margin-left: 0;
+            max-width: 100%;
         }
     }
-    @include breakpoint(delta) {
-        width: 340px;
+    @include breakpoint(beta) {
+        margin-top: 0;
+        article {
+            max-width: 50%;
+        }
+    }
+    @include breakpoint(beta-2) {
+        margin-top: 0;
+        article {
+            max-width: 47%;
+        }
+        .odd { margin-right: 10px;}
     }
     .post--image {
         margin-left: 0 !important;
@@ -78,6 +91,7 @@
         overflow: hidden;
         img {
             max-width: 100%;
+            width: 100%;
             display: block; 
             /* just in case, to force correct aspect ratio */
             height: auto !important;
@@ -85,16 +99,60 @@
             /* lt ie8 */
             -ms-interpolation-mode: bicubic; 
         }
+        @include breakpoint(epsilon){
+            max-height: 160px;
+        }
+    }
+}
+.homepage--arc-big {
+    max-width: 100%;
+    @include breakpoint(gamma) {
+        float: left;
+        max-width: 63%;
+        article {
+            max-width: 47%;
+            width: 47%;
+        }
+    }
+    @include breakpoint(delta) {
+        float: left;
+        max-width: 63%;
+        article {
+            max-width: 49%;
+            
+        }
+    }
+}
+.popular {
+    @include breakpoint(gamma) {
+        article {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+    @include breakpoint(epsilon) {
+        float: right;
+        max-width: 33%;
     }
 }
 .homepage--next {
-    padding: 6px 0;
-    @include smcaps;
+    @extend %clearfix;
+    @include fontsize(14);
+    font-family: sans-serif;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
     text-decoration: none;
-    &:after {
+    padding: 9px 10px 8px;
+    border: $link_color 1px solid;
+    a:after {
         content: "\21E2";
         margin-left: 4px;
     }
+    a:hover {
+        background: $link_color;
+        color: white;
+    }
 }
 .has-hero {
     .header-wrapper {
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 29b424e..bd3c5a1 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -6,6 +6,7 @@ $body_font: $brown;
 $body_font_light: #b3aeae;
 //$light;
 
+$max_width: 1280px;
 
 @mixin smcaps {
   text-transform: uppercase;
@@ -113,9 +114,12 @@ $body_font_light: #b3aeae;
     margin-left: auto;
     margin-right: auto;
     @include breakpoint(gamma) {
-        max-width: 960px;
+        max-width: $breakpoint-gamma - 20px;
     }
     @include breakpoint(delta) {
-        max-width: 1170px;
+        max-width: $breakpoint-delta - 40px;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
     }
 }
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
index c0f51ef..d152bf4 100644
--- a/design/sass/_photos.scss
+++ b/design/sass/_photos.scss
@@ -222,3 +222,285 @@
 //    padding-bottom: 0.25em;
 //  }
 //}
+
+//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss
+
+/**
+*   VARS
+**/
+
+// font-sizes
+$font-size-huge: 2.8em;
+$font-size-big: 2em;
+$font-size-medium: 1.4em;
+
+$def-color-1: #FFFFFF;
+$def-color-2: #B9CED2;
+
+$border-color-1: #9C9FA5;
+
+$def-font-color: #6c7176;
+$font-color-highlight: #A99929;
+$font-color-hover-1: #C3B919;
+
+$darkblue: #3F658B;
+@mixin prefixr($var, $val) {
+  -webkit-#{$var}: $val;
+  -moz-#{$var}: $val;
+  -o-#{$var}: $val;
+  -ms-#{$var}: $val;
+  $var: $val;
+}
+
+/* IE8 Stuff */
+.jslghtbx-ie8.jslghtbx {
+  background-image: url('../img/trans-bck.png');
+  display: none;
+  &.jslghtbx-active {
+    display: block;
+  }
+  .jslghtbx-contentwrapper > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    display: block;
+  }
+  .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  }
+}
+
+/* Main wrapper */
+.jslghtbx {
+  font-family: sans-serif;
+  overflow: auto;
+  visibility: hidden;
+  position: fixed;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  &.jslghtbx-active {
+    visibility: visible;
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+/* loading-animation */
+.jslghtbx-loading-animation {
+  margin-top: -60px;
+  margin-left: -60px;
+  width: 120px;
+  height: 120px;
+  top: 50%;
+  left: 50%;
+  display: none;
+  position: absolute;
+  z-index: -1;
+  & > span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    margin: 5px;
+    background-color: #fff;
+    @include prefixr(transition, all .3s ease-in-out);
+    &.jslghtbx-active {
+      margin-bottom: 60px;
+    }
+  }
+}
+
+.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation {
+  display: block;
+}
+
+.jslghtbx-nooverflow {
+  overflow: hidden !important; // prevent showing of scrollbars on prev/next
+}
+
+.jslghtbx-contentwrapper {
+  margin: auto;
+  visibility: hidden;
+  & > img {
+    background: #fff;
+    padding: .5em;
+    display: none;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+  }
+}
+
+.jslghtbx-contentwrapper.jslghtbx-wrapper-active {
+  visibility: visible;
+  & > img {
+    display: block;
+    opacity: 1;
+  }
+}
+
+/* Caption */
+.jslghtbx-caption {
+  display: none;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  max-width: 450px;
+  color: #fff;
+  text-align: center;
+  font-size: .9em;
+}
+
+.jslghtbx-active .jslghtbx-caption {
+  display: inline;
+  margin-right: 1em;
+}
+
+/* Animation Stuff */
+.jslghtbx-contentwrapper.jslghtbx-animate > img {
+  opacity: 0;
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  @include prefixr(transition, opacity .2s ease-in-out);
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-next {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-prev {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-init {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  cursor: pointer;
+}
+
+/* Controls */
+.jslghtbx-close {
+  position: fixed;
+  right: 23px;
+  top: 23px;
+  margin-top: -4px;
+  font-size: 2em;
+  color: $def-color-1;
+  cursor: pointer;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    text-shadow: 0 0 10px #fff;
+  }
+  @media screen and(max-width: 1060px) {
+    font-size: 1.5em;
+  }
+}
+
+.jslghtbx-next,
+.jslghtbx-prev {
+  display: none;
+  position: fixed;
+  top: 50%;
+  max-width: 6%;
+  max-height: 250px;
+  cursor: pointer;
+  @include prefixr(transition, all .2s ease-in-out);
+  &.jslghtbx-active {
+    display: block;
+  }
+  & > img {
+    width: 100%;
+  }
+
+}
+
+.jslghtbx-next {
+  right: .6em;
+  &.jslghtbx-no-img:hover {
+    border-left-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    right: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-left: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      right: 5px;
+      padding-left: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-left: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    right: .2em;
+    padding-left: 20px;
+  }
+}
+
+.jslghtbx-prev {
+  left: .6em;
+  &.jslghtbx-no-img:hover {
+    border-right-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    left: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-right: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      left: 5px;
+      padding-right: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-right: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    left: .2em;
+    padding-right: 20px;
+  }
+}
+
+.jslghtbx-thmb {
+  @media screen and(min-width: 451px) {
+    margin: 1em;
+  }
+  @media screen and(max-width: 450px) {
+    margin: 1em 0;
+  }
+  padding: 2px;
+  max-width: 100%;
+  max-height: 140px;
+  cursor: pointer;
+  box-shadow: 0px 0px 3px 0px #000;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    box-shadow: 0px 0px 14px 0px #000;
+  }
+}
+
+.p-link {
+    color: white !important;
+    @include fontsize(14);
+    &:after {
+        content: "\2197";
+    }
+}
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
index 8262c84..682d83b 100644
--- a/design/sass/_queries.scss
+++ b/design/sass/_queries.scss
@@ -2,9 +2,9 @@ $breakpoint-alpha: 38em;
 $breakpoint-alpha-2: 450px;
 $breakpoint-beta: 49em;
 $breakpoint-beta-2: 620px;
-$breakpoint-gamma: 56em;
-$breakpoint-delta: 73.125em;
-$breakpoint-epsilon: 79.625em;
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
 
 @mixin breakpoint($point) {
     @if $point == "alpha" {
diff --git a/design/sass/_writing_archive.scss b/design/sass/_writing_archive.scss
index 0f5f52b..91b5e46 100644
--- a/design/sass/_writing_archive.scss
+++ b/design/sass/_writing_archive.scss
@@ -117,4 +117,31 @@
         line-height: 36px;
     }
 }
+.homepage--about .homepage--arc-header:after{
+    @extend %clearfix;
+    display: block;
+    width: 100%;
+    margin: 2em auto 1em;
+    height: 150px;
+    background: url("/media/img/usa-resize.svg") 50% no-repeat;
+    background-size: 230px;
+    @include breakpoint(gamma) {
+        display: inline;
+        width: 0;
+        height: 0;
+        background: none;
+    }
+}
 
+.homepage--about {
+    @include breakpoint(gamma) {
+        background: url("/media/img/usa-resize.svg") 0 60% no-repeat;
+        background-size: 120px;
+    }
+    @include breakpoint(delta) {
+        background-size: 170px;
+    }
+    @include breakpoint(epsilon) {
+        background-size: 250px;
+    }
+}
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 6a63871..33d6729 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -246,8 +246,13 @@ img.picwide {
     }
     @include breakpoint(delta) {
         margin-left: -245px;
-        width: 1140px;
-        max-width: 1140px;
+        width: $breakpoint-delta;
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-left: -245px;
+        width: $max_width * .98;
+        max-width: $max_width;
     }
 }
 .picwide figcaption {
@@ -257,12 +262,16 @@ img.picwide {
     @include generic_sans;
     @include breakpoint(gamma) {
         text-align: right;
-        width: 960px;
-        max-width: 960px;
+        width: $breakpoint-gamma;
+        max-width: $breakpoint-gamma;
     }
     @include breakpoint(delta) {
-        width: 1170px;
-        max-width: 1170px;
+        width: $breakpoint-delta;
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        width: $max_width;
+        max-width: $max_width;
     }
 }
 figure.picwide > img.picwide {
@@ -350,6 +359,41 @@ figure.picwide > img.picwide {
         }
     }
 }
+.image-cluster {
+    @include constrain_wide;
+    @extend %clearfix;
+    margin-bottom: 1em;
+    div img {
+        float: left;
+        width: 100%;
+        padding: 0;
+        margin: 0 6px 6px 0;
+    }
+    div a:last-of-type {
+        img { 
+            margin-right: 0;
+        }
+    }
+    .picwide {
+        margin: 0;
+        padding: 0;
+        max-width: 100%;
+        width: 100%;
+        background: none;
+    }
+}
+.pic66 {
+    max-width: 63.9%;
+}
+.pic33 {
+    max-width: 35.5%;
+}
+.row-3  .pic33 {
+    max-width: 33%;
+}
+.pic5 {
+    max-width: 49.5%;
+}
 
 .embed-wrapper {
     @include constrain_wide;
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
index caaa790..7602525 100644
--- a/design/templates/admin/insert_images.html
+++ b/design/templates/admin/insert_images.html
@@ -99,6 +99,7 @@ $(function(){
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picfull" class="insert" href="">column width</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="cluster pic" class="insert" href="">cluster</a></li>
             <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>
         </ul>
         </div>
diff --git a/design/templates/archives/gallery_list.html b/design/templates/archives/gallery_list.html
index 99252ef..91e04cb 100644
--- a/design/templates/archives/gallery_list.html
+++ b/design/templates/archives/gallery_list.html
@@ -33,6 +33,7 @@
     <article id="image-{{forloop.counter}}" class="photo-gallery">
         <a href="{{object.get_absolute_url}}" title="view images from {{ object.title }}">
                 <img sizes="(max-width: 1170px) 100vw"
+                     {{object.thumb}}
                      srcset="{% for size in object.thumb.sizes.all %}{%spaceless%}
                      {% get_image_by_size object.thumb size.width %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endspaceless%}{%endfor%}
                      {% for size in object.thumb.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size object.thumb size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{{object.title}}" {%if photo.is_portait %}class="v"{%endif%} ></a>
@@ -42,8 +43,8 @@
                 <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.location.state.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/photos/united-states/" title="all galleries from the United States">{{object.location.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.state.country.name}}</a>{%endif%}
                     <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
+                        {%if object.latitude%}<data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>{%endif%}
+                        {%if object.longitude%}<data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>{%endif%}
                     </span>
                 </span>
             {%if object.description%}<p>{{object.description|safe|smartypants|widont}}</p>{%endif%}
diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html
index fe41b25..1d72862 100644
--- a/design/templates/archives/homepage-light.html
+++ b/design/templates/archives/homepage-light.html
@@ -47,16 +47,17 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz
    </section>
     <div class="homepage--about homepage--section">
         <h3 class="homepage--arc-header">About Luxagraf</h3>
-        <p>Luxagraf is my notebook. Something that, in an earlier age, I would have long ago lost in the backseat of a taxi. </p>
-        <p>Or something like that. It could just be a website. Except that I don&#8217;t do lists. And I&#8217;m not trying to make&nbsp;money off of it.</p><p>Whatever it is, whatever brought you here, I hope you enjoy it.</p> 
+        <p>Luxagraf is the notebook I use to record things for posterity. Something that, in an earlier age, you'd accidentally leave in the backseat of a taxi. Here it exists as long as there's energy to keep the internet on.</p>
+        <p>About us: We're currently exploring North America in our new home, a 1969 Dodge Travco RV.</p>
+        <p>We left our former home in Athens, GA in the autumn of 2016. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map over there has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. </p> 
     </div>
     <div class="homepage--section">
-    <section class="archive homepage--archives">
-        <h1 class="homepage--arc-header">Most Popular</h1>
-        {% for object in homepage.popular.all %}
-        <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <section class="homepage--bright archive homepage--arc-big">
+        <h1 class="homepage--arc-header">Most Recent</h1>
+        {% for object in recent %}
+        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
             <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a>
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a>
             </div>
             <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
             <p class="p-author author hide" itemprop="author">Scott Gilbertson</p>
@@ -68,15 +69,14 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz
                         <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
                         <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
                     </span>
-                </span> 
+                </span>
             </p>
-        </article> {% endfor %}
-        <p><a href="/jrnl/" class="homepage--next">Read More</a></p>
+        </article>{% endfor %}
     </section>
-    <section class="homepage--bright archive">
-        <h1 class="homepage--arc-header">Most Recent</h1>
-        {% for object in recent %}{% if object.pk != homepage.featured.pk %}
-        <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <section class="archive homepage--bright popular">
+        <h1 class="homepage--arc-header">Popular</h1>
+        <div class="arc-col">{% for object in homepage.popular.all %}
+        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
             <div class="post--image">
                 <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a>
             </div>
@@ -90,10 +90,11 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz
                         <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
                         <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
                     </span>
-                </span>
+                </span> 
             </p>
-        </article> {%endif%}{% endfor %}
+        </article> {% endfor %}</div>
     </section>
+        <p class="homepage--next"><a href="/jrnl/">Browse the Archives</a></p>
     </div>
 {% endblock %}
 
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index 494f926..a2b6873 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -7,7 +7,6 @@
 {% block metadescription %}{% autoescape on %}{{object.meta_description|striptags|safe}}{% endautoescape %}{% endblock %}
 {%block extrahead%}
     <link rel="canonical" href="https://luxagraf.net{{object.get_absolute_url}}" />
-    <link rel="amphtml" href="https://luxagraf.net{{object.get_absolute_url}}.amp" />
     <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" />
     <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" />
     <meta name="geo.placename" content="{% if object.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> 
@@ -86,6 +85,35 @@ class="{%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t ==
 {%endif%}
 {% endblock %}
 {% block js %}
+<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<symbol id="icon-external" viewBox="0 0 12 12">
+<title>external</title>
+<path fill="#FFF" stroke="#fff" stroke-width="10" d="m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z"/>
+</svg>
+<!--Fallback -->
+  external
+</symbol>
+</defs>
+</svg>
+<script src="/media/js/lightbox.js" type="text/javascript"></script>
+<script>
+var opts= {
+    //nextOnClick: false,
+    captions: true,
+    onload: function(){
+        var im = document.getElementById("jslghtbx-contentwrapper");
+        var link = im.appendChild(document.createElement('a'))
+        link.href = im.firstChild.src;
+        link.innerHTML= "open ";
+        link.target = "_blank";
+        link.setAttribute('class', 'p-link');
+        im.appendChild(link);
+    }
+}; 
+var lightbox = new Lightbox();
+lightbox.load(opts);
+</script> 
 {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
 <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
 <script src="/media/js/detail.min.js"></script>
diff --git a/design/templates/details/photo_gallery.html b/design/templates/details/photo_gallery.html
index bf2db6d..be25326 100644
--- a/design/templates/details/photo_gallery.html
+++ b/design/templates/details/photo_gallery.html
@@ -34,16 +34,16 @@
                       Your browser does not support the <code>video</code> element.
                       </video>
                     {% else %}
-                    <img sizes="(max-width: 1170px) 100vw"
+                    <img sizes="(max-width: 1140px) 100vw, (min-width: 1141px) 1140px"
                          srcset="{% for size in photo.sizes.all %}{%spaceless%}
                          {% get_image_by_size photo size.width %} {{size.width}}w{% if forloop.last%}"{%else%},{%endif%}{%endspaceless%} {%endfor%}
-                         {% for size in photo.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size photo size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{% if photo.alt %}{{photo.alt}}{%else%}{{photo.title}}{%endif%}" {%if photo.is_portait %}class="v"{%endif%} >
+                         {% for size in photo.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size photo size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{% if photo.alt %}{{photo.alt}}{%else%}{{photo.title}}{%endif%}" p="{{photo.is_portait}}" {%if photo.is_portait %}class="v"{%endif%} >
                          {%endif%}{% if not photo.is_video %}</a>{%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.latitude}}" data-longitude="{{photo.longitude}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%}
+                    {% if object.is_public %}{%if object.latitude %}<a class="map-link" href="#" data-latitude="{{photo.latitude}}" data-longitude="{{photo.longitude}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%}{%endif%}
                     {%if photo.caption%}<p class="figcaption--desc">{{photo.caption|safe}}</p> {%endif%}  
                 </div>
                 <div class="photo-options">
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
new file mode 100644
index 0000000..b1ed854
--- /dev/null
+++ b/design/templates/lib/img_cluster.html
@@ -0,0 +1 @@
+{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}}" src="{% for size in image.sizes.all%}{%if size.name == cluster_class %}{% get_image_by_size image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
diff --git a/design/templates/lib/img_picfull.html b/design/templates/lib/img_picfull.html
index 7e9c23e..f2afdce 100644
--- a/design/templates/lib/img_picfull.html
+++ b/design/templates/lib/img_picfull.html
@@ -2,8 +2,8 @@
 {% if caption %}
 <figure class="picfull">{%endif%}
 <img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px"
-srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-{% for size in image.sizes.all%}{%if forloop.first %}src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
+srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.long_edge %} {{size.long_edge}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
+{% for size in image.sizes.all%}{%if forloop.first %}src="{% get_image_by_size image size.long_edge %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
      {% if caption %}<figcaption>{{image.caption|safe}}</figcaption>
 </figure>
 {% endif %}
diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
index 4e96951..b98bb9b 100644
--- a/design/templates/lib/img_picwide.html
+++ b/design/templates/lib/img_picwide.html
@@ -1,9 +1,9 @@
 {% load get_image_by_size %}
 {% if caption or exif %}
 <figure class="picwide">{%endif%}
-<img class="picwide" sizes="(max-width: 1140px) 100vw, (min-width: 1141px) 1140px"
-srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
+<img class="picwide" sizes="(max-width: 1140px) 100vw, (min-width: 1281px) 1280px"
+srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.long_edge %} {{size.long_edge}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
+{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size.long_edge %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
 {% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption>
 </figure>
 {% endif %}