Merge pull request #3 from myrthos/develop

Merging updated file structure

assets/scss/mgallery.scss

@@ -0,0 +1,73 @@
+// Gallery CSS
+
+// Define the masonry container
+.masonry-container {
+  display: flex;
+  flex-flow: wrap;  
+  flex-direction: row;
+  width: 100%;
+  padding-right: 8px;
+  padding-left: 8px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// Define the masonry classes for the columns 2..5
+$masonry-columns: (
+  "2": 2,
+  "3": 3,
+  "4": 4,
+  "5": 5
+) !default;
+
+@each $key, $cols in $masonry-columns {
+  .masonry-#{$key} {
+    -ms-column-count: #{$cols}; 
+    -webkit-column-count: #{$cols}; /* Chrome, Safari, Opera */
+    -moz-column-count: #{$cols}; /* Firefox */
+    column-count: #{$cols};
+  }
+}
+
+// Define the class for the different gap sizes
+$masonry-gaps: (
+  "0"  : 0,
+  "xs" : 0.1rem,
+  "s"  : 0.25rem,
+  "m"  : 0.5rem,
+  "l"  : 1rem,
+  "xl" : 1.5rem,
+  "xxl": 2rem
+) !default;
+
+// The masonry column gap
+@each $key, $gap in $masonry-gaps {
+  .masonry-gap-#{$key} {
+    -ms-column-gap: #{$gap};
+    -moz-column-gap: #{$gap};
+    -webkit-column-gap: #{$gap}; 
+    column-gap: #{$gap};  
+  }
+}
+
+// Override for grid column gap
+@each $key, $gutter in $masonry-gaps {
+  .grid-gap-#{$key} {
+    --bs-gutter-x: #{$gutter};
+  }
+}
+
+// The row padding for both grid and masonry
+@each $key, $gap in $masonry-gaps {
+  .gallery-pad-#{$key} {
+    padding-bottom: #{$gap};
+  }
+}
+
+// Define the image class in a masonry
+.masonry-1 img, .masonry-2 img, .masonry-3 img, .masonry-4 img, .masonry-5 img { 
+  flex-direction: column;
+  position: relative;
+  width: 100%; 
+}
+

config.toml

@@ -4,22 +4,14 @@
     min = "0.110.0"
     max = ""
   [[module.mounts]]
-    source = "dist/js/lightbox-plus-jquery.js"
-    target = "assets/js/modules/lightbox/lightbox-plus-jquery.js"
+    source = "dist/js"
+    target = "assets/js/modules/mgallery"
   [[module.mounts]]
     source = "dist/css"
-    target = "assets/scss"
-    includeFiles = "lightbox.scss"
+    target = "assets/scss/modules/mgallery"
   [[module.mounts]]
     source = "dist/images"
-    target = "assets/images"    
-  [[module.mounts]]
-    source = "dist/css"
-    target = "assets/scss"
-    includeFiles = "mgallery.scss"
-  [[module.mounts]]
-    source = "dist/shortcodes/mgallery.html"
-    target = "layouts/shortcodes/mgallery.html"    
+    target = "static/images"    
   [[module.mounts]]
     source = 'layouts'
     target = 'layouts'

exampleSite/content/_index.md

@@ -4,4 +4,6 @@ description: Site to test module shortcode(s).
 date: 2023-07-10
 ---
 
-TODO: placeholder
+Gallery test
+
+{{< mgallery cols=3 type="masonry" gap="m" radius="true" zoom="false" list="img/*" unique="false" >}}

exampleSite/content/gallery/index.md

@@ -0,0 +1,29 @@
+<!-- Cspell:ignore ovlpos ovlx ovly ovlperc lightbox mgallery -->
+<!-- markdownlint-disable MD003 MD022 MD041 -->
+---
+title: Gallery
+description: Example for gallery
+date: 2023-05-20
+---
+<!-- markdownlint-enable MD003 MD022 MD041 -->
+
+To show this gallery properly in this example site, additional bootstrap classes are needed to wrap the gallery in.
+It is still not exactly the same as when using Hinode, but close enough.
+
+<div class="d-flex flex-column flex-fill">
+    <div class="container-xxl">
+        <div class="row row-cols-1">
+            <div class="col col-sm-12 col-md-8">
+
+## Grid layout
+
+{{< mgallery list="img/*" unique="true" cols=3 type="grid" gap="m" radius="true" zoom="true" >}}
+
+## Masonry layout
+
+{{< mgallery list="img/*" unique="true" cols=3 type="masonry" gap="m" radius="true" zoom="true" >}}
+
+</div>
+</div>
+</div>
+</div>

exampleSite/hugo.toml

@@ -1,14 +1,29 @@
 baseURL = 'http://example.org/'
 languageCode = 'en-us'
-title = 'Test site for mod-template'
+title = 'Test site for mod-mgallery'
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+
 
 [module]
-  replacements = 'github.com/gethinode/mod-template -> ../..'
-  [[module.imports]]
-    path = "github.com/gethinode/mod-template"
-  [[module.imports.mounts]]
-    source = "dist"
+  replacements = 'github.com/myrthos/mod-mgallery -> ../..'
+  [[module.mounts]]
+    source = "static"
     target = "static"
+  [[module.imports]]
+    path = "github.com/myrthos/mod-mgallery"
+    [[module.imports.mounts]]
+      source = "dist/css/lightbox.scss"
+      target = "static/css/lightbox.css"
+    [[module.imports.mounts]]
+      source = "dist/images"
+      target = "static/images"
+    [[module.imports.mounts]]
+      source = "dist/js/lightbox-plus-jquery.js"
+      target = "static/js/lightbox-plus-jquery.js"
   [[module.imports.mounts]]
-    source = "layouts"
-    target = "layouts"
+      source = "layouts/shortcodes/mgallery.html"
+      target = "layouts/shortcodes/mgallery.html"

exampleSite/layouts/_default/baseof.html

@@ -4,11 +4,17 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
   <title>{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }}</title>
-  <link rel=stylesheet href="style.css">
+  <link rel=stylesheet href="/style.css">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>  
+  <link rel=stylesheet href="/css/lightbox.css">
+  <link rel=stylesheet href="/mimage.css">
+  <link rel=stylesheet href="/mgallery.css">
 </head>
 <body>
 {{ block "main" . }}
 
 {{ end }}
+<script src="/js/lightbox-plus-jquery.js"></script>
 </body>
 </html>