citra-web/site/themes/citra-bs-theme/layouts/shortcodes/sidebyside.html

44 lines
2.1 KiB
HTML

{{/* USAGE: {{< sidebyside "gifv" "/path/to/src" "file1=caption" "file2=caption" >}} */}}
{{ $type := index .Params 0 }}
{{ $path := index .Params 1 }}
{{ $figures := after 2 .Params }}
{{ $originals := .Page.Resources }}
<div class="container" style="width: 100%;">
{{ $.Scratch.Set "size" (div 12 (len $figures)) }}
<div class="is-img-preview">
{{ range $figure := $figures }}
{{ $.Scratch.Set "src" (index (split $figure "=") 0) }}
{{ $.Scratch.Set "title" (index (split $figure "=") 1) }}
{{ $.Scratch.Set "link" (index (split $figure "=") 2) }}
{{ $resolved_path := $originals.GetMatch ($.Scratch.Get "src") }}
<div class="theme-table-image col-sm-{{ $.Scratch.Get "size" }}">
<figure style="padding: 0px;">
{{ if eq $type "gifv" }}
<div class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline="">
<source src="{{ $resolved_path.RelPermalink }}" type="video/mp4">
Your browser doesn't support mp4 video. :(
</video>
</div>
{{ else if eq $type "image" }}
<a href="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" title="{{ $.Scratch.Get "title" }}">
<img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
</a>
{{ else if eq $type "imagelink" }}
<a href="{{ $.Scratch.Get "link" }}" style="border-bottom-style: none;" >
<img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
</a>
{{ end }}
<figcaption>
<h4>
{{ $.Scratch.Get "title" | markdownify }}
</h4>
</figcaption>
</figure>
</div>
{{ end }}
</div>
</div>