Use page metadata to process js and css assets (fix #4)

CHANGELOG.md

@@ -1,6 +1,13 @@
+# v1.1.0
+## 2017-04-02
+
+1. [](#new)
+    * Changed assets loading scheme to allow caching of pages with galleries
+
 # v1.0.1
 ## 2017-03-26
 
+
 1. [](#bugfix)
     * Fix validation of gallery div id field
     [https://github.com/variar/grav-plugin-unitegallery/issues/2](https://github.com/variar/grav-plugin-unitegallery/issues/2)

README.md

@@ -37,6 +37,8 @@ This functions goes through each image in passed collection, generates thumbnail
 collects images metadata and outputs special div as required by [Unitegallery](http://unitegallery.net)
 javascript library. Also all css and js files needed for selected theme are added to page assets.
 
+>> NOTE: When page with the gallery is loaded first time thumbnails for each new image are generated. This can be quite time consuming process. Consider loading page manually when new images are added, so that users of your site will not encounter long page load time.
+
 To create the gallery you should call `unite_gallery` from twig template for desired page.
 For example add template `gallery.html.twig` inside `<your_theme>/templates/modular` directory with simple content:
 ```
@@ -61,14 +63,14 @@ user
 	 |--image02.jpg.meta.yaml
 ```
 
-Content of `gallery.md` can be like this (it just disables twig caching for this subpage):
+Content of `gallery.md` can be like this:
 ```
 ---
-never_cache_twig: true
+title: My fancy gallery
 ---
 ```
 
-And `modular.md` just includes child pages:
+And `modular.md` simply includes child pages:
 ```
 ---
 title: My Gallery Page
@@ -104,12 +106,35 @@ Grav images [metadata files](https://learn.getgrav.org/content/media#metafiles)
 * meta.alt_text is used for alt attribute
 * meta.description is used for data-description attribute
 
->> NOTE: In order for this plugin to work never_cache_twig should be set to true for page where `unite_gallery` function is used (hope to relax this requirement in future)
+# Issues with page caching
+This plugin uses twig function to add assets (js and css) to the page.
+This doesn't work very well with Grav caching system.
+There are two workarounds:
+ 1. Disable twig caching for the gallery page.
+    Adding `never_cache_twig: true` to `gallery.md` from example above should do the trick.
+ 2. Enabling `assets_in_meta` parameter for this plugin (either per page) or globally.
+    This will save assets calculated during first twig processing and add them
+    each time page is processed. This parameter is enabled by default.
+    After switching it on cache for all gallery pages should be updated (either by cleaning all cache or by doing some changes to affected pages).
+    For best perfomance consider disabling this mode globally and switching it on only for gallery pages.
+    Using the example above `modular.md` should look like this:
+    ```
+    ---
+    title: My Gallery Page
+
+    content:
+      items: @self.modular
+
+    unitegallery:
+      assets_in_meta: true
+    ---
+    ```
 
 # Config Defaults
 
 ```
 enabled: true
+assets_in_meta: true
 gallery_theme: default
 gallery_div_id: unite-gallery
 thumb_width: 600

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Unitegallery
-version: 1.0.1
+version: 1.1.0
 description: This plugin adds twig function to create media galleries using Unitegallery js library
 icon: th-large
 author:
@@ -8,7 +8,7 @@ author:
 homepage: https://github.com/variar/grav-plugin-unitegallery
 bugs: https://github.com/variar/grav-plugin-unitegallery/issues
 license: MIT
-keywords: gallery
+keywords: gallery, images, unitegallery
 
 form:
   validation: strict
@@ -24,9 +24,22 @@ form:
       validate:
         type: bool
 
+    assets_in_meta:
+      type: toggle
+      label: Store assets in page metadata
+      help: Allows to pass assets from twig to this plugin in case of caching. Can be enabled per-page. Cache should be rebuilt after enabling this.
+      highlight: 1
+      default: 1
+      options:
+        1: Enabled
+        0: Disabled
+      validate:
+        type: bool
+
     gallery_theme:
       type: select
       label: Gallery theme
+      help: Select theme for the gallery that will be used by default. Can be customized from twig.
       default: default
       options:
         default: Default
@@ -40,11 +53,12 @@ form:
     gallery_div_id:
       type: text
       label: Id for gallery div
+      help: Use this to set desired div id for the main gallery div
       default: 'unite-gallery'
       validate:
         type: text
         pattern: ^\S+$
-        message: Valid HTML5 element Id expected (no whitespace allowed)
+        message: Valid HTML5 element Id expected (no whitespace charachers allowed)
 
     thumb_width:
       type: number

twig/unitegallery_extension.php

@@ -82,11 +82,22 @@ protected function addAssets($gallery_theme)
       $assets_path = 'plugin://unitegallery/vendor/unitegallery/';
       $theme_assets_prefix = $assets_path . 'themes/' . $gallery_theme . '/ug-theme-'. $gallery_theme;
 
-      $this->grav['assets']
-                    ->addJs($assets_path . 'js/unitegallery.min.js')
-                    ->addCss($assets_path . 'css/unite-gallery.css')
-                    ->addJs($theme_assets_prefix . '.js')
-                    ->addCss($theme_assets_prefix . '.css');
+      $jsAssets = [$assets_path . 'js/unitegallery.min.js', $theme_assets_prefix . '.js'];
+      $cssAssets = [$assets_path . 'css/unite-gallery.css', $theme_assets_prefix . '.css'];
+
+      // for first time page processing
+      foreach ($jsAssets as $js) {
+          $this->grav['assets']->addJs($js);
+      }
+      foreach ($cssAssets as $css) {
+          $this->grav['assets']->addCss($css);
+      }
+
+      // saving assets in page meta to use in pageInitialzied event hook
+      // for cached pages
+      $page = $this->grav['page'];
+      $page->addContentMeta('unitegallery_assets',
+                            ['js' => $jsAssets, 'css' => $cssAssets]);
 
       return $this;
     }

unitegallery.php

@@ -24,6 +24,7 @@ public function onPluginsInitialized()
 
         $this->enable([
                 'onTwigExtensions'    => ['onTwigExtensions', 0],
+                'onPageInitialized'    => ['onPageInitialized', 0],
         ]);
     }
 
@@ -32,4 +33,42 @@ public function onTwigExtensions()
          require_once(__DIR__ . '/twig/unitegallery_extension.php');
          $this->grav['twig']->twig->addExtension(new \UniteGalleryTwigExtension());
     }
+
+    public function onPageInitialized()
+    {
+      $page = $this->grav['page'];
+
+      $config = $this->mergeConfig($page);
+      if (!$config->get('assets_in_meta', true))
+        return;
+
+      $meta = [];
+
+      // Initialize all page content up front before Twig happens
+      if (isset($page->header()->content['items'])) {
+          foreach ($page->collection() as $item) {
+              $item->content();
+              $item_meta = $item->getContentMeta('unitegallery_assets');
+              if ($item_meta) {
+                  $meta = array_merge_recursive($meta, $item_meta);
+              }
+          }
+      }
+      $page->content();
+
+      // get the meta and check for assets
+      $page_meta = $page->getContentMeta('unitegallery_assets');
+      if ($page_meta) {
+          $meta = array_merge_recursive($meta, $page_meta);
+      }
+
+      if (!empty($meta)) {
+        foreach ($meta['js'] as $js) {
+          $this->grav['assets']->addJs($js);
+        }
+        foreach ($meta['css'] as $css) {
+          $this->grav['assets']->addCss($css);
+        }
+      }
+    }
 }

unitegallery.yaml

@@ -1,4 +1,5 @@
 enabled: true
+assets_in_meta: true
 gallery_theme: tiles
 gallery_div_id: unite-gallery
 thumb_width: 600