diff --git a/README.md b/README.md index 736fb72..1eaa339 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,9 @@ Hugo's built-in image processing facilities are used to create the srcset< **figset** can use [lightboxSSA](https://github.com/StarsoftAnalysis/lightboxSSA) to create a light box or carousel-type gallery out of some or all of the images on a page. +There is also a **figgallery** shortcode (and partial), which builds a figrow from all the +images found in the pages resources. + ## More details Images are sized... adjusted to have the same area @@ -238,7 +241,7 @@ Parameters get passed in as a dict, starting with the current site and page cont e.g. {{ partial figset (dict "site simple figset examplt -more complex example with figrow -- hae to do your own iterating, can't put defaults in the figrow +TODO: more complex example with figrow -- have to do your own iterating, can't put defaults in the figrow DON'T FORGET!! * figset needs the site and page context to be passed in, * when using figrow_start partial from another template: diff --git a/assets/css/figset.css b/assets/sass/figset.css similarity index 100% rename from assets/css/figset.css rename to assets/sass/figset.css diff --git a/assets/sass/figset.scss b/assets/sass/figset.scss new file mode 100644 index 0000000..dff0ca4 --- /dev/null +++ b/assets/sass/figset.scss @@ -0,0 +1,126 @@ +/* Part of figset module */ +div.figrow { + margin: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +figure.figset { + margin: 0 1em 0.5em; + width: fit-content; + display: table; +} +figure.figset figcaption { + display: table-caption; + caption-side: bottom; +} +figure.figset img, figure.figset video { + max-width: 100%; + display: table-cell; +} + +div.figrow.figrow-jccenter { + justify-content: center; +} +div.figrow.figrow-jccenter figcaption.figset-caption { + text-align: center; +} + +div.figrow.figrow-jcstart { + justify-content: flex-start; +} +div.figrow.figrow-jcstart figcaption.figset-caption { + text-align: start; +} + +div.figrow.figrow-jcend { + justify-content: flex-end; +} +div.figrow.figrow-jcend figcaption.figset-caption { + text-align: end; +} + +div.figrow.figrow-jcaround { + justify-content: space-around; +} +div.figrow.figrow-jcaround figcaption.figset-caption { + text-align: center; +} + +div.figrow.figrow-jcbetween { + justify-content: space-between; +} +div.figrow.figrow-jcbetween figcaption.figset-caption { + text-align: center; +} + +div.figrow.figrow-jcevenly { + justify-content: space-evenly; +} +div.figrow.figrow-jcevenly figcaption.figset-caption { + text-align: center; +} + +figure.figset.figset-ascenter { + align-self: center; +} + +figure.figset.figset-asstretch { + align-self: stretch; +} + +figure.figset.figset-asbaseline { + align-self: baseline; +} + +figure.figset.figset-asstart { + align-self: flex-start; +} + +figure.figset.figset-asend { + align-self: flex-end; +} + +figure.figset.figset-posstart { + float: left !important; + float: inline-start !important; + margin-left: 0 !important; + margin-inline-start: 0 !important; +} +figure.figset.figset-posstart figcaption.figset-caption { + text-align: left !important; + text-align: start !important; +} + +figure.figset.figset-posend { + float: right !important; + float: inline-end !important; + margin-right: 0 !important; + margin-inline-end: 0 !important; +} +figure.figset.figset-posend figcaption.figset-caption { + text-align: right !important; + text-align: end !important; +} + +figure.figset.figset-poscenter { + margin-right: auto !important; + margin-left: auto !important; +} +figure.figset.figset-poscenter figcaption.figset-caption { + text-align: center !important; +} + +/* Classes for testing: */ +.figset-test1 { + background: blue; + padding: 1em; +} + +.figset-test2 { + background: green; + padding: 1em; +} + +/*# sourceMappingURL=figset.css.map */ diff --git a/layouts/partials/figgallery.html b/layouts/partials/figgallery.html new file mode 100644 index 0000000..2b9264d --- /dev/null +++ b/layouts/partials/figgallery.html @@ -0,0 +1,50 @@ +{{- /* + +figgallery partial + +Generates a figrow from all the images in a folder (or other source). + +Can be called directly, or via the figgallery shortcode. +Note that the shortcode can put more things in the dict to be accessed +from the figset shortcode: this doesn't work when using the partials directly, +so common values, e.g. gallery or size, have to be in each invocation of figset. + +Parameters (in the dict/context): + * sort - "date" or "name" or "shuffle" + * order - "asc" or "desc", default "asc" + + * justify - values as for CSS's justify-content + Accepts these values: + center*|centre* start*|left*|flex-start end*|right*|flex-end around*|space-around between*|space-between evenly*|space-evenly + where values with an asterisk can be abbreviated as long as they're not ambiguous. + * id - CSS id for the figrow div + * class -- CSS class(es) for the figrow div + +If from another template (rather than via shortcodes), do this: +(note use of "figrow true" to tell figset that it's in a row) + {{ partial "figrow_start.html" (dict "site" .Site "page" .Page "justify-contents" "center" "align-items" "top" "size" "small" ...) }} + {{ partial "figset.html" (dict "site" .Site "page" .Page "figrow" true "gallery" "foo" "name" "image1.jpg" "caption" "a photo" ...) }} + {{ partial "figset.html" (dict "site" .Site "page" .Page "figrow" true "gallery" "foo" "name" "image2.jpg" "caption" "another photo" ...) }} + {{ partial "figrow_end.html" (dict "site" .Site "page" .Page) }} + +*/ -}} + +{{ $site := .site }} +{{ $page := .page }} + +{{- $sort := lower .sort | default "shuffle" -}} +{{- $order := lower .order | default "asc" -}} + +{{ $images := $page.Resources.ByType "image" }} +{{ if eq $sort "shuffle" }} + {{ $images = shuffle $images }} +{{ else }} + {{ $images = sort $images $sort $order }} +{{ end }} + +{{ partial "figrow_start.html" (dict "site" $site "page" $page "justify-contents" "center" "align-items" "center" ) }} +{{/* range ($page.Resources.ByType "image") | shuffle */}} +{{ range $images }} + {{ partial "figset.html" (dict "site" $site "page" $page "figrow" true "gallery" "foo" "xname" "image1.jpg" "image" . "size" "small" ) }} +{{ end }}{{/* range */}} +{{ partial "figrow_end.html" (dict "site" $site "page" $page) }} diff --git a/layouts/partials/figset.html b/layouts/partials/figset.html index 3aac26d..28904df 100644 --- a/layouts/partials/figset.html +++ b/layouts/partials/figset.html @@ -12,6 +12,9 @@ The figset shortcode can get all options from a figrow parent (if any). +# TODO: +- use resources.getremote (https://gohugo.io/functions/resources/getremote/) for remote images + args (in the dict/context): .site -- site .page -- current page diff --git a/layouts/shortcodes/figgallery.html b/layouts/shortcodes/figgallery.html new file mode 100644 index 0000000..140e5f4 --- /dev/null +++ b/layouts/shortcodes/figgallery.html @@ -0,0 +1,30 @@ +{{- /* figgallery.html -- shortcode for + +... + TODO what about clearing before the row? + Parameters: -- see partials/figrow_start.html + * justify - values as for CSS's justify-content + * clear - if true, adds a clear=both after the figrow. + * id + * class + * figsetclass + * debug - set true to output debug information as warnings + NOTE Other figset options can be set for figrow and will be used in figset + e.g. {{< figrow size=large >}}{{ figset name="x.png" }}{{ figset name="y.jpg" size=small }}... + sets size for x.png to large without any work here. For y.jpg, small will override the setting in figrow. + These are obtained in partials/figset.html via e.g. {{ .Parent.Get "size" }} + +*/ -}} + +{{- /* Get parameters and apply defaults */ -}} +{{- $justify := .Get "justify" -}} +{{- $clear := .Get "clear" -}} +{{- $id := .Get "id" -}} +{{- $class := .Get "class" -}} +{{- $figsetclass := .Get "figsetclass" -}} +{{- $debug := .Get "debug" -}} + +{{- /* We DON'T need to deal with parameters used by figset via its .Parent -- the shortcode mechanism handles that automatically. */ -}} + +{{- partial "figgallery.html" (dict "site" .Site "page" .Page ) -}} +