feat: add media plugins (SoundCloud)

jglchen · Oct 13, 2018 · 1e98e6e · 1e98e6e
1 parent 0f62671
commit 1e98e6e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/_includes/plugins/soundcloud.html b/_includes/plugins/soundcloud.html
@@ -0,0 +1,4 @@
+<iframe class="plugin--audio" width="100%" height="166"
+  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/{{ include.id }}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
+  scrolling="no" frameborder="no" allow="autoplay">
+</iframe>
diff --git a/_sass/common/components/_item.scss b/_sass/common/components/_item.scss
@@ -76,7 +76,10 @@ a.item__header, .item__header > a {
       font-size: map-get($base, font-size-h6-xs);
     }
     img {
-      max-height: 35rem;
+      max-height: 32rem;
+      @include media-breakpoint-down(md) {
+        max-height: 14rem;
+      }
     }
   }
 }

diff --git a/docs/_posts/2017-08-01-media.md b/docs/_posts/2017-08-01-media.md
@@ -6,14 +6,28 @@ toc: true
 category: post
 ---
 
-With the help of plugins for media, you can easily add **audio** and **video** in your posts.
+With the help of plugins for media, you can easily add **audio**, **video** and **slides** in your posts.
 
 <div>{%- include plugins/ted.html id='emily_esfahani_smith_there_s_more_to_life_than_being_happy' -%}</div>
 
 <!--more-->
 
 ## Audio
 
+### SoundCloud
+
+<div>{%- include plugins/soundcloud.html id='313627932' -%}</div>
+
+{% raw %}
+```html
+{%- include plugins/soundcloud.html id='313627932' -%}
+```
+
+```
+<div>{%- include plugins/soundcloud.html id='313627932' -%}</div>
+```
+{% endraw %}
+
 ### Netease Cloud Music (网易云音乐)
 
 Available in Chinese mainland.
@@ -46,7 +60,6 @@ Available in Chinese mainland.
 ```
 {% endraw %}
 
-
 ### TED
 
 <div>{%- include plugins/ted.html id='emily_esfahani_smith_there_s_more_to_life_than_being_happy' -%}</div>
@@ -63,15 +76,15 @@ Available in Chinese mainland.
 
 ### bilibili (哔哩哔哩)
 
-<div>{%- include plugins/bilibili.html id='6890938' -%}</div>
+<div>{%- include plugins/bilibili.html id='11091080' -%}</div>
 
 {% raw %}
 ```html
-{%- include plugins/bilibili.html id='6890938' -%}
+{%- include plugins/bilibili.html id='11091080' -%}
 ```
 
 ```
-<div>{%- include plugins/bilibili.html id='6890938' -%}</div>
+<div>{%- include plugins/bilibili.html id='11091080' -%}</div>
 ```
 {% endraw %}