diff options
29 files changed, 739 insertions, 70 deletions
diff --git a/app/books/migrations/0003_auto_20161023_2014.py b/app/books/migrations/0003_auto_20161023_2014.py new file mode 100644 index 0000000..809c465 --- /dev/null +++ b/app/books/migrations/0003_auto_20161023_2014.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-23 20:14 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('books', '0002_book_is_public'), + ] + + operations = [ + migrations.AlterField( + model_name='book', + name='image', + field=models.FileField(blank=True, null=True, upload_to='/home/lxf/sites/luxagraf/site/media/images/book-covers/'), + ), + ] diff --git a/app/daily/migrations/0010_auto_20161023_2014.py b/app/daily/migrations/0010_auto_20161023_2014.py new file mode 100644 index 0000000..72a68cf --- /dev/null +++ b/app/daily/migrations/0010_auto_20161023_2014.py @@ -0,0 +1,19 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-23 20:14 +from __future__ import unicode_literals + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('daily', '0009_remove_daily_title'), + ] + + operations = [ + migrations.AlterModelOptions( + name='daily', + options={'get_latest_by': 'date', 'ordering': ('-date',)}, + ), + ] diff --git a/app/jrnl/models.py b/app/jrnl/models.py index ceaefa6..2fc775e 100644 --- a/app/jrnl/models.py +++ b/app/jrnl/models.py @@ -37,15 +37,16 @@ def image_url_replace(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 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': @@ -59,7 +60,7 @@ def parse_image(s): print('caption'+str(caption)) else: css_class = cl[0] - c = Context({'image': i, 'caption': caption, 'exif': exif}) + c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class}) return render_to_string("lib/img_%s.html" % css_class, c) @@ -72,7 +73,10 @@ def extract_images(s): soup = BeautifulSoup(s, "lxml") imgs = [] for img in soup.find_all('img'): - imgs.append(img['src']) + try: + imgs.append(img['src']) + except: + pass return imgs diff --git a/app/jrnl/views.py b/app/jrnl/views.py index c68625d..6d0e85b 100644 --- a/app/jrnl/views.py +++ b/app/jrnl/views.py @@ -7,6 +7,7 @@ from django.conf import settings from utils.views import PaginatedListView from .models import Entry, HomepageCurrator +from daily.models import CheckIn from locations.models import Country, Region @@ -84,7 +85,8 @@ class HomepageList(ListView): Return a main entry and list of Entries in reverse chronological order """ context_object_name = 'recent' - queryset = Entry.objects.filter(status__exact=1)[:5] + exclude = HomepageCurrator.objects.get(pk=1) + queryset = Entry.objects.filter(status__exact=1).exclude(pk=exclude.featured.pk)[:8] def get_template_names(self): obj = HomepageCurrator.objects.get(pk=1) @@ -94,6 +96,7 @@ class HomepageList(ListView): # Call the base implementation first to get a context context = super(HomepageList, self).get_context_data(**kwargs) context['homepage'] = HomepageCurrator.objects.get(pk=1) + context['location'] = CheckIn.objects.get(pk=1) context['IMAGES_URL'] = settings.IMAGES_URL return context diff --git a/app/photos/admin.py b/app/photos/admin.py index 22de1fd..f0eb1c7 100644 --- a/app/photos/admin.py +++ b/app/photos/admin.py @@ -13,6 +13,7 @@ from .forms import UploadZipForm, GalleryForm class LuxImageSizeAdmin(OSMGeoAdmin): + list_display = ('name', 'width', 'height', 'quality') pass diff --git a/app/photos/forms.py b/app/photos/forms.py index 4e00189..06e829d 100644 --- a/app/photos/forms.py +++ b/app/photos/forms.py @@ -151,7 +151,7 @@ class UploadZipForm(forms.Form): if file_extension != ".mp4": img = Image.open(image.image.path) if img.size[0] > img.size[1]: - image.sizes.add(LuxImageSize.objects.get(width=2280)) + image.sizes.add(LuxImageSize.objects.get(width=2560)) image.sizes.add(LuxImageSize.objects.get(width=1140)) image.sizes.add(LuxImageSize.objects.get(width=720)) if img.size[1] > img.size[0]: diff --git a/app/photos/migrations/0011_luximagesize_name.py b/app/photos/migrations/0011_luximagesize_name.py new file mode 100644 index 0000000..49d046b --- /dev/null +++ b/app/photos/migrations/0011_luximagesize_name.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-21 08:46 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0010_auto_20160517_0906'), + ] + + operations = [ + migrations.AddField( + model_name='luximagesize', + name='name', + field=models.CharField(blank=True, max_length=30, null=True), + ), + ] diff --git a/app/photos/migrations/0012_luximagesize_is_portrait.py b/app/photos/migrations/0012_luximagesize_is_portrait.py new file mode 100644 index 0000000..a2c2e3a --- /dev/null +++ b/app/photos/migrations/0012_luximagesize_is_portrait.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-22 13:46 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0011_luximagesize_name'), + ] + + operations = [ + migrations.AddField( + model_name='luximagesize', + name='is_portrait', + field=models.BooleanField(default=False), + ), + ] diff --git a/app/photos/migrations/0013_auto_20161022_1348.py b/app/photos/migrations/0013_auto_20161022_1348.py new file mode 100644 index 0000000..8dfbf98 --- /dev/null +++ b/app/photos/migrations/0013_auto_20161022_1348.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-22 13:48 +from __future__ import unicode_literals + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0012_luximagesize_is_portrait'), + ] + + operations = [ + migrations.RenameField( + model_name='luximagesize', + old_name='width', + new_name='long_edge', + ), + ] diff --git a/app/photos/migrations/0014_remove_luximagesize_is_portrait.py b/app/photos/migrations/0014_remove_luximagesize_is_portrait.py new file mode 100644 index 0000000..b8e0aa8 --- /dev/null +++ b/app/photos/migrations/0014_remove_luximagesize_is_portrait.py @@ -0,0 +1,19 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-22 14:11 +from __future__ import unicode_literals + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0013_auto_20161022_1348'), + ] + + operations = [ + migrations.RemoveField( + model_name='luximagesize', + name='is_portrait', + ), + ] diff --git a/app/photos/migrations/0015_auto_20161022_1411.py b/app/photos/migrations/0015_auto_20161022_1411.py new file mode 100644 index 0000000..d380b52 --- /dev/null +++ b/app/photos/migrations/0015_auto_20161022_1411.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-22 14:11 +from __future__ import unicode_literals + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0014_remove_luximagesize_is_portrait'), + ] + + operations = [ + migrations.RenameField( + model_name='luximagesize', + old_name='long_edge', + new_name='width', + ), + ] diff --git a/app/photos/migrations/0016_auto_20161022_1411.py b/app/photos/migrations/0016_auto_20161022_1411.py new file mode 100644 index 0000000..54b84d7 --- /dev/null +++ b/app/photos/migrations/0016_auto_20161022_1411.py @@ -0,0 +1,25 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-22 14:11 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('photos', '0015_auto_20161022_1411'), + ] + + operations = [ + migrations.AddField( + model_name='luximagesize', + name='height', + field=models.IntegerField(blank=True, null=True), + ), + migrations.AlterField( + model_name='luximagesize', + name='width', + field=models.IntegerField(blank=True, null=True), + ), + ] diff --git a/app/photos/models.py b/app/photos/models.py index 6940110..4207ad4 100644 --- a/app/photos/models.py +++ b/app/photos/models.py @@ -1,10 +1,13 @@ import os.path +import io import datetime from PIL import Image +from django.core.exceptions import ValidationError from django.contrib.gis.db import models from django.contrib.sitemaps import Sitemap from django.utils.encoding import force_text +from django.utils.text import slugify from django.conf import settings from taggit.managers import TaggableManager @@ -24,15 +27,20 @@ def get_upload_path(self, filename): class LuxImageSize(models.Model): - width = models.IntegerField() + name = models.CharField(null=True, blank=True, max_length=30) + width = models.IntegerField(null=True, blank=True) + height = models.IntegerField(null=True, blank=True) quality = models.IntegerField() class Meta: verbose_name_plural = 'Image Sizes' def __str__(self): - return str(self.width) - + if self.width: + size = self.width + if self.height: + size = self.height + return "%s - %s" %(self.name, str(size)) class LuxImage(models.Model): image = models.FileField(blank=True, null=True, upload_to=get_upload_path) @@ -75,8 +83,9 @@ class LuxImage(models.Model): def get_admin_image(self): for size in self.sizes.all(): - if size.width <= 800: - return self.get_image_by_size(size) + if size.width and size.width <= 820 or size.height and size.height<=800: + print("Size name" +size.name) + return self.get_image_by_size(size.name) def get_largest_image(self): t = [] @@ -139,12 +148,21 @@ class LuxImage(models.Model): n = self.get_next_by_pub_date() return "/admin/photos/luximage/%s/change/" % n.pk + @property + def is_portait(self): + if int(self.height) > int(self.width): + return True + else: + return False @receiver(post_save, sender=LuxImage) def post_save_events(sender, update_fields, created, instance, **kwargs): if instance.exif_raw == '': filename, file_extension = os.path.splitext(instance.image.path) if file_extension != ".mp4": + img = Image.open(instance.image.path) + instance.height = img.height + instance.width = img.width instance = readexif(instance) post_save.disconnect(post_save_events, sender=LuxImage) instance.save() @@ -159,16 +177,24 @@ def update_photo_sizes(sender, instance, **kwargs): img = Image.open(instance.image.path) resize_image(img, 160, None, 78, base_path, "%s_tn.%s" % (instance.get_image_name(), instance.get_image_ext())) for size in instance.sizes.all(): - if img.size[0] > img.size[1]: + if size.width: + print("Image width is:"+str(img.width)) try: - resize_image(img, size.width, None, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), size.width, instance.get_image_ext())) + if size.width <= img.width: + resize_image(img, size.width, None, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), slugify(size.name), instance.get_image_ext())) + else: + raise ValidationError({'items': ["Size is larger than source image"]}) except ImageSizeError: m2m_changed.disconnect(update_photo_sizes, sender=LuxImage.sizes.through) instance.sizes.remove(size) m2m_changed.connect(update_photo_sizes, sender=LuxImage.sizes.through) - if img.size[1] > img.size[0]: + if size.height: try: - resize_image(img, None, size.width, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), size.width, instance.get_image_ext())) + if size.height <= img.height: + resize_image(img, None, size.height, size.quality, base_path, "%s_%s.%s" % (instance.get_image_name(), slugify(size.name), instance.get_image_ext())) + + else: + pass except ImageSizeError: m2m_changed.disconnect(update_photo_sizes, sender=LuxImage.sizes.through) instance.sizes.remove(size) @@ -205,10 +231,12 @@ class LuxGallery(models.Model): return "/photos/galleries/private/%s" % (self.slug) def latitude(self): - return self.point.y + if self.point: + return self.point.y def longitude(self): - return self.point.x + if self.point: + return self.point.x def thumbs(self): lst = [x.image.name for x in self.images.all()] diff --git a/app/syndication/migrations/0003_auto_20161023_2014.py b/app/syndication/migrations/0003_auto_20161023_2014.py new file mode 100644 index 0000000..2b311fb --- /dev/null +++ b/app/syndication/migrations/0003_auto_20161023_2014.py @@ -0,0 +1,19 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9 on 2016-10-23 20:14 +from __future__ import unicode_literals + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('syndication', '0002_auto_20160628_2149'), + ] + + operations = [ + migrations.AlterModelOptions( + name='fboauthtoken', + options={'get_latest_by': 'expires', 'ordering': ('-expires',)}, + ), + ] diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 8f4b207..b0c83e0 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -138,7 +138,11 @@ nav[role="navigation"] { } @include breakpoint(delta) { margin-top: 1.5em; - max-width: 1170px; + max-width: $breakpoint-delta - 40px; + } + @include breakpoint(epsilon) { + margin-top: 1.5em; + max-width: $max_width; } } diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss index 6582da5..bea884d 100644 --- a/design/sass/_homepage.scss +++ b/design/sass/_homepage.scss @@ -44,32 +44,45 @@ } .homepage--bright { + max-width: 100%; + @extend %clearfix; article { margin-top: 0; margin-bottom: 20px; - width: 100%; - } - @include breakpoint(alpha) { max-width: 100%; + } + .odd, .even { margin-left: 0; margin-right: 0; padding-left: 0;} + @include breakpoint(delta) { margin-left: 0; + float: right; + max-width: 33%; article { float: left; - width: 47%; + width: 45%; margin-left: 1em; } + .odd { margin-right: 10px;} } @include breakpoint(gamma) { - float: left; - width: 250px; + float: right; + max-width: 33%; margin-top: 0; article { - float: none; - width: 100%; - margin-left: 0; + max-width: 100%; } } - @include breakpoint(delta) { - width: 340px; + @include breakpoint(beta) { + margin-top: 0; + article { + max-width: 50%; + } + } + @include breakpoint(beta-2) { + margin-top: 0; + article { + max-width: 47%; + } + .odd { margin-right: 10px;} } .post--image { margin-left: 0 !important; @@ -78,6 +91,7 @@ overflow: hidden; img { max-width: 100%; + width: 100%; display: block; /* just in case, to force correct aspect ratio */ height: auto !important; @@ -85,16 +99,60 @@ /* lt ie8 */ -ms-interpolation-mode: bicubic; } + @include breakpoint(epsilon){ + max-height: 160px; + } + } +} +.homepage--arc-big { + max-width: 100%; + @include breakpoint(gamma) { + float: left; + max-width: 63%; + article { + max-width: 47%; + width: 47%; + } + } + @include breakpoint(delta) { + float: left; + max-width: 63%; + article { + max-width: 49%; + + } + } +} +.popular { + @include breakpoint(gamma) { + article { + width: 100%; + max-width: 100%; + } + } + @include breakpoint(epsilon) { + float: right; + max-width: 33%; } } .homepage--next { - padding: 6px 0; - @include smcaps; + @extend %clearfix; + @include fontsize(14); + font-family: sans-serif; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; text-decoration: none; - &:after { + padding: 9px 10px 8px; + border: $link_color 1px solid; + a:after { content: "\21E2"; margin-left: 4px; } + a:hover { + background: $link_color; + color: white; + } } .has-hero { .header-wrapper { diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 29b424e..bd3c5a1 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -6,6 +6,7 @@ $body_font: $brown; $body_font_light: #b3aeae; //$light; +$max_width: 1280px; @mixin smcaps { text-transform: uppercase; @@ -113,9 +114,12 @@ $body_font_light: #b3aeae; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { - max-width: 960px; + max-width: $breakpoint-gamma - 20px; } @include breakpoint(delta) { - max-width: 1170px; + max-width: $breakpoint-delta - 40px; + } + @include breakpoint(epsilon) { + max-width: $max_width; } } diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss index c0f51ef..d152bf4 100644 --- a/design/sass/_photos.scss +++ b/design/sass/_photos.scss @@ -222,3 +222,285 @@ // padding-bottom: 0.25em; // } //} + +//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss + +/** +* VARS +**/ + +// font-sizes +$font-size-huge: 2.8em; +$font-size-big: 2em; +$font-size-medium: 1.4em; + +$def-color-1: #FFFFFF; +$def-color-2: #B9CED2; + +$border-color-1: #9C9FA5; + +$def-font-color: #6c7176; +$font-color-highlight: #A99929; +$font-color-hover-1: #C3B919; + +$darkblue: #3F658B; +@mixin prefixr($var, $val) { + -webkit-#{$var}: $val; + -moz-#{$var}: $val; + -o-#{$var}: $val; + -ms-#{$var}: $val; + $var: $val; +} + +/* IE8 Stuff */ +.jslghtbx-ie8.jslghtbx { + background-image: url('../img/trans-bck.png'); + display: none; + &.jslghtbx-active { + display: block; + } + .jslghtbx-contentwrapper > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + display: block; + } + .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + } +} + +/* Main wrapper */ +.jslghtbx { + font-family: sans-serif; + overflow: auto; + visibility: hidden; + position: fixed; + z-index: 2; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + &.jslghtbx-active { + visibility: visible; + background-color: rgba(0, 0, 0, 0.85); + } +} + +/* loading-animation */ +.jslghtbx-loading-animation { + margin-top: -60px; + margin-left: -60px; + width: 120px; + height: 120px; + top: 50%; + left: 50%; + display: none; + position: absolute; + z-index: -1; + & > span { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 20px; + margin: 5px; + background-color: #fff; + @include prefixr(transition, all .3s ease-in-out); + &.jslghtbx-active { + margin-bottom: 60px; + } + } +} + +.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation { + display: block; +} + +.jslghtbx-nooverflow { + overflow: hidden !important; // prevent showing of scrollbars on prev/next +} + +.jslghtbx-contentwrapper { + margin: auto; + visibility: hidden; + & > img { + background: #fff; + padding: .5em; + display: none; + height: auto; + margin-left: auto; + margin-right: auto; + opacity: 0; + } +} + +.jslghtbx-contentwrapper.jslghtbx-wrapper-active { + visibility: visible; + & > img { + display: block; + opacity: 1; + } +} + +/* Caption */ +.jslghtbx-caption { + display: none; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + max-width: 450px; + color: #fff; + text-align: center; + font-size: .9em; +} + +.jslghtbx-active .jslghtbx-caption { + display: inline; + margin-right: 1em; +} + +/* Animation Stuff */ +.jslghtbx-contentwrapper.jslghtbx-animate > img { + opacity: 0; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + @include prefixr(transition, opacity .2s ease-in-out); +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-next { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-prev { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-init { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + cursor: pointer; +} + +/* Controls */ +.jslghtbx-close { + position: fixed; + right: 23px; + top: 23px; + margin-top: -4px; + font-size: 2em; + color: $def-color-1; + cursor: pointer; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + text-shadow: 0 0 10px #fff; + } + @media screen and(max-width: 1060px) { + font-size: 1.5em; + } +} + +.jslghtbx-next, +.jslghtbx-prev { + display: none; + position: fixed; + top: 50%; + max-width: 6%; + max-height: 250px; + cursor: pointer; + @include prefixr(transition, all .2s ease-in-out); + &.jslghtbx-active { + display: block; + } + & > img { + width: 100%; + } + +} + +.jslghtbx-next { + right: .6em; + &.jslghtbx-no-img:hover { + border-left-color: #787878; + } + @media screen and(min-width: 451px) { + right: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-left: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + right: 5px; + padding-left: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + right: .2em; + padding-left: 20px; + } +} + +.jslghtbx-prev { + left: .6em; + &.jslghtbx-no-img:hover { + border-right-color: #787878; + } + @media screen and(min-width: 451px) { + left: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-right: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + left: 5px; + padding-right: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-right: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + left: .2em; + padding-right: 20px; + } +} + +.jslghtbx-thmb { + @media screen and(min-width: 451px) { + margin: 1em; + } + @media screen and(max-width: 450px) { + margin: 1em 0; + } + padding: 2px; + max-width: 100%; + max-height: 140px; + cursor: pointer; + box-shadow: 0px 0px 3px 0px #000; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + box-shadow: 0px 0px 14px 0px #000; + } +} + +.p-link { + color: white !important; + @include fontsize(14); + &:after { + content: "\2197"; + } +} diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 8262c84..682d83b 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -2,9 +2,9 @@ $breakpoint-alpha: 38em; $breakpoint-alpha-2: 450px; $breakpoint-beta: 49em; $breakpoint-beta-2: 620px; -$breakpoint-gamma: 56em; -$breakpoint-delta: 73.125em; -$breakpoint-epsilon: 79.625em; +$breakpoint-gamma: 960px; +$breakpoint-delta: 1170px; +$breakpoint-epsilon: $max_width; @mixin breakpoint($point) { @if $point == "alpha" { diff --git a/design/sass/_writing_archive.scss b/design/sass/_writing_archive.scss index 0f5f52b..91b5e46 100644 --- a/design/sass/_writing_archive.scss +++ b/design/sass/_writing_archive.scss @@ -117,4 +117,31 @@ line-height: 36px; } } +.homepage--about .homepage--arc-header:after{ + @extend %clearfix; + display: block; + width: 100%; + margin: 2em auto 1em; + height: 150px; + background: url("/media/img/usa-resize.svg") 50% no-repeat; + background-size: 230px; + @include breakpoint(gamma) { + display: inline; + width: 0; + height: 0; + background: none; + } +} +.homepage--about { + @include breakpoint(gamma) { + background: url("/media/img/usa-resize.svg") 0 60% no-repeat; + background-size: 120px; + } + @include breakpoint(delta) { + background-size: 170px; + } + @include breakpoint(epsilon) { + background-size: 250px; + } +} diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 6a63871..33d6729 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -246,8 +246,13 @@ img.picwide { } @include breakpoint(delta) { margin-left: -245px; - width: 1140px; - max-width: 1140px; + width: $breakpoint-delta; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-left: -245px; + width: $max_width * .98; + max-width: $max_width; } } .picwide figcaption { @@ -257,12 +262,16 @@ img.picwide { @include generic_sans; @include breakpoint(gamma) { text-align: right; - width: 960px; - max-width: 960px; + width: $breakpoint-gamma; + max-width: $breakpoint-gamma; } @include breakpoint(delta) { - width: 1170px; - max-width: 1170px; + width: $breakpoint-delta; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + width: $max_width; + max-width: $max_width; } } figure.picwide > img.picwide { @@ -350,6 +359,41 @@ figure.picwide > img.picwide { } } } +.image-cluster { + @include constrain_wide; + @extend %clearfix; + margin-bottom: 1em; + div img { + float: left; + width: 100%; + padding: 0; + margin: 0 6px 6px 0; + } + div a:last-of-type { + img { + margin-right: 0; + } + } + .picwide { + margin: 0; + padding: 0; + max-width: 100%; + width: 100%; + background: none; + } +} +.pic66 { + max-width: 63.9%; +} +.pic33 { + max-width: 35.5%; +} +.row-3 .pic33 { + max-width: 33%; +} +.pic5 { + max-width: 49.5%; +} .embed-wrapper { @include constrain_wide; diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html index caaa790..7602525 100644 --- a/design/templates/admin/insert_images.html +++ b/design/templates/admin/insert_images.html @@ -99,6 +99,7 @@ $(function(){ <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 href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li> </ul> </div> diff --git a/design/templates/archives/gallery_list.html b/design/templates/archives/gallery_list.html index 99252ef..91e04cb 100644 --- a/design/templates/archives/gallery_list.html +++ b/design/templates/archives/gallery_list.html @@ -33,6 +33,7 @@ <article id="image-{{forloop.counter}}" class="photo-gallery"> <a href="{{object.get_absolute_url}}" title="view images from {{ object.title }}"> <img sizes="(max-width: 1170px) 100vw" + {{object.thumb}} srcset="{% for size in object.thumb.sizes.all %}{%spaceless%} {% get_image_by_size object.thumb size.width %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endspaceless%}{%endfor%} {% for size in object.thumb.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size object.thumb size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{{object.title}}" {%if photo.is_portait %}class="v"{%endif%} ></a> @@ -42,8 +43,8 @@ <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if object.location.state.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/photos/united-states/" title="all galleries from the United States">{{object.location.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.state.country.name}}</a>{%endif%} <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> - <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> - <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> + {%if object.latitude%}<data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>{%endif%} + {%if object.longitude%}<data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>{%endif%} </span> </span> {%if object.description%}<p>{{object.description|safe|smartypants|widont}}</p>{%endif%} diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html index fe41b25..1d72862 100644 --- a/design/templates/archives/homepage-light.html +++ b/design/templates/archives/homepage-light.html @@ -47,16 +47,17 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz </section> <div class="homepage--about homepage--section"> <h3 class="homepage--arc-header">About Luxagraf</h3> - <p>Luxagraf is my notebook. Something that, in an earlier age, I would have long ago lost in the backseat of a taxi. </p> - <p>Or something like that. It could just be a website. Except that I don’t do lists. And I’m not trying to make money off of it.</p><p>Whatever it is, whatever brought you here, I hope you enjoy it.</p> + <p>Luxagraf is the notebook I use to record things for posterity. Something that, in an earlier age, you'd accidentally leave in the backseat of a taxi. Here it exists as long as there's energy to keep the internet on.</p> + <p>About us: We're currently exploring North America in our new home, a 1969 Dodge Travco RV.</p> + <p>We left our former home in Athens, GA in the autumn of 2016. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map over there has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. </p> </div> <div class="homepage--section"> - <section class="archive homepage--archives"> - <h1 class="homepage--arc-header">Most Popular</h1> - {% for object in homepage.popular.all %} - <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <section class="homepage--bright archive homepage--arc-big"> + <h1 class="homepage--arc-header">Most Recent</h1> + {% for object in recent %} + <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article"> <div class="post--image"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> </div> <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2> <p class="p-author author hide" itemprop="author">Scott Gilbertson</p> @@ -68,15 +69,14 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> </span> - </span> + </span> </p> - </article> {% endfor %} - <p><a href="/jrnl/" class="homepage--next">Read More</a></p> + </article>{% endfor %} </section> - <section class="homepage--bright archive"> - <h1 class="homepage--arc-header">Most Recent</h1> - {% for object in recent %}{% if object.pk != homepage.featured.pk %} - <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <section class="archive homepage--bright popular"> + <h1 class="homepage--arc-header">Popular</h1> + <div class="arc-col">{% for object in homepage.popular.all %} + <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article"> <div class="post--image"> <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> </div> @@ -90,10 +90,11 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> </span> - </span> + </span> </p> - </article> {%endif%}{% endfor %} + </article> {% endfor %}</div> </section> + <p class="homepage--next"><a href="/jrnl/">Browse the Archives</a></p> </div> {% endblock %} diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html index 494f926..a2b6873 100644 --- a/design/templates/details/entry.html +++ b/design/templates/details/entry.html @@ -7,7 +7,6 @@ {% block metadescription %}{% autoescape on %}{{object.meta_description|striptags|safe}}{% endautoescape %}{% endblock %} {%block extrahead%} <link rel="canonical" href="https://luxagraf.net{{object.get_absolute_url}}" /> - <link rel="amphtml" href="https://luxagraf.net{{object.get_absolute_url}}.amp" /> <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" /> <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" /> <meta name="geo.placename" content="{% if object.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> @@ -86,6 +85,35 @@ class="{%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == {%endif%} {% endblock %} {% block js %} +<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<defs> +<symbol id="icon-external" viewBox="0 0 12 12"> +<title>external</title> +<path fill="#FFF" stroke="#fff" stroke-width="10" d="m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z"/> +</svg> +<!--Fallback --> + external +</symbol> +</defs> +</svg> +<script src="/media/js/lightbox.js" type="text/javascript"></script> +<script> +var opts= { + //nextOnClick: false, + 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> {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} <script src="/media/js/leaflet-master/leaflet-mod.js"></script> <script src="/media/js/detail.min.js"></script> diff --git a/design/templates/details/photo_gallery.html b/design/templates/details/photo_gallery.html index bf2db6d..be25326 100644 --- a/design/templates/details/photo_gallery.html +++ b/design/templates/details/photo_gallery.html @@ -34,16 +34,16 @@ Your browser does not support the <code>video</code> element. </video> {% else %} - <img sizes="(max-width: 1170px) 100vw" + <img sizes="(max-width: 1140px) 100vw, (min-width: 1141px) 1140px" srcset="{% for size in photo.sizes.all %}{%spaceless%} {% get_image_by_size photo size.width %} {{size.width}}w{% if forloop.last%}"{%else%},{%endif%}{%endspaceless%} {%endfor%} - {% for size in photo.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size photo size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{% if photo.alt %}{{photo.alt}}{%else%}{{photo.title}}{%endif%}" {%if photo.is_portait %}class="v"{%endif%} > + {% for size in photo.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size photo size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{% if photo.alt %}{{photo.alt}}{%else%}{{photo.title}}{%endif%}" p="{{photo.is_portait}}" {%if photo.is_portait %}class="v"{%endif%} > {%endif%}{% if not photo.is_video %}</a>{%endif%} <figcaption class="figcaption"> <div class="caption" id="id-{{photo.id}}"> <h3 class="figcaption--title">{{photo.title}}</h3> <time class="figcaption--date" datetime="{{photo.exif_date|date:'c'}}">{{photo.exif_date|date:"M j, Y"}}</time> - {% if object.is_public %}<a class="map-link" href="#" data-latitude="{{photo.latitude}}" data-longitude="{{photo.longitude}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%} + {% if object.is_public %}{%if object.latitude %}<a class="map-link" href="#" data-latitude="{{photo.latitude}}" data-longitude="{{photo.longitude}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%}{%endif%} {%if photo.caption%}<p class="figcaption--desc">{{photo.caption|safe}}</p> {%endif%} </div> <div class="photo-options"> diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html new file mode 100644 index 0000000..b1ed854 --- /dev/null +++ b/design/templates/lib/img_cluster.html @@ -0,0 +1 @@ +{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}}" 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> diff --git a/design/templates/lib/img_picfull.html b/design/templates/lib/img_picfull.html index 7e9c23e..f2afdce 100644 --- a/design/templates/lib/img_picfull.html +++ b/design/templates/lib/img_picfull.html @@ -2,8 +2,8 @@ {% 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%}"> +srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.long_edge %} {{size.long_edge}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%} +{% for size in image.sizes.all%}{%if forloop.first %}src="{% get_image_by_size image size.long_edge %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> {% if caption %}<figcaption>{{image.caption|safe}}</figcaption> </figure> {% endif %} diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html index 4e96951..b98bb9b 100644 --- a/design/templates/lib/img_picwide.html +++ b/design/templates/lib/img_picwide.html @@ -1,9 +1,9 @@ {% load get_image_by_size %} {% if caption or exif %} <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%}"> +<img class="picwide" sizes="(max-width: 1140px) 100vw, (min-width: 1281px) 1280px" +srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.long_edge %} {{size.long_edge}}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.long_edge %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> {% 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 %} |