diff options
| -rw-r--r-- | README | 3 | ||||
| -rw-r--r-- | app/utils/widgets.py | 9 | ||||
| -rw-r--r-- | design/sass/_writing_details.scss | 10 | ||||
| -rw-r--r-- | design/templates/admin/insert_images.html | 18 |
4 files changed, 18 insertions, 22 deletions
@@ -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 %}– {{image.caption}}{%endif%}</figcaption> + <figcaption>{{image.id}} - {{image.title}} {% if image.caption %}– {{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> |