added a new image parser to pull in images from the LuxImage model and

inline them with size and srcset support

3 files changed, 50 insertions, 2 deletions

diff --git a/app/jrnl/models.py b/app/jrnl/models.py
index 834b643..511ac8c 100644
--- a/app/jrnl/models.py
+++ b/app/jrnl/models.py
@@ -1,10 +1,13 @@
 import datetime
 import os
+import re
 
 from django.contrib.gis.db import models
 from django.utils.html import format_html
 from django.core.urlresolvers import reverse
+from django.template.loader import render_to_string
 from django.conf import settings
+from django.template import Context
 from django.contrib.syndication.views import Feed
 from django.contrib.sitemaps import Sitemap
 from django import forms
@@ -14,7 +17,7 @@ from django.template.defaultfilters import slugify
 import markdown
 from bs4 import BeautifulSoup
 
-from photos.models import PhotoGallery
+from photos.models import PhotoGallery, LuxImage
 from locations.models import Location
 
 
@@ -31,6 +34,30 @@ def image_url_replace(s):
     return 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
+        if len(cl) > 1:
+            css_class = cl[0]
+            if cl[1] == 'caption':
+                caption = True
+        else:
+            css_class = cl[0]
+        c = Context({'image': i, 'caption': caption})
+        return render_to_string("lib/img_%s.html" % css_class, c)
+
+
+def render_images(s):
+    s = re.sub('<img(.*)/>', parse_image, s)
+    return s
+
+
 def extract_images(s):
     soup = BeautifulSoup(s, "lxml")
     imgs = []
@@ -159,7 +186,10 @@ class Entry(models.Model):
         return self.get_next_by_pub_date(status__exact=1)
 
     def save(self):
-        md = image_url_replace(self.body_markdown)
+        if self.pk >= 161:
+            md = render_images(self.body_markdown)
+        else:
+            md = image_url_replace(self.body_markdown)
         self.body_html = markdown.markdown(md, extensions=['extra'], safe_mode=False)
         self.dek == markdown.markdown(self.dek, safe_mode=False)
         try:
diff --git a/design/templates/lib/img_picfull.html b/design/templates/lib/img_picfull.html
new file mode 100644
index 0000000..5dba01d
--- /dev/null
+++ b/design/templates/lib/img_picfull.html
@@ -0,0 +1,9 @@
+{% load get_image_by_size %}
+{% 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%}">
+     {% if caption %}<figcaption>{{image.caption}}</figcaption>
+</figure>
+{% endif %}
diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
new file mode 100644
index 0000000..065ff6c
--- /dev/null
+++ b/design/templates/lib/img_picwide.html
@@ -0,0 +1,9 @@
+{% load get_image_by_size %}
+{% if caption %}
+<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%}">
+     {% if caption %}<figcaption>{{image.caption}}</figcaption>
+</figure>
+{% endif %}