After installing the latest version and clearing the cache the height of an existing slider was doubled due to new whitespace under the image:

Whitespace

It is probably this html tag:

<div style="padding-bottom: 60.96%;" data-ratio="60.96" class="media media--slick media--ratio media--ratio--fluid media--image is-b-loaded"><img alt="" class="media__image media__element b-lazy b-loaded" loading="lazy" src="/sites/default/files/tarha-lautasliinat-rapujuhlissa-banneriin.jpg" width="1140" height="695" typeof="foaf:Image"></div>

Reverting back to version 2.2 clears the whitespace.

Maintainer notes:

Solution is to use Blazy formatter with the correct Aspect ratio as mentioned at Blazy homepage, not core Image formatter.
Blazy used to baby-sit, but no longer since 2.1, for cross-module compatibility mentioned on the above issue.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kaipipek created an issue. See original summary.

gausarts’s picture

Category: Bug report » Support request
Priority: Major » Normal

Thank you.

Cache cleared, CSS and JS re-generated?

kaipipek’s picture

Yes, I did drush cr after updating the module. Before that I didn't even notice the issue and therefore I went to update our production server too, unfortunately.

gausarts’s picture

screenshot of blazy form?

bscwebmaster’s picture

I noticed "blazy/ratio" is missing from the ajaxPageState command settings. It's there in 2.2 but not in 2.3.

[
   {
      "command":"settings",
      "settings":{
         "ajaxPageState":{
            "theme":"bootstrap_sass_subtheme",
--->       "libraries":" ...blazy\/load,blazy\/ratio,bootstrap\/popover,... "
         },
 
gausarts’s picture

Status: Active » Postponed (maintainer needs more info)

Thanks.

Is the issue standing with Aspect ratio filled in too? Screenshot of blazy form will help.

bscwebmaster’s picture

gausarts’s picture

Please upload it to drupal. cannot see imgur without a vpn for now.

bscwebmaster’s picture

gausarts’s picture

Sorry, I meant blazy formatter form.

bscwebmaster’s picture

How do I find that?

bscwebmaster’s picture

How do I find that?

bscwebmaster’s picture

How do I find the blazy formatter form? This page (https://www.drupal.org/project/blazy) says one can "Find Blazy formatter under Manage display." Which I take to mean "/admin/structure/types/manage/page/display" but I see nothing about Blazy there.

gausarts’s picture

I think I understand the "problem".

It used to work for Image formatter like the Sick Example -- will change the samples later.
It is no longer now, unless using Blazy formatter specifically:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/src/Dejavu/Blazy...

vs:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.0-rc6/src/Dejavu/B...

The reasons for the change, last time checked:

  1. The old approach do not always work for Blazy lightboxes embedded inside other formatters such as GridStack.
  2. Too expensive loop with many fields. It was fine if you only have 5 fields less. I had 20+ sometimes.

I understand it is a regression, but it is easily resolved by using Blazy formatter with Aspect ratio.

If however you insist to bring back the old approach, feel free to provide patches, either here by forcing $settings['ratio'] = 'fluid'; to SlickViews::buildSettings method, might not be good for some use cases, or at Blazy to make the above method search for Image formatter, too.

I am not pursuing this as the solution is to use Blazy formatter, however I am open for patches.

I should close this issue as works as designed for the above-mentioned improvements, but marked it fixed as the solution is there all along, also to linger it around for a while.

gausarts’s picture

Status: Postponed (maintainer needs more info) » Fixed
bscwebmaster’s picture

I confirm: adding $settings['ratio'] = 'fluid'; to the render method in the src/Plugin/views/style/SlickViews.php file fixes the problem. (I added it just before the $build['settings'] = $settings; line.) And I find it ironic that, as easy as that is to do, I still have not found the "Blazy formatter" on any of the configuration screens for Blazy or the Slick carousel it currently supports.

gausarts’s picture

> I still have not found the "Blazy formatter" on any of the configuration screens for Blazy or the Slick carousel it currently supports.
Once you click on Image/ Media on the Fields section of Views UI on the left hand side, you can select Blazy formatters for the field.

> And I find it ironic that, as easy as that is to do, ...
I understand the trouble, it used to work for Image formatter without you even bother about it because Aspect ratio was initially enforced.
It is no longer enforced since it doesn't always work out well such as for GridStack:
https://git.drupalcode.org/project/gridstack/-/blob/8.x-2.6/js/component...

However since Aspect ratio is always configurable at Blazy formatters, it shouldn't make much difference after all.

bscwebmaster’s picture

Thank you for the guidance. In my case, the view I needed to edit was called Front Page Slideshow. So, a custom name, not google-able. Once there, clicking on the Content: Slideshow Image link in the Fields section took me to the screen where a Formatter could be chosen, finally. And, just as you said, configuring it to Aspect Ratio: Fluid fixes the whitespace issue. Now I can take that bit of code out of the module source. One less thing to worry about.

And I agree, this is probably the best way to do it. I guess it's just the nature of Drupal (or any heavily plugin-dependent CMS) that configuration screens will be buried such that finding them can be difficult, particularly if you didn't build the site yourself.

Cheers!

bscwebmaster’s picture

Thank you for the guidance. In my case, the view I needed to edit was called Front Page Slideshow. So, a custom name, not google-able. Once there, clicking on the Content: Slideshow Image link in the Fields section took me to the screen where a Formatter could be chosen, finally. And, just as you said, configuring it to Aspect Ratio: Fluid fixes the whitespace issue. Now I can take that bit of code out of the module source. One less thing to worry about.

And I agree, this is probably the best way to do it. I guess it's just the nature of Drupal (or any heavily plugin-dependent CMS) that configuration screens will be buried such that finding them can be difficult, particularly if you didn't build the site yourself.

Cheers!

bscwebmaster’s picture

Thank you for the guidance. In my case, the view I needed to edit was called Front Page Slideshow. So, a custom name, not google-able. Once there, clicking on the Content: Slideshow Image link in the Fields section took me to the screen where a Formatter could be chosen, finally. And, just as you said, configuring it to Aspect Ratio: Fluid fixes the whitespace issue. Now I can take that bit of code out of the module source. One less thing to worry about.

And I agree, this is probably the best way to do it. I guess it's just the nature of Drupal (or any heavily plugin-dependent CMS) that configuration screens will be buried such that finding them can be difficult, particularly if you didn't build the site yourself.

Cheers!

kaipipek’s picture

Awesome, thanks for the help guys!

stevenfrankdavis’s picture

I just updated from 8.x-2.2 to 8.x-2.3 and see a similar issue. It seems that in both src/Plugin/views/style/SlickGrouping.php and src/Plugin/views/style/SlickViews.php the following block of code was removed with the latest update:

// Extracts Blazy formatter settings if available.
if (empty($settings['vanilla']) && isset($build['items'][0])) {
$this->blazyManager()->isBlazy($settings, $build['items'][0]);
}

If I add those back in, everything works as before. Is there a reason that code was removed in the latest update? There was nothing in the release notes about it.

gausarts’s picture

Parts of optimizations, and ramifications with Blazy sub-modules other than Slick, hence as mentioned previously GridStack.

That method was also run at SlickManager.

The underlying issue is to avoid hard-coding few settings, since they are actually configurable, and they affected GridStack as mentioned above.

GridStack responsive image was actually disabled before Blazy 2.0. Later it was opened since the removal of custom breakpoints.

This is a rather long story trying to make nice with sub-modules. It was nice for Slick, but not GridStack.

Shortly the hard-coded Aspect ratio troubled GridStack.

At any rate, the solution was there, simply use Blazy formatter, and you can toggle Aspect ratio as needed.

kb_klash’s picture

Is there a way for future updates to be a little less disruptive? I hate having to chase bug reports while dealing with Drupal Security Updates.

gausarts’s picture

Status: Fixed » Active

Sounds like we should do a revert?

GridStack has small user user base, and hopefully the latest internal GridStack has been able to deal with this issue. I forgot about the exact solutions, to be honest. It was a 3-5-month fight, IIRC.

This Outlayer picture should sum up the long fight pretty well:
https://www.drupal.org/files/project-images/Outlayer%20Isotope%20sample.jpg

Core Image or Blazy formatters is embedded inside Slick, embedded inside a GridStack, while the ancestor is still delegated to Blazy. This was one of the pains which brought up this issue.

Feel free to patch as you see fit.

d2d’s picture

Thank you bscwebmaster. I had the same problem. Your explanation nailed it.

gausarts’s picture

Issue summary: View changes
amritendu1980’s picture

The patch will reduce space as issue mentioned.

david.chevillet’s picture

Hi,
Same problem, this patch works for me ! Thanks.

Ahmad Abbad’s picture

This patch works for me ! Thanks.

ARUN AK’s picture

For me its completely huge white space. Even this patch doesn't make any difference.

But can see slick elements while inspect. Any idea?

ivnish’s picture

+1

This padding breaks adaptive height

Quick solution:

.media--slick {
padding-bottom: 0 !important;
}

chamilsanjeewa’s picture

This patch works, Thanks

gausarts’s picture

Status: Active » Fixed

If still an issue, be sure to change your Image formatter to use Blazy formatter as mentioned in the OP under Maintainer notes.

Committed. Thank you for contribution and patience.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.