photo parser now creates size if it doesn't exist and picwide within

image clusters gets responsive images

3 files changed, 8 insertions, 3 deletions

diff --git a/app/photos/models.py b/app/photos/models.py
index ac85a50..4249e6f 100644
--- a/app/photos/models.py
+++ b/app/photos/models.py
@@ -113,6 +113,11 @@ class LuxImage(models.Model):
         if size == "original":
             return "%soriginal/%s/%s.%s" % (settings.IMAGES_URL, self.pub_date.strftime("%Y"), base, self.get_image_ext())
         else:
+            if size != 'tn':
+                s = LuxImageSize.objects.get(name=size)
+                if s not in self.sizes.all():
+                    print("new size is "+s.name)
+                    self.sizes.add(s) 
             return "%s%s/%s_%s.%s" % (settings.IMAGES_URL, self.pub_date.strftime("%Y"), base, size, self.get_image_ext())
 
     def get_image_path_by_size(self, size="original"):
diff --git a/app/utils/widgets.py b/app/utils/widgets.py
index 4f96e38..3c97b12 100644
--- a/app/utils/widgets.py
+++ b/app/utils/widgets.py
@@ -158,8 +158,7 @@ def parse_image(s):
             print('caption'+str(caption))
         else:
             css_class = cl[0]
-        c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class, 'extra':extra})
-        return render_to_string("lib/img_%s.html" % css_class, c)
+        return render_to_string("lib/img_%s.html" % css_class, {'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class, 'extra':extra})
 
 
 def parse_video(s):
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
index e838252..3f1c82f 100644
--- a/design/templates/lib/img_cluster.html
+++ b/design/templates/lib/img_cluster.html
@@ -1,7 +1,8 @@
 {% load get_image_by_size %}
 {% if caption or exif %}
 <figure class="{{cluster_class}}">{%endif%}
-    <a href="{%get_image_by_size image "original"%}" title="view larger image"><img class="{% if caption or exif %}{%else%}{{cluster_class}}{%endif%} {%if extra%}{{extra}}{%endif%}" 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>
+    <a href="{%get_image_by_size image "original"%}" title="view larger image">
+        <img class="{% if caption or exif %}{%else%}{{cluster_class}}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1280px) 100vw, (min-width: 1281px) 1280px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}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.name%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} 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>
 {% 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 %}