包简介

A bundle for creating styled and responsive images for symfony projects

README 文档

README

Overview:

The ResponsiveImageBundle adds the ability to easily create styled and responsive images (scaled, cropped, greyscale) in Symfony3. Responsive images are generated as <picture> tags or as <mg> tags with sizes and scrset attributes.

A crop and focus area widget is also provided to ensure that cropped images always include the most important part of the image.

The bundle uses FlySystem filesystem abstraction layer giving you control over where images are stored. Events are used to drive the system, giving more flexibiltiy and the ability to implement queuing of intensive image processing.

Features

Image objects are stored via Doctrine ORM
Handles uploading images to a "FlySystem" filesystem
Images styles are defined in configuration.
Breakpoints and pictures sets are defined in configuration
Handles creation of styled images on the fly (as they are viewed) if using a local filesystem
Includes a widget to define an image's crop and focus areas giving art direction to styled images

Quick and basic setup

Out of the box, ResponsiveImage bundle should work with minimal configuration.

Step 1: Download, enable the bundle and import its services and configuration

Download with composer

composer require irishdan/responsive-image-bundle

Enable the bundle and OneupFlysystem in the kernel

// app/AppKernel.php

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

Step 2: Import its services, default configuration and the local image routing

Import responsive image services, default and filesystem configuration.

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" }

Import the routing for local on the fly image generation.

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

Step 3: Install the bundle and generate a ResponsiveImage entity and it's CRUD.

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

With the generated image entity and CRUD you can now, create and upload images, apply 'art direction' to images.

Step 4: Define some image styles in your configuration file. (Usually 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

You can now render a styled in your twig template like so:

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

Step 5: Define some breakpoints and "picture sets"

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

You can now render <picture> responsive images or render responsive background image css in twig templates

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

Step 6: Define some size sets

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

You can now render <img> responsive images width srcset and sizes attributes in twig templates.

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

Documentation

Attribution

Intervention is the standalone PHP Imagine Library is used by this bundle for image transformations
OneupFlysystemBundle which used Flysystem filesystem astraction library, is required by this bundle
The CropFocus art direction widget javascript was created by following this TutsPlus tutorial

irishdan/responsive-image-bundle 适用场景与选型建议

irishdan/responsive-image-bundle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 37 次下载、GitHub Stars 达 3，最近一次更新时间为 2017 年 06 月 02 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 irishdan/responsive-image-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 irishdan/responsive-image-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 irishdan/responsive-image-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

irishdan/responsive-image-bundle

包简介