5 * Hooks and preprocess functions for the Slick module.
8 use Drupal\Core\Template\Attribute;
9 use Drupal\Component\Serialization\Json;
10 use Drupal\slick\Entity\Slick;
13 * Prepares variables for slick.html.twig templates.
15 function template_preprocess_slick(&$variables) {
16 $element = $variables['element'];
17 $defaults = Slick::htmlSettings();
18 $settings = isset($element['#settings']) ? array_merge($defaults, $element['#settings']) : $defaults;
19 $customs = isset($element['#options']) ? $element['#options'] : [];
20 $optionset = isset($element['#optionset']) ? $element['#optionset'] : Slick::load($settings['optionset']);
21 $js = $customs ? array_merge($optionset->getSettings(), $customs) : $optionset->getSettings();
23 // Prepare attributes.
24 $attributes = &$variables['attributes'];
25 $content_attributes = new Attribute();
26 $display = $variables['display'] = $settings['display'];
28 $id = empty($settings['id']) ? Slick::getHtmlId('slick') : $settings['id'];
29 $attributes['id'] = $display == 'thumbnail' ? $id . '-thumbnail' : $id;
31 // Sniffs for Views to allow block__no_wrapper, views__no_wrapper, etc.
32 // @todo: Use $attributes if TWIG class ordering puts $attributes to the last.
33 if ($settings['view_name'] && $settings['current_view_mode']) {
34 $settings['attributes']['class'][] = str_replace('_', '-', 'slick--view--' . $settings['view_name']);
35 $settings['attributes']['class'][] = str_replace('_', '-', 'slick--view--' . $settings['view_name'] . '--' . $settings['current_view_mode']);
38 // @see SlickManager::buildGrid(), and this should make sense.
39 $settings['count'] = isset($settings['count']) ? $settings['count'] : count($element['#items']);
40 $settings['unslick'] = $settings['unslick'] || $settings['count'] == 1;
42 foreach (Slick::jsSettings() as $key => $default) {
43 $settings[$key] = isset($js[$key]) ? $js[$key] : $default;
46 // Blazy can still lazyload an unslick.
47 $settings['lazy'] = empty($settings['lazy']) ? $js['lazyLoad'] : $settings['lazy'];
48 if ($display != 'thumbnail') {
49 if ($settings['lazy'] == 'blazy' || !empty($settings['blazy'])) {
50 if ($settings['lazy'] == 'blazy') {
51 $js['lazyLoad'] = 'blazy';
53 $attributes['data-blazy'] = empty($settings['blazy_data']) ? '' : Json::encode($settings['blazy_data']);
56 if (!empty($settings['media_switch']) && empty($settings['grid'])) {
57 $switch = str_replace('_', '-', $settings['media_switch']);
58 $attributes['data-' . $switch . '-gallery'] = TRUE;
62 if (!empty($js['rtl'])) {
63 $attributes['dir'] = 'rtl';
66 // Prevents broken slick when only one item given, or an enforced unslick.
67 if (!$settings['unslick']) {
68 $content_attributes->setAttribute('id', $attributes['id'] . '-slider');
70 $variables['arrow_attributes'] = new Attribute();
71 if ($display == 'main' && !empty($js['downArrow']) && !empty($js['downArrowTarget'])) {
72 $variables['arrow_down_attributes'] = new Attribute();
75 // focusOnSelect won't work with empty slide value, so add proper selector.
76 // Respects core Grid markups which may wrap .slick__slide within anon DIV.
77 if (empty($js['slide']) && !empty($js['focusOnSelect'])) {
78 $js['slide'] = ($js['rows'] == 1 && $js['slidesPerRow'] == 1) ? '.slick__slide' : $js['slide'];
81 // Add the configuration as JSON object into the slick container.
82 if ($json = $optionset->removeDefaultValues($js)) {
83 $content_attributes->setAttribute('data-slick', Json::encode($json));
87 // Pass settings and attributes to twig.
88 $variables['settings'] = $settings;
89 $variables['content_attributes'] = $content_attributes;
91 // Process individual item.
92 $variables['items'] = [];
93 foreach ($element['#items'] as $delta => $item) {
94 $settings['current_item'] = $display;
95 $settings = isset($item['settings']) ? array_merge($settings, $item['settings']) : $settings;
96 $item_attributes = isset($item['attributes']) ? $item['attributes'] : [];
97 unset($item['settings'], $item['attributes']);
99 $theme = $settings['vanilla'] ? 'vanilla' : ($display == 'thumbnail' ? 'thumbnail' : 'slide');
102 '#theme' => 'slick_' . $theme,
105 '#settings' => $settings,
106 '#attributes' => $item_attributes,
108 $variables['items'][$delta] = $slide;
114 * Prepares variables for slick-wrapper.html.twig templates.
116 function template_preprocess_slick_wrapper(&$variables) {
117 foreach (['attributes', 'items', 'settings'] as $key) {
118 $variables[$key] = isset($variables['element']["#$key"]) ? $variables['element']["#$key"] : [];
123 * Prepares common variables for slick item templates.
125 function _slick_preprocess_slick_item(&$variables) {
126 foreach (['attributes', 'delta', 'item', 'settings'] as $key) {
127 $default = $key == 'delta' ? NULL : [];
128 $variables[$key] = isset($variables['element']["#$key"]) ? $variables['element']["#$key"] : $default;
133 * Prepares variables for slick-vanilla.html.twig templates.
135 function template_preprocess_slick_vanilla(&$variables) {
136 _slick_preprocess_slick_item($variables);
140 * Prepares variables for slick-thumbnail.html.twig templates.
142 function template_preprocess_slick_thumbnail(&$variables) {
143 _slick_preprocess_slick_item($variables);
147 * Prepares variables for slick-slide.html.twig templates.
149 function template_preprocess_slick_slide(&$variables) {
150 _slick_preprocess_slick_item($variables);
152 // All slide types -- main, thumbnail, grid, overlay -- may have captions.
153 foreach (['alt', 'data', 'link', 'overlay', 'title'] as $key) {
154 $variables['item']['caption'][$key] = isset($variables['item']['caption'][$key]) ? $variables['item']['caption'][$key] : [];
157 $item = &$variables['item'];
158 $settings = &$variables['settings'];
160 // split: Split image from captions if we do have captions, and main image.
161 // fullwidth: If full skins, add wrappers to hold caption and overlay.
162 // detroy: Remove .slide__content if it is an enforced unslick grid.
163 // wrapper: Don't add divities for a single item to have clean markups.
164 $item['slide'] = isset($item['slide']) ? $item['slide'] : [];
165 $item['caption'] = array_filter($item['caption']);
166 $settings['split'] = !empty($item) && !empty($settings['caption']);
167 $settings['data'] = !empty($item['caption']['alt']) || !empty($item['caption']['title']) || !empty($item['caption']['data']);
168 $settings['fullwidth'] = !empty($settings['skin']) && strpos($settings['skin'], 'full') !== FALSE;
169 $settings['grid'] = empty($settings['grid']) ? FALSE : $settings['grid'];
170 $settings['detroy'] = $settings['current_item'] == 'main' && !empty($settings['grid']) && !empty($settings['unslick']);
171 $settings['wrapper'] = $settings['count'] > 1 && $settings['current_item'] != 'grid';
175 * Prepares variables for slick-grid.html.twig templates.
177 function template_preprocess_slick_grid(&$variables) {
178 $variables['settings'] = $variables['element']['#settings'];
179 $variables['delta'] = isset($variables['element']['#delta']) ? $variables['element']['#delta'] : 0;
180 $variables['grid_id'] = 'grid';
182 $settings = $variables['settings'];
184 // By default Slick only supports Grid Foundation, adds relevant grid_id for
185 // optional Style: CSS3 Columns, and probably future flexbox.
186 if (!empty($settings['style']) && $settings['style'] != 'slick') {
187 $variables['grid_id'] = $settings['style'];
190 if (!empty($settings['media_switch'])) {
191 $switch = str_replace('_', '-', $settings['media_switch']);
192 $variables['attributes']['data-' . $switch . '-gallery'] = TRUE;
195 $variables['items'] = [];
196 foreach ($variables['element']['#items'] as $delta => $item) {
197 $settings = isset($item['settings']) ? array_merge($settings, $item['settings']) : $settings;
198 $settings['current_item'] = 'grid';
199 unset($item['settings']);
201 $item_attributes = [];
202 if (!empty($item['#attributes'])) {
203 $item_attributes = $item['#attributes'];
206 $slide['content'] = [
207 '#theme' => empty($settings['vanilla']) ? 'slick_slide' : 'slick_vanilla',
210 '#settings' => $settings,
213 $slide['attributes'] = new Attribute($item_attributes);
214 $variables['items'][$delta] = $slide;
220 * Prepares variables for slick-image.html.twig template.
222 * @deprecated: Just use blazy.html.twig to reduce function calls.
224 function template_preprocess_slick_image(&$variables) {
225 template_preprocess_blazy($variables);