ltqf/layouts/spectacles/single.html

{{ define "styles"}}
{{ $customCSS := resources.Get "css/single-spectacle.css" | resources.ToCSS }}
<!-- <link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript> -->
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
{{ end }}

{{ define "content" }}
<section class="section is-large p-0 m-0 has-background-warning-light">
    <div id="title-section" class="columns p-0 m-0">
        <div class="column is-two-thirds p-5 m-0  is-flex is-justify-content-center is-align-items-center">
            <h1 class="title has-text-centered is-size-1 has-text-weight-bold">{{ .Title }}</h1>
        </div>
        <div class="column m-0 is-one-third has-background-black is-hidden-mobile"></div>
    </div>
</section>
<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column is-four-fifths p-0 m-0 has-background-danger">
            {{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
            {{ with $img }}
            {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
            {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
            <figure class="image">
                <picture>
                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
                    <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
                </picture>
            </figure>
            {{ end }}
        </div>
        <div class="column is-one-fifth p-0 m-0 has-background-success is-flex is-justify-content-center is-align-items-center is-size-3">
            <div class="has-text-black has-text-weight-bold p-6">{{ .Date.Year}}</div>
        </div>
    </div>
</section>
<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column is-1 has-background-black is-hidden-mobile"></div>
        <div class="column is-10 p-6 has-background-warning-light">
            <h2 class="subtitle">{{ .Params.Subtitle }}</h2>
            <div class="has-text-black">{{ .Content }}</div>
        </div>
        <div class="column is-1 has-background-black is-hidden-mobile"></div>
    </div>
</section>

<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column p-6 is-two-fifths has-background-primary-dark has-text-black">
            <h2 class="subtitle mb-6">En savoir plus</h2>
            {{ $presse := resources.GetMatch (print .File.Dir "/dossier.pdf") }}
            {{ with $presse }}
            <div class="columns is-gapless is-vcentered ">
                <div class="column">
                    <a href={{ .Permalink }} rel="canonical" aria-label="Lien de téléchargement du dossier de présentation">
                        <h3 class="title is-6">Télécharger le Dossier de présentation</h3>
                    </a>
                </div>
            </div>

            {{ end }}

            {{ with .Params.presentation }}
            <div class="column px-0 mb-4">
                <a href="{{ .lien}}" rel="canonical" aria-label="">
                    <h3 class="title is-6"> {{ .texte }}</h3>
                </a>
            </div>
            {{ end }}
            {{ with .Params.Dates }}
                <h3 class="title is-6">Prochaines Dates</h3>
                    {{ range .}}
                        <div class="columns is-gapless">
                            {{ if in (printf "%T" .) "map" }}
                                {{ range $month, $events := . }}
                                    <div class="column is-3 is-flex is-flex-direction-column is-justify-content-center">
                                        <h4 class="title is-7">{{ $month }}</h4>
                                    </div>
                                    <div class="column is-9">
                                        <ul>
                                            {{ range $events }}
                                            <li>{{ . }}</li>
                                            {{ end }}
                                        </ul>
                                    </div>
                                {{ end }}
                            {{ else }}
                            <p>{{ . }}</p>
                            {{ end }}
                        </div>
                    {{ end }}
            {{ end }}

        </div>
        <div class="column is-three-fifths p-0 m-0  has-background-danger  is-hidden-mobile">
            {{ $img := resources.GetMatch ( print .File.Dir "/savoir.*") }}
            {{ with $img }}
            {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
            {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
            <figure class="image">
                <picture>
                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
                    <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
                </picture>
            </figure>
            {{ end }}
        </div>
    </div>
</section>
<section class="section is-large p-6 m-0 has-background-black  has-text-white">
    <h2 class="subtitle">Crédits</h2>
    <div class="columns is-multiline mt-2">
        {{ $param := .Params.Credits }}
        {{ range $param }}
        <div class="column is-one-quarter">{{ .role }}</div>
        {{ if and $param (not (isset .name 0))}}
        <div class="column is-three-quarters">{{ .name  | markdownify }}</div>
        {{ else }}
        <div class="column is-three-quarters">
            <ul>
                {{ range .name }}
                <li>{{ . | markdownify }}</li>
                {{ end }}
            </ul>
        </div>
        {{ end }}
        {{ end }}
    </div>
</section>
<section class="section is-large m-0 pl-0 mr-7 py-6 has-background-black">
    <h2 class="subtitle pl-6">Galerie</h2>
    <div class="container m-0" style="overflow-x: hidden; max-width: 100%;">
        <div id="galerie" class="carousel is-flex is-flex-direction-row"> <!--style="overflow-x: hidden;" >-->
            {{ $imgs := (resources.Match ( print .File.Dir "/*")).ByType "image" }}

            {{ with $imgs }}
            {{ range . }}
            {{- $jpeg := .Resize "364x jpeg" }}
            {{- $webp := .Resize "364x webp picture" }}
            <picture class="is-flex is-flex-grow-0 is-flex-shrink-0">
                <source srcset="{{ $webp.Permalink }}" type="image/webp">
                <img  src='{{ $jpeg.Permalink }}' loading="lazy" style="width: 100%; height: auto; object-fit: contain;" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
            </picture>         
            {{ end}}
            {{ end }}
        </div>
    </div>
</section>

{{ end }}

{{ define "scripts" }}
{{ $carousel := resources.Get "js/single-spectacle-carousel.js" | js.Build (dict "minify" true) }}

<script src="{{ $carousel.RelPermalink}}"></script>

<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Event",
      "name": "{{ .Title }}",
      "startDate": "{{ .Params.date}}",
      "image": "{{ (resources.GetMatch (print .File.Dir "/principal.*")).Permalink }}",
      "description": "{{ .Params.subtitle}}",
      "performer": {
        "@type": "PerformingGroup",
        "name": "Compagnie Le Temps Qu'il Faut"
      }
    }
    </script>
    
{{ end }}