Update Instagram feed with a slider

diff --git a/app/static/src/js/modules/instagram.js b/app/static/src/js/modules/instagram.js
index f261edc435e5920fbb61d5da1044d5947eed7a83..169b4389f36f46a36d2677ae1748ffa73283cae9 100644 (file)
--- a/app/static/src/js/modules/instagram.js
+++ b/app/static/src/js/modules/instagram.js
@@ -13,6 +13,28 @@ Instagram.prototype.init = function() {
 
     var that = this;
 
+    $('.instagram').lightSlider({
+        item: 3,
+        slideMargin: 0,
+        pager: false,
+        loop: true,
+        auto: true,
+        pauseOnHover: true,
+        responsive: [
+            {
+                breakpoint: 752,
+                settings: {
+                    item: 2
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    item: 1
+                }
+            }
+        ]
+    });
 
 };
 

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 0ec352f2ac0c44732a2468a90f43c89a13624408..6a970b269143ee21a786da7782900371f60a21c9 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -66,6 +66,7 @@
 @import 'linked-organizations';
 @import 'newsletter';
 @import 'tweets';
+@import 'instagram';
 @import 'hero';
 @import 'overlay';
 

diff --git a/app/static/src/sass/modules/_instagram.scss b/app/static/src/sass/modules/_instagram.scss
new file mode 100644 (file)
index 0000000..9464506
--- /dev/null
+++ b/app/static/src/sass/modules/_instagram.scss
@@ -0,0 +1,19 @@
+$module: ".instagram";
+
+#{$module} {
+
+    &__item {
+
+        display: block;
+        float: left;
+        width: 33.33%;
+
+        span {
+
+            display: none;
+
+        }
+
+    }
+
+}

diff --git a/app/templates/base.html b/app/templates/base.html
index e5c9dbd64f38085a87c3ee6467b2136501b9eaa5..61139b584e6a9143686100d5a0cea3af0a3db756 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -74,9 +74,6 @@
                     <div class="section-title section-title--uppercase section-title--underline section-title--accent">
                         {% trans "Instagram feed" %}
                     </div>
-                    <div>
-                        INSTAGRAM HERE
-                    </div>
                     <div>
                         {% include "includes/instagram.html" %}
                     </div>

diff --git a/app/templates/includes/instagram.html b/app/templates/includes/instagram.html
index c3ca0746d73a8a75dfdef5075af5dedb0dd42af5..c734b42c9d8ec198ffa73f1747a48e3b122e34d3 100644 (file)
--- a/app/templates/includes/instagram.html
+++ b/app/templates/includes/instagram.html
@@ -2,13 +2,11 @@
 
 {% instagram_user_recent_media ircam_paris %}
 
-<div id="django_recent_media_wall">
+<div class="instagram">
     {% for media in recent_media|slice:"3" %}
-        <div class="django_instagram_media_wall_item">
-            <a href="{{ media.display_src }}" target="_blank" title="{{ media.caption }}">
-                <img src="{{ media.thumbnail_src }}"/>
-                <span>{{ media.caption }}</span>
-            </a>
-        </div>
+        <a class="instagram__item" href="http://instagram.com/p/{{media.code}}" target="_blank" title="{{ media.caption }}">
+            <img src="{{ media.thumbnail_src }}"/>
+            <span>{{ media.caption }}</span>
+        </a>
     {% endfor %}
 </div>