diff options
| -rw-r--r-- | app/jrnl/models.py | 38 | ||||
| -rw-r--r-- | app/utils/widgets.py | 4 | ||||
| -rw-r--r-- | design/sass/_header.scss | 4 | ||||
| -rw-r--r-- | design/sass/_mixins.scss | 4 | ||||
| -rw-r--r-- | design/sass/_writing_details.scss | 51 | ||||
| -rw-r--r-- | design/templates/details/page.html | 7 | ||||
| -rw-r--r-- | design/templates/lib/img_cluster.html | 8 |
7 files changed, 73 insertions, 43 deletions
diff --git a/app/jrnl/models.py b/app/jrnl/models.py index 340b718..20d753f 100644 --- a/app/jrnl/models.py +++ b/app/jrnl/models.py @@ -20,6 +20,9 @@ from bs4 import BeautifulSoup from photos.models import PhotoGallery, LuxImage from locations.models import Location +from utils.widgets import parse_image +from utils.widgets import markdown_to_html + def get_upload_path(self, filename): return "images/post-images/%s/%s" % (datetime.datetime.today().strftime("%Y"), filename) @@ -34,36 +37,6 @@ def image_url_replace(s): return s -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) - 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': - exif = True - if len(cl) > 2: - css_class = cl[0] - if cl[1] == 'caption': - caption = True - if cl[2] == 'exif': - exif = True - print('caption'+str(caption)) - else: - css_class = cl[0] - c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class}) - return render_to_string("lib/img_%s.html" % css_class, c) - - def render_images(s): s = re.sub('<img(.*)/>', parse_image, s) return s @@ -187,10 +160,11 @@ class Entry(models.Model): if self.pk: if self.pk >= 167: md = render_images(self.body_markdown) + self.body_html = markdown_to_html(md) 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) + self.body_html = markdown.markdown(md, extensions=['extra'], safe_mode=False) + self.dek = markdown_to_html(self.dek) try: self.location = Location.objects.filter(geometry__contains=self.point).get() except Location.DoesNotExist: diff --git a/app/utils/widgets.py b/app/utils/widgets.py index c688518..f045cee 100644 --- a/app/utils/widgets.py +++ b/app/utils/widgets.py @@ -136,6 +136,10 @@ def parse_image(s): exif = True else: extra = cl[2] + + if len(cl) > 3: + if cl[3] == 'exif': + exif = True except: pass if len(cl) > 1: diff --git a/design/sass/_header.scss b/design/sass/_header.scss index b0c83e0..10174e3 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -132,13 +132,13 @@ nav[role="navigation"] { position: relative; } @include breakpoint(gamma) { - max-width: 960px; + max-width: $breakpoint-gamma; margin-left: auto; margin-right: auto; } @include breakpoint(delta) { margin-top: 1.5em; - max-width: $breakpoint-delta - 40px; + max-width: $breakpoint-delta; } @include breakpoint(epsilon) { margin-top: 1.5em; diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 5144ad9..0e29edf 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -115,10 +115,10 @@ $max_width: 1280px; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { - max-width: $breakpoint-gamma - 20px; + max-width: $breakpoint-gamma; } @include breakpoint(delta) { - max-width: $breakpoint-delta - 40px; + max-width: $breakpoint-delta; } @include breakpoint(epsilon) { max-width: $max_width; diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 2e134a5..4918ad8 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -363,6 +363,9 @@ figure.picwide img.picwide { } } .image-cluster { + .row-2, .row-3, .row-4, .stack-2, .stack-3 { + display: block; + } @include constrain_wide; @extend %clearfix; margin-bottom: 1em; @@ -379,14 +382,21 @@ figure.picwide img.picwide { margin-top: 0; max-width: 100%; } - .picwide { + img.picwide { + margin: 0; + } + figcaption, figure { margin-bottom: 0; + border: none; } - .pic66 { - max-width: 63.9%; + .stack-2 { + float: left; } @include breakpoint(beta-2) { - .picwide { + figure { + max-width: 99%; + } + img.picwide { padding: 0; margin-bottom: 0; max-width: 100%; @@ -394,18 +404,36 @@ figure.picwide img.picwide { background: none; } .row-2 { - a:last-of-type img{ + a:last-of-type img, figure:last-of-type { float: right; } } + .pic66 { + max-width: 63.9%; + } .row-right .pic25 { max-width: 49%; } .pic25 { max-width: 24.5%; } + .stack-2 { + max-width: 32.95%; + float: left; + } + .stack-2 + a img { + max-width: 66.6%; + float: right + } + .right { float: right;} + .right + a img { + float:left + } } @include breakpoint(beta) { + img.picwide { + max-width: 100%; + } div img { width: 100%; padding: 0; @@ -418,17 +446,28 @@ figure.picwide img.picwide { } .pic5 { max-width: 49.5%; - margin: 0 6px 6px 0; + margin: 0; float: left; + figcaption { + padding-bottom: .5em; + } + } + img.pic5 { + margin: 0 0 6px 0; } .pic25 { max-width: 50%; } .row-3 .pic33 { + float: left; max-width: 32.3%; + margin: 0 0 6px 0; } } @include breakpoint(gamma) { + figure { + max-width: 100%; + } .row-right { float: right; } diff --git a/design/templates/details/page.html b/design/templates/details/page.html index 833523a..a09a63a 100644 --- a/design/templates/details/page.html +++ b/design/templates/details/page.html @@ -16,3 +16,10 @@ </div> </article> {% endblock %} +{% block js %} +<script src="/media/js/lightbox.js" type="text/javascript"></script> +<script>var opts={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> +{% endblock %} + + diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html index 9fdd64f..e838252 100644 --- a/design/templates/lib/img_cluster.html +++ b/design/templates/lib/img_cluster.html @@ -1 +1,7 @@ -{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}} {%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> +{% 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> +{% 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 %} |