Create main parts of short codes

themes/tsc_vfl/layouts/_default/baseof.html

@@ -16,5 +16,19 @@
             </div>
             {{- partial "page/footer.html" . -}}
         </div>
+        <div id="overlay" class="hidden">
+            <div class="background"></div>
+            <div class="spacer"></div>
+            <div class="dialog-column">
+                <div class="spacer"></div>
+                <div class="dialog">
+                    <div class="img">
+                        <img>
+                    </div>
+                </div>
+                <div class="spacer"></div>
+            </div>
+            <div class="spacer"></div>
+        </div>
     </body>
 </html>

themes/tsc_vfl/layouts/_default/home.html

@@ -3,23 +3,31 @@
         <h1>{{ .Title }}</h1>
     </a>
     <div class="news-blog">
-        {{ range (.Paginate (first 10 ( where .Site.RegularPages "Section" "==" "news")) 5 ).Pages }}
+        {{ range (.Paginate (first 200 ( where .Site.RegularPages "Section" "==" "news")) 10 ).Pages }}
+        {{ $urlBlogEntry := .RelPermalink}}
         <div class="blog-entry">
             <div class="header">
                 {{ .Date.Format "02.01.2006" }}
-                <a href="{{ .Permalink }}">{{ .Title }}</a>
+                <a href="{{ $urlBlogEntry }}">{{ .Title }}</a>
             </div>
             <div class="details">
                 <div class="teaser-image">
                     {{ $page := . }}
                     {{ if .Params.Image }}
-                    <img src="{{ (.Resources.GetMatch (.Params.Image)).RelPermalink }}">
+                    {{ with (.Resources.GetMatch (.Params.Image)).Fit "290x190 webp" }}
+                    <a href="{{ $urlBlogEntry }}">
+                        <img src="{{ .RelPermalink }}">
+                    </a>
+                    {{ end }}
                     {{ end }}
                 </div>
-                <div class="intro">
-                    {{ with .Summary }}
-                    {{ . }}
-                    {{ end }}
+                <div class="right-side">
+                    <div class="intro">
+                        {{ with .Summary }}
+                        {{ . }}
+                        {{ end }}
+                    </div>
+                    <div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
                 </div>
             </div>
         </div>
@@ -30,4 +38,3 @@
     {{ partial "totop" }}
 {{ end }}
 
-{{ define "left" }}<!-- No left side menu -->{{ end }}

themes/tsc_vfl/layouts/partials/page/head.html

@@ -9,4 +9,5 @@
     <title>{{ $title }}</title>
     <script defer src="{{ relURL "js/jquery-3.6.3.min.js" }}"></script>
     <script defer src="{{ relURL "js/slider.js" }}"></script>
+    <script defer src="{{ relURL "js/gallery.js" }}"></script>
 </head>

themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery-image.html

@@ -0,0 +1,27 @@
+{{ $cols := .Parent.Get "columns" }}
+{{ $imgOriginal := .Page.Resources.GetMatch (.Get "src") }}
+{{ $img := $imgOriginal }}
+{{ if eq $cols "2" }}
+{{ $img = $imgOriginal.Fit "500x1000 webp" }}
+{{ else if eq $cols "3" }}
+{{ $img = $imgOriginal.Fit "333x800 webp" }}
+{{ else if eq $cols "4" }}
+{{ $img = $imgOriginal.Fit "250x500 webp" }}
+{{ else }}
+{{ $img = $imgOriginal.Fit "800x1000 webp" }}
+{{ end }}
+{{ $imgFitted := $imgOriginal.Fit "850x1000 webp" }}
+<figure class="tsc-gallery-img">
+    <a
+        {{ with .Get "href" }}
+        href="{{ . }}"
+        {{ else }}
+        data-url="{{ $imgFitted.RelPermalink }}"
+        {{ end }}
+    >
+        <img
+        {{ with .Get "alt"}}alt="{{.}}"{{ end }}
+        src="{{ $img.RelPermalink }}"
+        >
+    </a>
+</figure>

themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery.html

@@ -1 +1,7 @@
-{{ .Inner }}
+{{ $colClass := "" }}
+{{- with .Get "columns" }}
+{{ $colClass = (print "cols-" .) }}
+{{ end -}}
+<div class="tsc-gallery {{ $colClass }}">
+    {{ .Inner }}
+</div>

themes/tsc_vfl/layouts/shortcodes/tsc/news/inline-float.html

@@ -0,0 +1,19 @@
+<figure>
+    {{ with .Get "href" }}
+    <a href="{{ . }}">
+    {{ end }}
+        <img
+            {{- with .Get "alt" }}alt="{{ . }}"{{ end }}
+            {{- $filename := .Get "src" }}
+            {{ $resource := .Page.Resources.Get $filename -}}
+            src="{{ $resource.RelPermalink }}"
+        >
+    {{ with .Get "href" }}
+    </a>
+    {{ end }}
+    {{ with .Get "caption" }}
+    <figcaption>
+        {{ . }}
+    </figcaption>
+    {{ end }}
+</figure>

themes/tsc_vfl/layouts/shortcodes/tsc/news/internal-video.html

@@ -0,0 +1,10 @@
+<video controls
+{{ with .Get "poster" }}poster="{{ . }}"{{ end }}
+{{ with .Get "width" }}width="{{ . }}"{{ end }}
+{{ with .Get "height" }}height="{{ . }}"{{ end }}
+>
+    <source
+    {{ with .Get "type" }}type="{{ . }}"{{ end }}
+    src="{{ (.Page.Resources.GetMatch (.Get "src")).RelPermalink }}"
+    >
+</video>

themes/tsc_vfl/layouts/shortcodes/tsc/news/youtube-video.html

@@ -0,0 +1,9 @@
+<iframe 
+    {{ with .Get "width" }}width="{{ . }}"{{ end }}
+    {{ with .Get "height" }}height="{{ . }}"{{ end }}
+    src="https://www.youtube-nocookie.com/embed/{{ .Get "id" }}"
+    title="{{ with .Get "title" }}{{ . }}{{ else }}YouTube video player{{ end }}"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen>
+</iframe>