fixed some image insert bugs, added image id

4 files changed, 18 insertions, 22 deletions

diff --git a/README b/README
index ead54fd..f965295 100644
--- a/README
+++ b/README
@@ -1,8 +1,5 @@
 ToDo:
 
-Add map and photos lazy load 
-source books section, do design
-
 tomaybes:
 build out entry aside model
 Add JavaScript to dynamically build asides. maybe.
diff --git a/app/utils/widgets.py b/app/utils/widgets.py
index f045cee..d588b08 100644
--- a/app/utils/widgets.py
+++ b/app/utils/widgets.py
@@ -120,14 +120,15 @@ from django.template import Context
 def parse_image(s):
     soup = BeautifulSoup(s.group(), "lxml")
     for img in soup.find_all('img'):
-        src = img['src'].split("images/")[1]
-        i = LuxImage.objects.get(image__icontains=src)
+        image_id = img['id'].split("image-")[1]
+        i = LuxImage.objects.get(pk=image_id)
         cl = img['class']
         caption = False
         exif = False
         cluster_class = None
         extra = None
         if cl[0] == 'cluster':
+            css_class = cl[0]
             cluster_class = cl[1]
             try:
                 if cl[2] == 'caption':
@@ -142,13 +143,13 @@ def parse_image(s):
                         exif = True
             except:
                 pass
-        if len(cl) > 1:
+        elif cl[0] != 'cluster' and len(cl) > 1:
             css_class = cl[0]
             if cl[1] == 'caption':
                 caption = True
             if cl[1] == 'exif':
                 exif = True
-        if len(cl) > 2:
+        elif cl[0] != 'cluster' and len(cl) > 2:
             css_class = cl[0]
             if cl[1] == 'caption':
                 caption = True
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 4918ad8..875267e 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -241,18 +241,15 @@ img.picwide {
     margin: 1em 0;
     @include breakpoint(gamma) {
         margin-left: -140px;
-        width: 960px;
-        max-width: 960px;
+        max-width: $breakpoint-gamma;
     }
     @include breakpoint(delta) {
         margin-left: -245px;
-        width: $breakpoint-delta;
         max-width: $breakpoint-delta;
     }
     @include breakpoint(epsilon) {
-        margin-left: -295px;
-        width: $max_width * .98;
-        max-width: $max_width;
+        margin-left: -300px;
+        max-width: $max_width *.99;
     }
 }
 .picwide figcaption {
@@ -276,6 +273,7 @@ img.picwide {
 }
 figure.picwide img.picwide {
     margin: auto !important;
+    padding: .5%;
     @include breakpoint(epsilon) {
         margin-left: 0;
     }
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
index 7602525..70e1965 100644
--- a/design/templates/admin/insert_images.html
+++ b/design/templates/admin/insert_images.html
@@ -33,8 +33,8 @@ figure {
 <script>
 // execute your scripts when the DOM is ready. this is a good habit
 
-function buildImage(image_url, c, caption) {
-    html = '<img src="'+image_url+'" class="';
+function buildImage(image_url, id, c, caption) {
+    html = '<img src="'+image_url+'" id="image-'+id+'" class="';
     if (c) {
         html += c;
     }
@@ -59,7 +59,7 @@ $(function(){
     });
     
     $('.insert').click(function(){
-        var code = buildImage($(this).attr('data-src'), $(this).attr('data-class'), $(this).attr('data-caption'));
+        var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption'));
         var el = parent.document.getElementById('{{textarea_id}}');
         var start = el.selectionStart
         var end = el.selectionEnd
@@ -92,14 +92,14 @@ $(function(){
         <div class="item-wrapper">
         <figure class="item" >
             <img src="{% get_image_by_size image 'tn' %}" />
-            <figcaption>{{image.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
+            <figcaption>{{image.id}} - {{image.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
         </figure>
         <ul class="actions">
-            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picwide" class="insert" href="">full width</a></li>
-            <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 data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" class="insert" href="">full width</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" class="insert" href="">column width</a></li>
+            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" 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-id="{{image.id}}" 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-id="{{image.id}}" 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>