README

概述

The ResponsiveImageBundle为Symfony3项目添加了轻松创建样式化和响应式图像（缩放、裁剪、灰度）的功能。响应式图像将以<picture>标签或带大小和scrset属性的<mg>标签的形式生成。

还提供了一个裁剪和焦点区域小部件，以确保裁剪的图像始终包含图像最重要的部分。

组件使用FlySystem文件系统抽象层，让您控制图像存储的位置。事件被用来驱动系统，提供了更多的灵活性，并能够实现密集图像处理的队列。

特性

图像对象通过Doctrine ORM存储
处理上传图像到"FlySystem"文件系统
图像样式在配置中定义。
断点和图片集在配置中定义
如果使用本地文件系统，可以即时创建样式化的图像
包含一个小部件来定义图像的裁剪和焦点区域，为样式化的图像提供艺术指导

快速基本设置

默认情况下，ResponsiveImage组件应该可以最小配置即可运行。

步骤1：下载，启用组件并导入其服务和配置

使用composer下载

composer require irishdan/responsive-image-bundle

在内核中启用组件和OneupFlysystem

// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new IrishDan\ResponsiveImageBundle\ResponsiveImageBundle(),
        new Oneup\FlysystemBundle\OneupFlysystemBundle(),
    );
}

步骤2：导入其服务、默认配置和本地图像路由

导入响应式图像服务和默认文件系统配置。

imports:
    - { resource: "@ResponsiveImageBundle/Resources/config/services.yml" }
    - { resource: "@ResponsiveImageBundle/Resources/config/config.responsive_image_defaults.yml" }
    - { resource: "@ResponsiveImageBundle/Resources/config/config.responsive_image_filesystem.yml" }

导入本地即时图像生成的路由。

responsive_image:
    resource: "@ResponsiveImageBundle/Resources/config/routing.yml"
    prefix:   /

步骤3：安装组件和生成一个ResponsiveImage实体及其CRUD。

php bin/console responsive_image:generate:entity
php bin/console responsive_image:generate:crud

使用生成的图像实体和CRUD，现在可以创建和上传图像，并将'艺术指导'应用于图像。

步骤4：在您的配置文件中定义一些图像样式。（通常为config.yml）

responsive_image:
    image_styles:
        groovy_thumbnail_style:
            effect: crop
            width: 180
            height: 180
        groovy_thumbnail_style_base:
            effect: scale
            width: 240
        groovy_thumbnail_style_mobile:
            effect: scale
            height:480
        groovy_thumbnail_style_mobile:
            effect: crop
            width: 200
            height: 300
            greyscale: true

现在您可以在twig模板中如此渲染样式化的图像

   {{ styled_image(image, 'groovy_thumbnail_style') }}

步骤5：定义一些断点和"图片集"

breakpoints:
    base: 
        media_query: 'min-width: 0px'
    mobile: 
        media_query: 'min-width: 300px'
    desktop: 
        media_query: 'min-width: 1100px'
    groovey_picture_set:
        fallback: 'groovy_thumbnail_style'
        sources:
            base: groovy_thumbnail_style_base
            mobile: groovy_thumbnail_style_mobile
            desktop: groovy_thumbnail_style_desktop

现在您可以在twig模板中渲染响应式图像或渲染响应式背景图像CSS。

<head>
    {{ background_responsive_image(image, 'picture_set_name', '#header') }}
</head>
<body>
    {{ picture_image(image, 'groovey_picture_set') }}
</body>

步骤6：定义一些尺寸集

responsive_image:
    size_sets:
        blog_sizes:
            fallback: 'groovy_thumbnail_style_base'
            sizes:
                10vw:
                    breakpoint: 'mobile'
            srcsets: [ 'groovy_thumbnail_style_mobile', 'groovy_thumbnail_style_desktop' ]

现在您可以在twig模板中使用srcset和sizes属性渲染响应式图片了。更多关于响应式图片渲染的信息。

    {{ sizes_image(image, 'blog_sizes') }}

文档

归属

Intervention 是一个独立的PHP Imagine库，该库用于此bundle的图片转换。
OneupFlysystemBundle 是必需的，它使用了Flysystem 文件系统抽象库。
CropFocus艺术指导小部件的javascript是根据这个TutsPlus教程创建的。

irishdan / responsive-image-bundle

维护者

详细信息