diff --git a/css/components/blazy.loading.css b/css/components/blazy.loading.css index 486de3eb49d9c7086a2a9671bd588cc6682676a0..a50a6d0f8e7c6b87e4d06fba1fcab9e88ff6b087 100644 --- a/css/components/blazy.loading.css +++ b/css/components/blazy.loading.css @@ -1,5 +1,6 @@ /** * @file + * Provides loading indicator animation, not used when using blur. */ /* Credit: https://github.com/tobiasahlin/SpinKit */ @@ -41,14 +42,10 @@ /* Hide for non-js users. */ .is-b-loading::before { + z-index: -1; display: none; } -/* Core drupal.init.js provides this .js class for free as long as loaded. */ -.js .is-b-loading:not(.is-b-loaded)::before { - display: block; -} - /* Prevents costly double animations when Blur is enabled. CSSLint vs. Stylelint complain conflicting problems at different CSS specs. @see https://caniuse.com/css-not-sel-list @@ -57,7 +54,6 @@ CSSLint vs. Stylelint complain conflicting problems at different CSS specs. .is-b-loading:not(.is-b-loaded)::before, .is-b-loading:not([data-animation])::before { position: absolute; - z-index: 22; top: 50%; left: 50%; width: 30px; @@ -71,6 +67,8 @@ CSSLint vs. Stylelint complain conflicting problems at different CSS specs. } .is-b-loading.is-b-visible:not(.is-b-loaded)::before { + z-index: 22; + display: block; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } diff --git a/src/BlazyDefault.php b/src/BlazyDefault.php index f65a73454b06b858d9b6d1292f355925db81f743..18e1e949e2ddcdc5febda6e5b9d9d6a084b078ba 100644 --- a/src/BlazyDefault.php +++ b/src/BlazyDefault.php @@ -403,7 +403,7 @@ class BlazyDefault { */ public static function dyComponents(): array { $deps = ['blazy/compat']; - $common = ['minified' => TRUE, 'weight' => -1]; + $common = ['minified' => TRUE, 'weight' => -1.8]; $libs = []; foreach (['instagram', 'pinterest'] as $key) { diff --git a/src/Media/Placeholder.php b/src/Media/Placeholder.php index 127b74bd2bcd59eac8aaf842e39742ff4d9a169e..447a5d9167021f8a1322dfebf0fe676e7aa9ab2a 100644 --- a/src/Media/Placeholder.php +++ b/src/Media/Placeholder.php @@ -157,7 +157,7 @@ class Placeholder { // Provides image effect if so configured unless being sandboxed. // Slick/ Splide lazy loads won't work, needs Blazy to make animation. - if ($blazies->is('blazy') && $fx = $blazies->get('fx')) { + if ($fx = $blazies->get('fx')) { $attributes['class'][] = 'media--fx'; $attributes[Attributes::data($blazies, 'animation')] = $fx; } @@ -195,7 +195,7 @@ class Placeholder { */ private static function dataImage(array &$settings, $uri, $tn_uri, $tn_url, $style): void { $blazies = $settings['blazies']; - if (!$blazies->is('blazy') || !$blazies->use('blur')) { + if (!$blazies->use('blur')) { return; } diff --git a/src/Theme/Lightbox.php b/src/Theme/Lightbox.php index c209e9fc3c5f96bde8d6c54c6cf2e49ae6ccf41e..8243edfa745dd2eefd48661d0316359653d7b69d 100644 --- a/src/Theme/Lightbox.php +++ b/src/Theme/Lightbox.php @@ -338,6 +338,7 @@ class Lightbox { if ($has_dim && !empty($json['paddingHack'])) { $pad = round((($json['height'] / $json['width']) * 100), 2); $style .= 'width:' . $json['width'] . 'px; padding-bottom: ' . $pad . '%;'; + $hattrs['data-b-ratio'] = $pad; } // Currently only audio with background cover. diff --git a/src/Utility/CheckItem.php b/src/Utility/CheckItem.php index 2455adabe727213049f252f2b96cb329af85ea8f..654fb8e46acaf454b5aa8e9adf4214fd341ac6c5 100644 --- a/src/Utility/CheckItem.php +++ b/src/Utility/CheckItem.php @@ -194,7 +194,7 @@ class CheckItem { // @todo better logic to support loader as required, must decouple loader. // @todo $lazy = $blazies->get('image.loading') == 'lazy'; - // @todo $lazy = $blazies->is('blazy') && ($blazies->get('libs.compat') || $lazy); + // @todo $lazy = $blazies->get('libs.compat') || $lazy; // Redefines some since this can be fed by anyone, including custom works. $blazies->set('is.fluid', $is_fluid) ->set('is.blur', $is_blur)