README

实现了响应式的SlickSlider，作为一个LUYA小工具，可以在LUYA管理UI中以拖拽块扩展的形式直接使用。

这是一个为LUYA提供的yii2扩展。

功能

基于屏幕最小宽度或方向的自适应图片
可选地添加独立的视网膜图片
可复用的组件，可以包含在自定义视图文件中
包含picturefill以更好地支持<picture>标签
图像画廊遵循Schema.org标准
多语言LUYA管理UI支持
响应式且触摸友好

安装

将Composer包添加到您的项目中

composer require dev7ch/luya-ext-slick

运行导入

./luya import

使用方法

这个LUYA扩展以两种方式使用：

作为LUYA管理UI中拖拽块的默认块。
作为PHP小工具在自定义视图文件中使用，并具有自定义的Slick.js设置。

1. 块使用方法

只需在管理UI的页面部分将块拖放到所需位置，并为新的Slick滑块添加内容。

2. 小工具使用方法

这个扩展作为小工具提供，这意味着它可以被模块或块重用于自定义视图。

示例用法在块视图文件中

<?php
use dev7ch\slick\SlickWidget;

$images = $this->extraValue('images'); // Array of images width additional fields

?>

<div class="container">
    <?= SlickWidget::widget([
        'images' => $images,
        'slickConfigWidget' => [
            'infinite' => 'true',
            'slidesToShow' => '1',
            'slidesToScroll' => '1',
            'autoplay' => 'true',
            'autoplaySpeed' => '5000' // see all available configs http://kenwheeler.github.io/slick/#settings
        ]
    ])
    ?>
</div>

或者你可以像这样从文件加载Slick.js配置

<?= SlickWidget::widget([
    'images' => $images,
    'slickConfigFile' => 'path/to/yourConfig.php'  // or a .json file
]);
?>

路径的开头指向你的项目根文件夹（不是Web根目录，即public_html目录）。

使用slickConfigFile将覆盖已配置的slickConfigWidget。

由于这个小工具支持自适应图片，以下是对其背后的逻辑的简要解释。

单张图片和附加信息作为数组提供

<div class="slider slick-slider" itemscope itemtype="http://schema.org/ImageGallery">
    <?php foreach ($widget->images as $image):
        $title = $image['title'];
        $link = $image['link'];
        $imageFallback = $image['image']->source;
        $respImages = $image['responsive_images'];
        $alt = $image['alt'];
    ?>

        // ... slider content array

    <?php endforeach; ?>
</div>

单张图片的数组包含一个嵌套数组，用于自适应图片，特别是

// ... wrapped by foreach loop with vars declaration  

<div class="slider-item">
   <figure itemprop="associatedMedia" class="slider-image-container" itemscope itemtype="http://schema.org/ImageObject">
       <?php if (!empty($link)) {return '<a href="'.$link->link.'" itemprop="contentUrl">';} ?>
       <?php if (is_array($respImages) || is_object($respImages)): ?>
           <!-- adaptive images -->
           <picture>
               <?php foreach ($respImages as $item):
                   $image = $item['image']->source;
                   $imageHD = $item['imageHD'] ? $item['imageHD']->source : $item['image']->source;
                   $orientation = $item['orientation'] ? ' and (orientation:'.$item['orientation'].')' : '';
                   $breakpoint = $item['breakpoint'] ? ' media="(min-width:'.$item['breakpoint'].'px)'.$orientation.'"' : 'media="(min-width:0)'.$orientation.'"';
               ?>
                   <source srcset="<?= $image ?>, <?= $imageHD ?> 2x"<?= $breakpoint ?>>
               <?php endforeach; ?>
               <!-- fallback image -->
               <img class="slider-image" src="<?= $imageFallback ?>" itemprop="image" alt="<?= $alt ?>"
                    srcset="<?= $imageFallback ?>, <?= $imageFallback ?> 2x">
           </picture>
       <?php else: ?>
           <img class="slider-image" src="<?= $imageFallback ?>" itemprop="image" alt="<?= $alt ?>"/>
       <?php endif; ?>
       <?php if (!empty($link)) {return '</a>';} ?>
       <figcaption class="slick-caption" itemprop="caption description"><?= $title ?></figcaption>
   </figure>
 </div>

合作

如果您想做出任何贡献，例如翻译，我们非常欢迎。

关于在您的LUYA env dev中使用此存储库，请记住，picturefill和slick-carousel是需要在vendor/bower文件夹中的依赖项，只需在luya-env-dev根目录下运行，将其添加到composer.json中

composer require bower-asset/slick-carousel:~1.8.0
composer require bower-asset/picturefill:~3.0.0

单元测试

1.) 创建assets目录。
2.) 运行./vendor/bin/phpunit tests/SlickBlockTest.php

确保Composer正确地在您的对应vendor文件夹中安装了所有必要的依赖项

要运行PHPUnit测试，需要在扩展的根目录中创建assets/目录，例如luya-env-dev/repos/luya-ext-slick/assets。

assets/目录仅用于测试执行，不应被VCS跟踪或提交。

即将推出

将所有Slick.js选项添加到管理UI块配置中
将所有Slick.js选项作为属性添加到小工具中
创建管理UI块视图

dev7ch/ luya-ext-slick

维护者

详情