hmc_site_source/layouts/media/single.html

113 lines
4.3 KiB
HTML

{{ define "main" }}
<section class="mb-8">
<div class="container flex flex-col gap-5">
<div>
<h2>{{ .Params.Title }}</h2>
<div class="content-container">
{{ if eq .Params.Mediatype "talk" }}
Presented by
{{ else if eq .Params.Mediatype "demo" }}
Presented by
{{ else if eq .Params.Mediatype "chat" }}
Fireside chat with
{{ else if eq .Params.Mediatype "podcast" }}
A podcast hosted by
{{ end }}
{{ $lastSpeaker := (add (len .Params.Speakers) -1) }}
{{ range $i, $s := .Params.Speakers }}
<a href="">{{ $s.name }}</a>{{ if not (eq $i $lastSpeaker) }},{{ end }}
{{ end }}
{{ with .GetPage (path.Join "/media" .Params.conference) }}
at
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }}
</div>
</div>
<div class="flex flex-col lg:flex-row gap-5">
<div class="flex-grow flex flex-col gap-5">
{{ range .Params.Videos }}
<div class="video-container">
{{ if eq .service "vimeo" }}
<iframe
src="{{ .embed }}"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style="width:100%;height:100%;"
title="{{ .title }}">
</iframe>
{{ else if eq .service "youtube" }}
<iframe
src="{{ .embed }}"
title="{{ .title }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
style="width:100%;height:100%;"
allowfullscreen>
</iframe>
{{ else }}
<a href="{{ .embed }}">{{ .title }}</a>
{{ end }}
</div>
{{ end }}
{{ range .Params.Notes }}
{{ partial "components/bignote.html" . }}
{{ end }}
</div>
<div class="flex flex-col gap-5 lg:w-1/3">
<div class="dark:text-white content-container content">
{{ .Content }}
</div>
{{ $hasGoodSpeaker := false }}
{{ range .Params.Speakers }}
{{ if or .bio .image }}
{{ $hasGoodSpeaker = true }}
{{ end }}
{{ end }}
{{ if $hasGoodSpeaker }}
<div>
<h4 class="mb-2">About the speaker{{ if (gt (len .Params.Speakers) 1) }}s{{ end }}</h4>
<div class="flex flex-col gap-3">
{{ range .Params.Speakers }}
<div class="">
<div class="">
<div class="font-bold dark:text-white">{{ .name }}</div>
{{ if or .bio .image }}
<div class="content-container">
{{ if .image }}
{{ $imageurl := resources.Get .image }}
{{ if $imageurl}}
<div
class="rounded-full aspect-square overflow-hidden w-24 float-right ml-2 mb-2"
style="shape-outside: circle(50%); background: url({{ $imageurl.RelPermalink }}) center top no-repeat; background-size: cover;"
title="{{ .name }}"
></div>
{{ end }}
{{ end }}
{{ if .bio }}
{{ .bio | markdownify }}
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
{{ end }}
<div class="flex flex-col gap-2">
{{ range .Params.Videos }}
{{ if .download_link }}
<a class="btn btn-outline-primary" href="{{ .download_link }}">Download video: {{ .title }}</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</div>
</section>
{{ end }}