Create main parts of short codes

themes/tsc_vfl/assets/css/main.scss

@@ -25,6 +25,7 @@ body {
     margin: 0px;
     background-color: #ececec;
     font: 90% 'Open Sans', sans-serif;
+    height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -44,6 +45,7 @@ h1 {
     max-width: 1280px;
     margin: auto;
     background-color: #fcfcfc;
+    overflow: auto;
 
     #header {
         border-bottom: 2px solid rgba(173,173,173,.5);
@@ -63,6 +65,7 @@ h1 {
 
         > .slider {
             width: calc(100% - 60px);
+            // visibility: hidden;
             // height: 250px;
             display: flex;
             padding: 0 10px;
@@ -264,6 +267,46 @@ h1 {
     }    
 }
 
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    z-index: 10;
+
+    &.hidden {
+        display: none;
+    }
+
+    .background {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: -10;
+        background-color: lightgrey;
+        opacity: 50%;
+    }
+
+    .spacer {
+        flex: auto 1 0;
+    }
+    .dialog-column {
+        flex: 0 1 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .dialog {
+            background-color: white;
+            padding: 10px;
+            flex: 30% 0 0;
+            // height: 30%;
+        }
+    }
+}
+
 .person-list {
     display: flex;
     flex-wrap: wrap;
@@ -306,28 +349,48 @@ h1 {
 .news-blog {
     .blog-entry {
         .header {
+
+            margin: 5px 0 10px;
             a {
-                &::before {
-                    content: '' !important;
-                }
                 font-size: larger;
             }
         }
         .details {
             display: flex;
-            min-height: 240px;
+            // min-height: 240px;
+            margin-right: 2px;
 
             .teaser-image {
                 flex: 33% 1 0;
                 background-color: lightcyan;
+                
+                img {
+                    width: 90%;
+                    height: 190px;
+                    object-fit: contain;
+                    object-position: left top;
                 }
-            .intro {
+            }
+            .right-side {
                 flex: 66% 1 1;
+                display: flex;
+                flex-direction: column;
+
+                .intro {
+                    padding-right: 40px;
                 }
-            .teaser-image, .intro {
+                .more {
+                    // float: right;
+                    margin-top: 20px;
+                    text-align: right;
+                }
+            }
+            // .teaser-image, .intro {
                 // display: ;
+            // }
+
         }
-        }
+
     }
 
     .pagination {
@@ -347,6 +410,24 @@ h1 {
     }
 }
 
+.tsc-gallery {
+    display: grid;
+    
+    &.cols-2 {
+        grid-template-columns: 1fr 1fr;
+    }
+    &.cols-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    &.cols-4 {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .tsc-gallery-img {
+        margin: none;
+    }
+}
+
 @font-face{
     font-family: 'Open Sans Condensed';
     font-style: normal;

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,24 +3,32 @@
         <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="right-side">
                     <div class="intro">
                         {{ with .Summary }}
                         {{ . }}
                         {{ end }}
                     </div>
+                    <div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
+                </div>
             </div>
         </div>
         {{ end }}
@@ -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>

themes/tsc_vfl/static/js/gallery.js

@@ -0,0 +1,18 @@
+$(function() {
+    $(".tsc-gallery-img a").click(function(ev){
+        // console.debug(ev)
+        const url = ev.currentTarget.dataset.url
+        console.debug(url)
+        $('#overlay').removeClass('hidden')
+        $('#overlay  .img img').attr('src', url)
+    })
+    $('#overlay .background, #overlay .spacer').click(function(ev) {
+        $('#overlay').addClass('hidden')
+        $('#overlay .img img').attr('src', '')
+    })
+    // $('#overlay').on('keydown', function(ev){
+    //     if(ev.keyCode === 27) {
+    //         console.log('closing')
+    //     }
+    // })
+})