diff --git a/assets/scss/mgallery.scss b/assets/scss/mgallery.scss new file mode 100644 index 0000000..5546649 --- /dev/null +++ b/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%; +} + diff --git a/config.toml b/config.toml index 12754cf..2bb51f0 100644 --- a/config.toml +++ b/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' diff --git a/dist/css/mgallery.scss b/dist/css/mgallery.scss deleted file mode 100644 index 4119f03..0000000 --- a/dist/css/mgallery.scss +++ /dev/null @@ -1,156 +0,0 @@ -// 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; -} - -.masonry-2 { - -ms-column-count: 2; - -webkit-column-count: 2; /* Chrome, Safari, Opera */ - -moz-column-count: 2; /* Firefox */ - column-count: 2; -} - -.masonry-3 { - -ms-column-count: 3; - -webkit-column-count: 3; /* Chrome, Safari, Opera */ - -moz-column-count: 3; /* Firefox */ - column-count: 3; -} - -.masonry-4 { - -ms-column-count: 4; - -webkit-column-count: 4; /* Chrome, Safari, Opera */ - -moz-column-count: 4; /* Firefox */ - column-count: 4; -} - -.masonry-5 { - -ms-column-count: 5; - -webkit-column-count: 5; /* Chrome, Safari, Opera */ - -moz-column-count: 5; /* Firefox */ - column-count: 5; -} - -.masonry-gap-0 { - -ms-column-gap: 0; - -moz-column-gap: 0; - -webkit-column-gap: 0; - column-gap: 0; -} - -.masonry-gap-xs { - -ms-column-gap: 0.1rem; - -moz-column-gap: 0.1rem; - -webkit-column-gap: 0.1rem; - column-gap: 0.1rem; -} - -.masonry-gap-s { - -ms-column-gap: 0.25rem; - -moz-column-gap: 0.25rem; - -webkit-column-gap: 0.25rem; - column-gap: 0.25rem; -} - -.masonry-gap-m { - -ms-column-gap: 0.5rem; - -moz-column-gap: 0.5rem; - -webkit-column-gap: 0.5rem; - column-gap: 0.5rem; -} - -.masonry-gap-l { - -ms-column-gap: 1rem; - -moz-column-gap: 1rem; - -webkit-column-gap: 1rem; - column-gap: 1rem; -} - -.masonry-gap-xl { - -ms-column-gap: 1.5rem; - -moz-column-gap: 1.5rem; - -webkit-column-gap: 1.5rem; - column-gap: 1.5rem; -} - -.masonry-gap-xxl { - -ms-column-gap: 2rem; - -moz-column-gap: 2rem; - -webkit-column-gap: 2rem; - column-gap: 2rem; -} - -// Override for grid column gap -.grid-gap-0 { - --bs-gutter-x: 0; -} - -.grid-gap-xs { - --bs-gutter-x: 0.1rem; -} - -.grid-gap-s { - --bs-gutter-x: 0.25rem; -} - -.grid-gap-m { - --bs-gutter-x: 0.5rem; -} - -.grid-gap-l { - --bs-gutter-x: 1rem; -} - -.grid-gap-xl { - --bs-gutter-x: 1.5rem; -} - -.grid-gap-xxl { - --bs-gutter-x: 2rem; -} - -// The row padding for both grid and masonry -.gallery-pad-0 { - padding-bottom: 0; -} - -.gallery-pad-xs { - padding-bottom: 0.1rem; -} - -.gallery-pad-s { - padding-bottom: 0.25rem; -} - -.gallery-pad-m { - padding-bottom: 0.5rem; -} - -.gallery-pad-l { - padding-bottom: 1rem; -} - -.gallery-pad-xl { - padding-bottom: 1.5rem; -} - -.gallery-pad-xxl { - padding-bottom: 2rem; -} - -// 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%; -} - diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index a5a6711..5860b94 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -4,4 +4,6 @@ description: Site to test module shortcode(s). date: 2023-07-10 --- -TODO: placeholder \ No newline at end of file +Gallery test + +{{< mgallery cols=3 type="masonry" gap="m" radius="true" zoom="false" list="img/*" unique="false" >}} \ No newline at end of file diff --git a/exampleSite/content/gallery/img/JM_LSP_01b.jpg b/exampleSite/content/gallery/img/JM_LSP_01b.jpg new file mode 100755 index 0000000..3c131ef Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_01b.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_02.jpg b/exampleSite/content/gallery/img/JM_LSP_02.jpg new file mode 100755 index 0000000..644b581 Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_02.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_03.jpg b/exampleSite/content/gallery/img/JM_LSP_03.jpg new file mode 100755 index 0000000..f5356e5 Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_03.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_10.jpg b/exampleSite/content/gallery/img/JM_LSP_10.jpg new file mode 100755 index 0000000..f0b6d1c Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_10.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_11.jpg b/exampleSite/content/gallery/img/JM_LSP_11.jpg new file mode 100755 index 0000000..cfab5b3 Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_11.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_12.jpg b/exampleSite/content/gallery/img/JM_LSP_12.jpg new file mode 100755 index 0000000..d6a810e Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_12.jpg differ diff --git a/exampleSite/content/gallery/img/JM_LSP_13.jpg b/exampleSite/content/gallery/img/JM_LSP_13.jpg new file mode 100755 index 0000000..0861569 Binary files /dev/null and b/exampleSite/content/gallery/img/JM_LSP_13.jpg differ diff --git a/exampleSite/content/gallery/index.md b/exampleSite/content/gallery/index.md new file mode 100644 index 0000000..76b86de --- /dev/null +++ b/exampleSite/content/gallery/index.md @@ -0,0 +1,29 @@ + + +--- +title: Gallery +description: Example for gallery +date: 2023-05-20 +--- + + +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. + +
+
+
+
+ +## 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" >}} + +
+
+
+
\ No newline at end of file diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml index d375c3e..e927f54 100644 --- a/exampleSite/hugo.toml +++ b/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" \ No newline at end of file + source = "layouts/shortcodes/mgallery.html" + target = "layouts/shortcodes/mgallery.html" \ No newline at end of file diff --git a/exampleSite/layouts/_default/baseof.html b/exampleSite/layouts/_default/baseof.html index dd8691c..7062996 100644 --- a/exampleSite/layouts/_default/baseof.html +++ b/exampleSite/layouts/_default/baseof.html @@ -4,11 +4,17 @@ {{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }} - + + + + + + {{ block "main" . }} {{ end }} + \ No newline at end of file diff --git a/exampleSite/static/mgallery.css b/exampleSite/static/mgallery.css new file mode 100644 index 0000000..d27017f --- /dev/null +++ b/exampleSite/static/mgallery.css @@ -0,0 +1,150 @@ +/* Converted from mgallery.scss file for testing purposes */ +.masonry-container { + display: flex; + flex-flow: wrap; + flex-direction: row; + width: 100%; + padding-right: 8px; + padding-left: 8px; + margin-right: auto; + margin-left: auto; +} + +.masonry-2 { + -ms-column-count: 2; + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; +} + +.masonry-3 { + -ms-column-count: 3; + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; +} + +.masonry-4 { + -ms-column-count: 4; + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; +} + +.masonry-5 { + -ms-column-count: 5; + -webkit-column-count: 5; + -moz-column-count: 5; + column-count: 5; +} + +.masonry-gap-0 { + -ms-column-gap: 0; + -moz-column-gap: 0; + -webkit-column-gap: 0; + column-gap: 0; +} + +.masonry-gap-xs { + -ms-column-gap: 0.1rem; + -moz-column-gap: 0.1rem; + -webkit-column-gap: 0.1rem; + column-gap: 0.1rem; +} + +.masonry-gap-s { + -ms-column-gap: 0.25rem; + -moz-column-gap: 0.25rem; + -webkit-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.masonry-gap-m { + -ms-column-gap: 0.5rem; + -moz-column-gap: 0.5rem; + -webkit-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.masonry-gap-l { + -ms-column-gap: 1rem; + -moz-column-gap: 1rem; + -webkit-column-gap: 1rem; + column-gap: 1rem; +} + +.masonry-gap-xl { + -ms-column-gap: 1.5rem; + -moz-column-gap: 1.5rem; + -webkit-column-gap: 1.5rem; + column-gap: 1.5rem; +} + +.masonry-gap-xxl { + -ms-column-gap: 2rem; + -moz-column-gap: 2rem; + -webkit-column-gap: 2rem; + column-gap: 2rem; +} + +.grid-gap-0 { + --bs-gutter-x: 0; +} + +.grid-gap-xs { + --bs-gutter-x: 0.1rem; +} + +.grid-gap-s { + --bs-gutter-x: 0.25rem; +} + +.grid-gap-m { + --bs-gutter-x: 0.5rem; +} + +.grid-gap-l { + --bs-gutter-x: 1rem; +} + +.grid-gap-xl { + --bs-gutter-x: 1.5rem; +} + +.grid-gap-xxl { + --bs-gutter-x: 2rem; +} + +.gallery-pad-0 { + padding-bottom: 0; +} + +.gallery-pad-xs { + padding-bottom: 0.1rem; +} + +.gallery-pad-s { + padding-bottom: 0.25rem; +} + +.gallery-pad-m { + padding-bottom: 0.5rem; +} + +.gallery-pad-l { + padding-bottom: 1rem; +} + +.gallery-pad-xl { + padding-bottom: 1.5rem; +} + +.gallery-pad-xxl { + padding-bottom: 2rem; +} + +.masonry-1 img, .masonry-2 img, .masonry-3 img, .masonry-4 img, .masonry-5 img { + flex-direction: column; + position: relative; + width: 100%; +} \ No newline at end of file diff --git a/exampleSite/static/mimage.css b/exampleSite/static/mimage.css new file mode 100644 index 0000000..766da73 --- /dev/null +++ b/exampleSite/static/mimage.css @@ -0,0 +1,96 @@ +/* Converted from mimage.scss file for testing purposes */ +.ratio-3x2 { + --bs-aspect-ratio: 66.67%; +} + +.text-italic { + font-style: italic; +} + +.caption-right { + display: table-caption; + text-align: right; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.caption-center { + display: table-caption; + text-align: center; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.caption-left { + display: table-caption; + text-align: left; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.caption-align-right { + text-align: right; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.caption-align-center { + text-align: center; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.caption-align-left { + text-align: left; + caption-side: bottom; + line-height: 1.05rem; + padding: 0.1rem 0.5rem 0; +} + +.image-center { + display: table; + margin-left: auto; + margin-right: auto; + word-break: break-word; +} + +.image-float-left { + display: table; + float: left; + margin-right: 7px; +} + +.image-float-right { + display: table; + float: right; + margin-left: 7px; +} + +.image-pointer { + cursor: pointer; +} + +.image-radius-1 { + border-radius: 14px; +} + +.image-radius-2 { + border-radius: 12px; +} + +.image-radius-3 { + border-radius: 10px; +} + +.image-radius-4 { + border-radius: 8px; +} + +.image-radius-5 { + border-radius: 6px; +} \ No newline at end of file diff --git a/dist/shortcodes/mgallery.html b/layouts/shortcodes/mgallery.html similarity index 96% rename from dist/shortcodes/mgallery.html rename to layouts/shortcodes/mgallery.html index 8570a07..cbac422 100755 --- a/dist/shortcodes/mgallery.html +++ b/layouts/shortcodes/mgallery.html @@ -58,10 +58,15 @@ "ovly" Optional offset in pixels for the y direction of the overlay image in pixels. Will shift the image away from the corner. Not used for 'center'. Defaults to 0. "ovlperc" Optional percentage for the size of the logo related to the size of the image. By default the logo is not resized. + "window" Optional width of the window area that is available in pixels. Defaults to 872, which is the window area in Hinode. + The minimum width is 100. --> {{- $windowSize := 872 -}} +{{- with .Get "window" -}} + {{- if gt (int .) 100 -}}{{- $windowSize = int . -}}{{- end -}} +{{- end -}} {{- $classGrid := true -}} @@ -198,14 +203,14 @@ {{- if $classGrid -}}
-
+
{{- end -}} {{- if $classMasonry -}}
-
+
{{- end -}} @@ -347,7 +352,11 @@ {{- if $credits -}} - {{ $credits = printf "%s %s" (i18n "photoBy") $credits }} + {{- with (i18n "photoBy") -}} + {{- $credits = printf "%s %s" (i18n "photoBy") $credits -}} + {{- else -}} + {{- $credits = printf "Photo by: %s" $credits -}} + {{- end -}} {{- end -}} {{- $break := "" -}} @@ -357,7 +366,7 @@ - {{- $caption -}} + {{- $caption -}} @@ -370,7 +379,7 @@ {{- if $classMasonry -}}
-
+
{{- end -}} diff --git a/package-lock.json b/package-lock.json index 54194ef..c84e9dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "@gethinode/mod-template", + "name": "@myrthos/mod-mgallery", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@gethinode/mod-template", + "name": "@myrthos/mod-mgallery", "version": "0.0.0", "hasInstallScript": true, "license": "MIT",