After installing the latest version and clearing the cache the height of an existing slider was doubled due to new whitespace under the image:
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.
Comment | File | Size | Author |
---|---|---|---|
#28 | slick_views-removal_whitespace-3135699-13623347.patch | 1.48 KB | amritendu1980 |
#9 | Screen Shot 2020-05-12 at 12.41.04 PM.png | 214.5 KB | bscwebmaster |
#9 | Screen Shot 2020-05-12 at 12.40.29 PM.png | 181.72 KB | bscwebmaster |
whitespace.jpg | 65.03 KB | kaipipek |
Comments
Comment #2
gausarts CreditAttribution: gausarts commentedThank you.
Cache cleared, CSS and JS re-generated?
Comment #3
kaipipek CreditAttribution: kaipipek commentedYes, 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.
Comment #4
gausarts CreditAttribution: gausarts commentedscreenshot of blazy form?
Comment #5
bscwebmaster CreditAttribution: bscwebmaster commentedI noticed "blazy/ratio" is missing from the ajaxPageState command settings. It's there in 2.2 but not in 2.3.
Comment #6
gausarts CreditAttribution: gausarts commentedThanks.
Is the issue standing with Aspect ratio filled in too? Screenshot of blazy form will help.
Comment #7
bscwebmaster CreditAttribution: bscwebmaster commentedLike so?
https://imgur.com/a/ZU33Wa3
Comment #8
gausarts CreditAttribution: gausarts commentedPlease upload it to drupal. cannot see imgur without a vpn for now.
Comment #9
bscwebmaster CreditAttribution: bscwebmaster commentedComment #10
gausarts CreditAttribution: gausarts commentedSorry, I meant blazy formatter form.
Comment #11
bscwebmaster CreditAttribution: bscwebmaster commentedHow do I find that?
Comment #12
bscwebmaster CreditAttribution: bscwebmaster commentedHow do I find that?
Comment #13
bscwebmaster CreditAttribution: bscwebmaster commentedHow 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.
Comment #14
gausarts CreditAttribution: gausarts commentedI 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:
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';
toSlickViews::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.
Comment #15
gausarts CreditAttribution: gausarts commentedComment #16
bscwebmaster CreditAttribution: bscwebmaster commentedI 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.Comment #17
gausarts CreditAttribution: gausarts commented> 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.
Comment #18
bscwebmaster CreditAttribution: bscwebmaster commentedThank 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!
Comment #19
bscwebmaster CreditAttribution: bscwebmaster commentedThank 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!
Comment #20
bscwebmaster CreditAttribution: bscwebmaster commentedThank 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!
Comment #21
kaipipek CreditAttribution: kaipipek commentedAwesome, thanks for the help guys!
Comment #22
stevenfrankdavis CreditAttribution: stevenfrankdavis commentedI 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.
Comment #23
gausarts CreditAttribution: gausarts commentedParts 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.
Comment #24
kb_klash CreditAttribution: kb_klash commentedIs 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.
Comment #25
gausarts CreditAttribution: gausarts commentedSounds 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.
Comment #26
d2d CreditAttribution: d2d as a volunteer commentedThank you bscwebmaster. I had the same problem. Your explanation nailed it.
Comment #27
gausarts CreditAttribution: gausarts commentedComment #28
amritendu1980 CreditAttribution: amritendu1980 commentedThe patch will reduce space as issue mentioned.
Comment #29
david.chevillet CreditAttribution: david.chevillet commentedHi,
Same problem, this patch works for me ! Thanks.
Comment #30
Ahmad Abbad CreditAttribution: Ahmad Abbad as a volunteer and commentedThis patch works for me ! Thanks.
Comment #31
ARUN AK CreditAttribution: ARUN AK commentedFor me its completely huge white space. Even this patch doesn't make any difference.
But can see slick elements while inspect. Any idea?
Comment #32
ivnish CreditAttribution: ivnish commented+1
This padding breaks adaptive height
Quick solution:
.media--slick {
padding-bottom: 0 !important;
}
Comment #33
chamilsanjeewa CreditAttribution: chamilsanjeewa as a volunteer and commentedThis patch works, Thanks
Comment #35
gausarts CreditAttribution: gausarts commentedIf 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.