How to use Blazy programmatically via Slick module API ?

Created on 17 August 2023, over 1 year ago

Updated 19 August 2023, over 1 year ago

Problem/Motivation

I am using code in custom block to get the slick slider of articles previews. Each slide include mixed content images + text - set of articles previews for a certain month. It loads about 800 articles previews in 110 slides, 800 images.
I need a help how to make it loading via blazy? The api instructions on https://git.drupalcode.org/project/slick/-/blob/7.x-3.x/slick.api.php is not clear .
How to start blazy loading in this code?

foreach ($number as $item){     
		$imageUrl = image_style_url('numbers_slider', $item['file_managed_field_data_field_list_image_uri']);		
		$items[$item['taxonomy_term_data_node_tid']]['slide'] .= '<a href="/node/'.$item['nid'].'"><div class="slider-image"><img src="' . $imageUrl . '" /></div>
		<div>' . $item['node_title'] . '</div>
		<div class="clear"></div></a>';
	}


$slick = slick();
$build = [];
$formatter = slick('formatter');
$build['items'] = $items;
	
$build['options'] = [
		'autoplay' => FALSE,
		'dots'     => FALSE,
		'arrows'   => TRUE,
];

$build['settings'] = [    
    'optionset' => 'numbers_slider',
    'skin' => '',    
    'id' => '',
  ];

$element = $slick->build($build);

return $element;

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request

Status

Closed: works as designed

Version

3.2

Component

Code

Created by

🇦🇿Azerbaijan haver

Live updates comments and jobs are added and updated live.

blazy

Comments & Activities

Issue created by @haver
Comment over 1 year ago →
🇦🇿Azerbaijan haver
Status changed to Closed: works as designed over 1 year ago12:28pm 19 August 2023
Comment over 1 year ago →
🇦🇿Azerbaijan haver
Solved as described in Blazy API doc https://git.drupalcode.org/project/blazy/-/blob/7.x-1.x/blazy.api.php
Create fake image object

$itm = new \stdClass(); $itm->width = 50; $itm->height = 50; $itm->alt = ''; $itm->uri = $imageUrl; $el = ['item' => $itm,];
Format with Blazy formatter
$formatted = $formatter->getBlazy($el);

Use in 'slide' html markup
<div class="slider-image">' . drupal_render($formatted) . '</div>

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024