I am in the habit of hiding my Views fields and then rewriting them in a single custom field. This allows me to control the layout of my fields more precisely than if I just rewrite individual fields.

However, it seems that Slick Views doesn't like it when you do this with Slick fields (the Slick Image formatter in my case). I was trying to output the content of a multi-value image field as a carousel with no thumbnails inside a row that contains a number of other fields. In addition, there are multiple rows within the view.

Hiding the image field and then rewriting it broke the Slick carousel on the front end. Reversing that fixed it.

Not sure this is really a feature request - might be handled just as well through some additional documentation in the Gotchas section?

Comments

millionleaves created an issue. See original summary.

gausarts’s picture

gausarts commented
Title: Support rewriting of fields using Slick Image formatter » Support rewriting of fields using Slick Image formatter, or other blazy-related formatters
Project: Slick Views » Blazy

Sorry for delay. I hope you can make it one way or another.
Let's move it to Blazy as the code to work is there, and may affect the entire blazy-related modules.

gausarts’s picture

gausarts commented
Title: Support rewriting of fields using Slick Image formatter, or other blazy-related formatters » Support rewriting of Views fields using Slick Image formatter, or other blazy-related formatters
gausarts’s picture

gausarts commented
Project: Blazy » Slick Views
Category: Feature request » Support request
Status: Active » Closed (duplicate)

Hiding the image field and then rewriting it broke the Slick carousel on the front end. Reversing that fixed it.

Sorry for delay. I just had time to attend to it.

Let's be on the same page first:
1. I put Slick carousel of multi-value images named field_images inside the Rewrite results:

<h1>{{ title }}</h1>
<div class="slick-wrapper-whatever">{{ field_images }}</div>
<p>{{ edit_node }}</p>

Other fields are hidden as you said, except the output field.
2. The field_images is using Slick Image formatter with regular gotcha: ticked "Use field template" option under "Style settings". Otherwise the theme_field() is not picked up causing broken formatter.
3. I enabled Aspect ratio: fluid.

View the result, and Slick is collapsed aka broken.

The reason is Views stripped the inline style of fluid aspect ratio. Anything passed into the rewrite box is sanitized. Shortly, inline style (style="padding-bottom: 56%;") is not allowed here without which the image is collapsed.

<div class="media media--slick media--ratio media--ratio--fluid media--image" style="padding-bottom: 56%;">

Solution:
Use any Aspect ratio, except fluid. or disable it to see that it is the actual issue.
Slick should display normally again.

I am closing this as we have no other things to do at Blazy, nor Slick.
Slick output is taken care of by core Views once embedded inside the Rewrite results box.
It should just work fine as long as disabling Aspect ratio fluid, specific to when Slick is rewritten.

This had been discussed somewhere at any of slick-related modules with more detailed explanation, but I forgot the link. Last time, it was about broken lazyload where core Views stripped out data-src attributes. Now it seems fine.
Moving this back to Slick Views for easy tracking.

Feel free to re-open if that is not the case. Thanks!

gausarts’s picture

gausarts commented

I added this to Gotchas section as you suggested:
https://www.drupal.org/project/slick_views#slick-gotchas

gausarts’s picture

gausarts commented
Issue tags: +slick gotchas