jekyll-page-asset 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e67fa350064b585c84d962a4752e3575c2a7f76b8794e3e24a41dbc5711195a
-  data.tar.gz: 2475c4193837a426fafafd2c688c43f3702eeb8091f3346bd7bafe5c7d6177eb
+  metadata.gz: 8db9a6281095ce4e99b4c0d3b8ddec55c5ce371fb6164c721ca9568a18068e05
+  data.tar.gz: 7e98af8cb08d9ac9e4aa714fdd8a2aea07b570e407e9537bbaf037fbd5985e7c
 SHA512:
-  metadata.gz: 537867e38701854bac6c6573ffa1f897992f3d6b12bee42014417cb41ec292e7879e2247ad00e16df7533956d222c32dcee621b5f17cb6049dc96ab026faf1ca
-  data.tar.gz: a855b2886668c271a604446ae95fb35232d0b4f5405b26f855510f4ffc9b22f0818ee5e46a8436e7b7056bad89dedac00fa9347c1f0c8994b6b8e83df1a346bc
+  metadata.gz: 75bad5045e80cf194478a525e9d7fb681cde348b8a67a8962c4eabc207cc9df001fb47f6bd1fdcb38c89f225ff2dc9bdd6f1b42a6ed2e32ef6075eb5298e7bdf
+  data.tar.gz: bd98568459c9efb1495fc564bb51aba5fbd4f8159afc071c8bd01447797fdbff7b9d6ab1ee6fc61817f29906fa685e2f486237da4356b6d120cfce2f6134800b

data/README.md

@@ -5,7 +5,7 @@ bundle exec jekyll serve --livereload
 ```
 # jekyll-page-asset
 
-The `page_asset` plugin designed for a project portfolio style ( although it might well work with blog/post style layouts) to make it easy to put assets that relate to a page, onto that page.
+The `page_asset` extensible plugin designed for a project portfolio style ( although it might well work with blog/post style layouts) to make it easy to put assets that relate to a page, onto that page.
 
 It's essentially a convenience tag for adding components that reference media files into project pages. The media files are stored in the `assets/project_media/<project-slug>/` folder and can be referenced by just a relative path to that folder.
 
@@ -14,7 +14,7 @@ The intent is to make it easy to add media components into project pages by defi
 
 ## Supported components
 ### image
-Standard image. This delegates to the `jekyll_picture_tag` plugin which handles responsive images. Any args past the filename are passed through to that plugin, so you can use any of the options it supports.
+Standard image. This delegates to the [jekyll_picture_tag](https://github.com/rbuchberger/jekyll_picture_tag) plugin which handles responsive images. Any args past the filename are passed through to that plugin, so you can use any of the options it supports.
 
 `{% page_asset image <image-filename> [alt="<alt-text>"] %}`
 
@@ -34,12 +34,16 @@ Video that loads muted and advances as the user scrolls the page.
 `{% page_asset scroll_scrub_video <video-filename> %}`
 
 ### gallery
-Pass a folder name in the media asset directory and all images in that folder will be displayed in a gallery.
+Pass a folder name in the media asset directory and all images in that folder will be displayed in a gallery. Image files in the gallery can also have a 'support file' - a markdown file with the same name as the image. Support files can give a custom `alt` value in frontmatter, and markdown body is displayed as an image description in the lightbox view.
+
 The generated html and script for this will also write tags to two target mount points in the site, if found.
-`project-asset-gallery-lightbox` is the target for the lightbox html. By default this is styled to fill the viewport area of the component that it is mounted in to act as a full area takeover.
-`project-asset-gallery-controls` is the target for the gallery controls - to move to next/previous images and close the lightbox. This appears when the lightbox is open.
+
+* `project-asset-gallery-lightbox` is the target for the lightbox html. By default this is styled to fill the viewport area of the component that it is mounted in to act as a full area takeover.
+
+* `project-asset-gallery-controls` is the target for the gallery controls - to move to next/previous images and close the lightbox. This appears when the lightbox is open.
 `{% page_asset gallery <gallery-folder-name> %}`
 
+
 ### fountain script reader
 Simple scrollable script reader for [fountain](https://fountain.io/) formatted scripts.
 
@@ -101,6 +105,8 @@ end
 ```
 and has the following variables available:
 
+| Argument | Description |
+| :--- | :--- |
 | @type | component type string |
 | @asset_path_arg | requested path argument from the tag |
 | @rest | all the rest of the args from the tag (useful for passing through) |

data/_includes/page_asset/gallery.html

@@ -15,6 +15,7 @@
           '<div class="gallery-lightbox" id="gallery-lightbox" role="dialog" aria-modal="true" aria-label="Image viewer" hidden>' +
           '<div class="gallery-lightbox-inner" tabindex="-1">' +
           '<img class="gallery-lightbox-image" id="gallery-lightbox-image" src="" alt="">' +
+          '<div class="gallery-lightbox-desc" id="gallery-lightbox-desc">' +
           '</div>' +
           '</div>';
         lightboxMount.setAttribute(MOUNTED_ATTR, "true");
@@ -37,6 +38,7 @@
     function initLightbox() {
       var lightbox = document.getElementById("gallery-lightbox");
       var lightboxImage = document.getElementById("gallery-lightbox-image");
+      var lightboxDesc = document.getElementById("gallery-lightbox-desc");
       var lightboxMount = document.getElementById("page-asset-gallery-lightbox");
       var focusableSelector = ".gallery-controls .gallery-control-button";
 
@@ -86,7 +88,8 @@
           .map(function (thumb) {
             return {
               src: thumb.getAttribute("data-gallery-src"),
-              alt: thumb.getAttribute("data-gallery-alt") || "Gallery image"
+              alt: thumb.getAttribute("data-gallery-alt") || "Gallery image",
+              desc: thumb.getAttribute("data-gallery-desc")
             };
           });
       }
@@ -110,6 +113,7 @@
         var current = state.items[state.index];
         lightboxImage.src = current.src;
         lightboxImage.alt = current.alt;
+        lightboxDesc.innerHTML = current.desc;
         emitState();
       }
 

data/_lib/page_asset/gallery_renderer.rb

@@ -22,8 +22,11 @@ module Jekyll
 
         thumbnails = images.each_with_index.map do |filename, index|
           asset_path = File.join(gallery_asset_root, filename)
+          supporting_text = get_supporting_text(context, asset_path)
+
           src = "/#{asset_path}"
-          alt = alt_text_for(filename, index)
+          alt = supporting_text.dig(:args, 'alt') || alt_text_for(filename, index)
+          description = supporting_text.dig(:body)
           picture_tag = render_thumbnail(context, asset_path)
 
           <<~HTML
@@ -35,6 +38,7 @@ module Jekyll
               data-gallery-index="#{index}"
               data-gallery-src="#{html_escape(src)}"
               data-gallery-alt="#{html_escape(alt)}"
+              data-gallery-desc="#{html_escape(description)}"
               aria-label="Open image #{index + 1}">
               #{picture_tag}
             </button>
@@ -70,6 +74,32 @@ module Jekyll
         stem.gsub(/\s+/, " ")
       end
 
+      def get_supporting_text(context, path)
+        # find supporting md file if it exists
+        supporting_md = File.join(File.dirname(path) , File.basename(path, ".*") + ".md")
+        if File.exist?(supporting_md)
+          file_contents = File.read(supporting_md)
+          site = context.registers[:site]
+
+          if file_contents =~ Jekyll::Document::YAML_FRONT_MATTER_REGEXP
+            front_matter_string = $1
+            body_content = $POSTMATCH # Captures everything after the front matter block
+
+            # Parse the front matter string using Jekyll's internal parser
+            front_matter = SafeYAML.load(front_matter_string)
+          else
+            body_content = file_contents
+          end
+
+          return {
+            args: front_matter,
+            body: site.find_converter_instance(Jekyll::Converters::Markdown)
+                  .convert(body_content)
+          }
+        end
+        {}
+      end
+
       def empty_state_html(gallery_id)
         <<~HTML
           <section class="project-gallery" data-gallery="#{html_escape(gallery_id)}" aria-label="Image gallery">

data/_sass/_page-asset.scss

@@ -199,6 +199,10 @@
     }
 }
 
+.gallery-lightbox-desc {
+    margin-top: $spacing-md;
+}
+
 .project-gallery-grid {
     column-count: 3;
     column-gap: $spacing-md;

data/lib/jekyll-page-asset/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllPageAsset
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-page-asset
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Alastair King