Fixed Feed Styling and improved Responsive Banners

mhackspace/base/migrations/0005_auto_20170228_2210.py

@@ -0,0 +1,32 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-28 22:10
+from __future__ import unicode_literals
+
+from django.db import migrations
+import stdimage.models
+import stdimage.utils
+import stdimage.validators
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('base', '0004_merge_20170226_0844'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='bannerimage',
+            name='original_image',
+        ),
+        migrations.RemoveField(
+            model_name='bannerimage',
+            name='scaled_image',
+        ),
+        migrations.AddField(
+            model_name='bannerimage',
+            name='image',
+            field=stdimage.models.StdImageField(default='', upload_to=stdimage.utils.UploadToAutoSlugClassNameDir('title'), validators=[stdimage.validators.MinSizeValidator(1200, 300)]),
+            preserve_default=False,
+        ),
+    ]

mhackspace/base/models.py

@@ -12,22 +12,35 @@ class BannerImage(models.Model):
     url = models.URLField()
     title = models.CharField(max_length=255)
     displayed = models.BooleanField(default=True)
-    original_image = models.URLField(max_length=255, blank=True, null=True)
+    image = StdImageField(
-    scaled_image = StdImageField(
         upload_to=UploadToAutoSlugClassNameDir(populate_from='title'),
-        blank=True,
-        null=True,
         variations={
             'small': {
-                "width": 600,
+                "width": 400,
                 "height": 300,
                 "crop": True},
-            'large': {
+            'small2x': {
-                "width": 1024,
+                "width": 800,
+                "height": 600,
+                "crop": True},
+            'medium': {
+                "width": 800,
                 "height": 300,
+                "crop": True},
+            'medium2x': {
+                "width": 1600,
+                "height": 600,
+                "crop": True},
+            'large': {
+                "width": 1200,
+                "height": 300,
+                "crop": True},
+            'large2x': {
+                "width": 2400,
+                "height": 600,
                 "crop": True}},
         validators=[
-            MinSizeValidator(1200, 300)])
+            MinSizeValidator(2400, 600)])
 
     caption = models.TextField()
     date = models.DateTimeField(default=timezone.now)

mhackspace/base/templatetags/banner_images.py

@@ -6,5 +6,5 @@ register = template.Library()
 
 @register.inclusion_tag('partials/banner_list.html')
 def show_banner_images():
-    return {'bannerlist': BannerImage.objects.all(), 'test': 'abc'}
+    return {'bannerlist': BannerImage.objects.all()}
 

mhackspace/blog/migrations/0004_auto_20170228_2210.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-28 22:10
+from __future__ import unicode_literals
+
+from django.db import migrations
+import draceditor.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0003_auto_20170215_2348'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='post',
+            name='description',
+            field=draceditor.models.DraceditorField(),
+        ),
+    ]

mhackspace/static/sass/components/_feeds.scss

@@ -14,10 +14,14 @@
   }
 }
 
+.card-deck {
+    margin-bottom: 30px; 
+}
+
 .card-title {
   color: $body-color;
 }
 
 #feeds img {
   width: 100%;
-}
+}

mhackspace/static/sass/project.scss

@@ -6,8 +6,7 @@
 @import "components/header";
 @import "components/membership";
 @import "components/footer";
-
+@import "components/feeds";
-@import "pages/home";
 
 ////////////////////////////////
 		//Django Toolbar//

mhackspace/templates/feeds/list.html

@@ -2,8 +2,7 @@
 {% get_static_prefix as STATIC_PREFIX %}
 
 <h3 class="mb-1">See what our members have been creating below.</h3>
-<br />
+<div id="feeds">
-<div class="card-columns" id="feeds">
   <div class="card-deck">
     {% for article in articles %}
       <div class="card">

mhackspace/templates/partials/banner_list.html

@@ -1,20 +1,21 @@
 {% load static %}
-<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+{% if bannerlist %}
-  <div class="carousel-inner" role="listbox" style="height:300px;">
+<div id="carouselExampleSlidesOnly" class="carousel slide mb-4" data-ride="carousel">
+  <div class="carousel-inner" role="listbox">
     {% for banner in bannerlist %}
-      {% if banner.scaled_image%}
         <div class="carousel-item {% if forloop.first %}active{% endif %}">
           <picture>
-            <source class="img-fluid" srcset="{{ banner.scaled_image.url }}" media="(min-width: 600px)" />
+            <source class="img-fluid" srcset="{{ banner.image.small.url }}, {{ banner.image.small2x.url }} 2x" media="(max-width: 400px)" />
-            <img class="img-fluid" src="{{ banner.scaled_image.url }}" alt="">
+            <source class="img-fluid" srcset="{{ banner.image.medium.url }}, {{ banner.image.medium2x.url }} 2x" media="(max-width: 768px)" />
+            <source class="img-fluid" srcset="{{ banner.image.large.url }}, {{ banner.image.large2x.url }} 2x" />
+            <img class="img-fluid" src="{{ banner.image.large.url }}" alt="{{ banner.title }}">
           </picture>
           <div class="carousel-caption d-none d-md-block">
             <h3>{{ banner.title }}</h3>
             <p>{{ banner.description |truncatewords:30}}</p>
           </div>
         </div>
-      {% endif %}
     {% endfor %}
   </div>
 </div>
-
+{% endif %}