⚡ new figArray shortcode

chrede88 · Dec 3, 2023 · ec9f607 · ec9f607
1 parent 1e8c07a
commit ec9f607
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 6 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1124,6 +1124,10 @@ video {
   margin-top: -0.125rem;
 }
 
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1167,6 +1171,34 @@ video {
   -webkit-line-clamp: 6;
 }
 
+.line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp-\[7\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 7;
+}
+
 .block {
   display: block;
 }
@@ -1215,6 +1247,22 @@ video {
   max-height: 20rem;
 }
 
+.max-h-60 {
+  max-height: 15rem;
+}
+
+.max-h-40 {
+  max-height: 10rem;
+}
+
+.max-h-32 {
+  max-height: 8rem;
+}
+
+.max-h-36 {
+  max-height: 9rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1297,6 +1345,54 @@ video {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1325,6 +1421,10 @@ video {
   justify-items: center;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -1355,6 +1455,20 @@ video {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.text-clip {
+  text-overflow: clip;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1807,6 +1921,13 @@ video {
     margin-top: 12rem;
   }
 
+  .md\:line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
+
   .md\:block {
     display: block;
   }
@@ -1831,4 +1952,13 @@ video {
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+@media (min-width: 1280px) {
+  .xl\:line-clamp-\[7\] {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 7;
+  }
 }
diff --git a/exampleSite/content/blog/post1/images/photo1.jpeg b/exampleSite/content/blog/post1/images/photo1.jpeg
diff --git a/exampleSite/content/blog/post1/images/photo2.jpeg b/exampleSite/content/blog/post1/images/photo2.jpeg
diff --git a/exampleSite/content/blog/post1/index.md b/exampleSite/content/blog/post1/index.md
@@ -1,5 +1,5 @@
 ---
-title: Blog Post Title
+title: Blog Post with Inline Images
 subtitle: "Blog post subtitle :zap:"
 summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 date: 2023-11-24
@@ -9,6 +9,15 @@ caption: Image caption
 authors:
   - Christian: author.jpeg
 ---
+Use the shortcode "figArray" to add images to your blog post. Add your images to a subfolder. Call the figArray shortcode using the following syntax:
+
+```
+{{</* figArray subfolder="<subfoldername>" figCaption="Some caption" numCols=2 */>}}
+```
+Both "figCaption" and "numCols" are optional. The shortcode will try to guess the best number of columns to use for the array of figures if "numCols" is not passed.
+You will need one subfolder containing images per call to the shortcode. The image files need to be one of the following types: png, jpg, jpeg or webp.
+
+{{< figArray subfolder="images" figCaption="A nice figure caption :wave:" >}}
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat enim. Ut cursus magna sed luctus auctor. Sed eu augue dignissim, lobortis ipsum eu, dictum nisi. Integer varius ex maximus quam lobortis accumsan. Morbi mollis vulputate metus, aliquam feugiat arcu porta a. Quisque id justo ultricies, lacinia elit quis, pulvinar odio. Fusce feugiat at velit vitae lobortis. Nulla fringilla metus et sem mattis posuere :zap:.
 
@@ -17,8 +26,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat enim. Ut
 - List item 2
 - List item 3
 
-Nulla pellentesque quam sit amet est posuere, tincidunt auctor ligula bibendum. Donec dapibus lacinia nibh, convallis ultrices enim laoreet et. Duis auctor, lectus nec vehicula suscipit, sapien erat pellentesque augue, pulvinar tempus sapien leo sit amet erat. Proin porta, mauris vitae aliquet consectetur, erat eros maximus turpis, at suscipit nibh urna id leo. Nunc commodo sed diam ut aliquet. Duis eros mi, ullamcorper sit amet ex id, aliquet dignissim libero. Fusce at turpis eget nisl feugiat cursus eget vitae elit. Integer auctor enim vel orci fringilla facilisis. Praesent ac euismod tellus.
-
 Cras ligula velit, aliquet ac orci dapibus, molestie ultricies libero. Donec at bibendum est. Phasellus vulputate dapibus quam vel accumsan. Curabitur at felis euismod, lobortis urna id, lobortis dolor. Cras tortor ligula, euismod quis lacus faucibus, condimentum fringilla dolor. Mauris in maximus nisi. Phasellus facilisis lacus quis mi cursus, a ornare mi maximus. Nullam nunc lacus, tincidunt varius risus nec, pellentesque vulputate ligula. Etiam id purus et tortor porta mattis. Donec id sapien nulla. Vivamus at malesuada tellus, id ultricies ante. Maecenas ullamcorper mi massa, at rutrum risus aliquet a. Donec sem tortor, molestie quis ex a, faucibus commodo augue. Morbi convallis sem vel tellus facilisis, et sodales felis consequat. Aliquam ut ante tristique, volutpat lectus vestibulum, egestas sapien.
 
 Donec tellus est, faucibus eget ultricies ac, posuere non augue. Fusce ultrices lectus quis nunc lacinia, non tincidunt lectus ultrices. Morbi sodales nisi at felis luctus, eu convallis tortor commodo. Morbi tristique nibh neque, vel tristique dolor laoreet eget. Phasellus felis erat, mattis at suscipit id, faucibus in dolor. In vitae odio at lectus tincidunt dignissim. Fusce risus nisl, hendrerit a ultricies vitae, porta id sapien. Nam elit nunc, hendrerit ut sem quis, ultrices varius leo. Nullam eget lectus in sapien venenatis iaculis at at turpis. Etiam iaculis magna porttitor augue tempus suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam suscipit nibh leo, in pellentesque urna luctus et. Duis diam ipsum, posuere nec tellus sit amet, dignissim feugiat massa. Etiam ut sollicitudin lorem. Quisque commodo libero non mauris viverra malesuada. Morbi vitae auctor felis.

diff --git a/exampleSite/content/blog/post2/index.md b/exampleSite/content/blog/post2/index.md
@@ -1,5 +1,5 @@
 ---
-title: Blog Post 2
+title: Blog Post With Extra Long Title
 summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 date: 2023-11-23
 cardimage: photo2_card.jpeg

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
@@ -18,7 +18,7 @@ <h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
     {{ range .Pages.ByDate.Reverse }}
       {{ $cardimage := resources.GetMatch .Params.cardimage }}
       <a href="{{ .RelPermalink }}">
-        <div class="flex max-h-80 w-full max-w-2xl flex-row rounded-xl bg-neutral-300 bg-clip-border text-slate-400 shadow-md dark:bg-neutral-700">
+        <div class="flex max-h-80 h-full w-full max-w-2xl flex-row rounded-xl bg-neutral-300 bg-clip-border text-slate-400 shadow-md dark:bg-neutral-700">
           {{ with $cardimage }}
             {{ $cardimage = $cardimage.Filter (images.Process "resize 400x600 webp" ) }}
             <div class="m-0 w-2/5 shrink-0 overflow-hidden rounded-xl rounded-r-none bg-clip-border dark:bg-neutral-700">
@@ -34,7 +34,7 @@ <h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
               <h4 class="mb-2 text-2xl font-semibold text-slate-700 antialiased dark:text-slate-200">
                 {{ .Title }}
               </h4>
-              <p class="mb-8 line-clamp-6 text-base text-slate-500 dark:text-slate-400 lg:line-clamp-[7]">
+              <p class="mb-4 text-base line-clamp-6 text-slate-500 dark:text-slate-400">
                 {{ .Summary | emojify }}
               </p>
             </div>

diff --git a/layouts/shortcodes/figArray.html b/layouts/shortcodes/figArray.html
@@ -0,0 +1,51 @@
+{{/* Enable an array of images to be loaded from a subfolder within a blog post.
+    I.e. `./content/blog/blogpost/images/`.
+    All images in the subfolder will be used!
+    Optionally set "numCols" to the wanted number of columns.
+    Optionally pass a general figure caption as "figCaption".
+    {{< figArray subfolder="folderName" >}} */}}
+
+{{/* load variables */}}
+{{ $page := .Page }}
+{{ $path := .Get "subfolder" }}
+{{ $figCaption := .Get "figCaption" | default "" }}
+{{ $numCols := .Get "numCols" }}
+
+{{/* get all images */}}
+{{ $globpattern := printf "%s/*.{jp[e]g,png,webp}" $path }}
+{{ $images := $page.Resources.Match $globpattern }}
+
+{{/* calc numCols if not set */}}
+{{ $cols := 1 }}
+{{ with $numCols }}
+  {{ if gt . 12 }}
+    {{ $cols = 12 }}
+  {{ else }}
+    {{ $cols = . }}
+  {{ end }}
+{{ else }}
+  {{ $numimages := $images | len }}
+  {{ if ge $numimages 3 }}
+    {{ if modBool $numimages 2 }}
+      {{ $cols = 2 }}
+    {{ else }}
+      {{ $cols = 3 }}
+    {{ end }}
+  {{ else }}
+    {{ $cols = $numimages }}
+  {{ end }}
+{{ end }}
+
+<div class="flex flex-col">
+  <div class="grid grid-cols-{{ $cols }} gap-1">
+    {{ range $image := $images }}
+      {{ $image = $image.Filter (images.Process "resize 768x webp") }}
+      <img src="{{ $image.RelPermalink }}" alt="image">
+    {{ end }}
+  </div>
+  {{ with $figCaption }}
+    <span class="-mt-6 mb-4 text-center text-sm text-slate-700 dark:text-slate-200">
+      {{ . | emojify }}
+    </span>
+  {{ end }}
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -65,6 +65,11 @@ module.exports = {
   plugins: [
     require('@tailwindcss/typography'),
   ],
+  safelist: [
+    {
+      pattern: /grid-cols-.+/, 
+    },
+  ]
 }