README

Yii2 Responsive Image

使用自定义预设创建缩略图并在响应式小部件中使用

安装

安装此扩展的首选方式是通过 composer.

运行以下命令之一

php composer.phar require --prefer-dist tomlutzenberger/yii2-responsive-image "*"

或在您的 composer.json 文件的必需部分添加

"tomlutzenberger/yii2-responsive-image": "*"

到

使用

安装扩展后，将组件添加到您的 web.php

    // ...
    'components' => [
        // ...
        'responsiveImage' => [
            'class'   => 'TomLutzenberger\ResponsiveImage\components\ResponsiveImage',
            'presets' => [
                // Your presets here
            ],
        ],
    ],

定义预设

预设就像是缩略图生成器和图片小部件的模板。

    'preset-name' => [
        // Path where the source images are stored
        // Must be absolute and web-accessible -> @webroot
        // Will be used to bulk-generate via console command
        // Required
        'srcPath'         => '@webroot/img/some_path',

        // Path where the thumbnails should be stored
        // Must be absolute and web-accessible -> @webroot
        // If not set, component's defaultTargetPath will be used
        // Optional
        'targetPath'      => '@webroot/img/some_path/preset-name',

        // File extension of the thumbnails
        // If not set, thumbnail will have the same extension as source file
        // Optional
        'targetExtension' => 'jpg',

        // Thumbnail width and height in pixels
        // At least one of them is required
        'width'           => 480,
        'height'          => 400,

        // Image quality in percent
        // Optional
        'quality'         => 80,

        // Viewport breakpoints for the Picture widget
        // Thumbnails gets only displayed within this breakpoint (min and/or max)
        // At least one of them is required
        'breakpointMin'   => 992,
        'breakpointMax'   => 1200,

        // Enable/disable cache-busting for a single preset
        // Optional, defaults to `true`
        'cacheBusting'    => true,
    ],

使用图片小部件

只需设置源图像和您想要使用的预设。

重要

• 源图像的路径必须是别名且可公开访问，因此可以是 @web 或 @webroot
• 源图像的路径需要匹配预设的 srcPath

<?= TomLutzenberger\ResponsiveImage\widgets\Picture::widget([
    'image'   => '@web/image/content/my-image.jpg',
    'presets' => [
        'content-xs',
        'content-sm',
        'content-md',
        'content-lg',
        'content-xl',
    ],
]) ?>

根据需要，您还可以设置 pictureOptions 和 imageOptions

使用控制台命令

控制台命令旨在为所有或仅单个预设生成或刷新缩略图。如果没有缩略图，它们将在需要时生成（不推荐）。

要使用它，您需要将其相同的配置添加到 console.php 中，就像您在 web.php 中做的那样。然而，建议您将预设放入 params.php 以保持清洁和一致性。

此外，为了能够调用命令，需要在控制器映射中定义控制器

    // ...
    'components' => [
        // ...
        'responsiveImage' => [
            // ...
        ],
    ],
    'controllerMap'       => [
        // ...
        'image' => [
            'class' => 'TomLutzenberger\ResponsiveImage\commands\ImageController',
        ],
    ],

此外，您还需要在 yii 文件中定义别名 @web 和 @webroot

    // Put this after the 'require' of the Yii.php
    Yii::setAlias('@webroot', __DIR__ . '/web');
    Yii::setAlias('@web', '/');