Skip to content

Commit

Permalink
Add audio shortcode, plus styling
Browse files Browse the repository at this point in the history
  • Loading branch information
bartdegoede committed Oct 28, 2019
1 parent 353b0d0 commit 745e8ed
Show file tree
Hide file tree
Showing 3 changed files with 414 additions and 0 deletions.
26 changes: 26 additions & 0 deletions layouts/shortcodes/audio.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<div id="player">
<div class="listen">Listen to this article instead</div>
<div id="waveform">
{{ $waveform := resources.Get "img/waveform.svg" | minify }}
<img src="{{ $waveform.Permalink }}" alt="waveform">
</div>
<audio controls
class="audio_controls {{ .Get "class" }}"
{{ with .Get "id" }}id="{{ . }}"{{ end }}
{{ with .Get "preload" }}preload="{{ . }}"{{ else }}preload="metadata"{{ end }}

style="{{ with .Get "style" }}{{ . | safeCSS }}; {{ end }}"
{{ with .Get "title" }}data-info-title="{{ . }}"{{ end }}
>
{{ if .Get "src" }}
<source {{ with .Get "src" }}src="{{ . }}"{{ end }}
{{ with .Get "type" }}type="audio/{{ . }}"{{ end }}>
{{ else if .Get "backup_src" }}
<source src="{{ .Get "backup_src" }}"
{{ with .Get "backup_type" }}type="audio/{{ . }}"{{ end }}
{{ with .Get "backup_codec" }}codecs="{{ . }}"{{ end }}
>
{{ end }}
Your browser does not support the audio element
</audio>
</div>
20 changes: 20 additions & 0 deletions static/css/bart.degoe.de.css
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,23 @@ figcaption h4 {
input[type="search"] {
-webkit-appearance: textfield;
}

#player {
padding: 20px 20px;
margin: 20px 0;
border-radius: 3px;
box-shadow: 0 0 8px 0 #eee;
}

#player .listen {
color: #19BC9C;
margin-bottom: 7px;
}

#player #waveform img {
width: 100%;
}

#player audio {
width: 100%;
}
Loading

0 comments on commit 745e8ed

Please sign in to comment.