README

此仓库是我们所说的“子树拆分”：主仓库中一个目录的只读副本。Composer使用它允许开发者依赖于特定的包。

如果您想报告或贡献，请在主仓库中打开问题： https://github.com/Novactive/Nova-eZPlatform-Bundles

文档通过此仓库中的.md文件提供，也在此打包： https://novactive.github.io/Nova-eZPlatform-Bundles/master/EnhancedImageAssetBundle/README.md.html

提供增强图像管理的相关新字段类型的eZPlatform包

功能

管理员UI中的焦点点管理
默认图像配置以优化文件大小
懒加载和渐进式加载
Retina变体
WebP变体
Twig渲染字段参数

安装

使用Composer

在您的composer.json中添加NovaeZEnhancedImageAssetBundle

composer require novactive/ezenhancedimageassetbundle

注册包

在应用程序的Kernel类中注册包

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        // ...
        new Novactive\EzEnhancedImageAssetBundle\EzEnhancedImageAssetBundle(),
        // ...
    );
}

功能

1. 焦点点

此包提供一个名为enhancedimage的新字段类型，它扩展了ezimage字段类型。此字段类型允许用户在上传的图像上选择焦点点。然后可以根据选定的焦点点创建变体。

查看演示

2. 默认图像配置

添加到siteaccess感知参数，允许定义在生成图像别名时使用的默认后处理程序和配置

parameters:
  ez_enhanced_image_asset.default.image_default_post_processors: 
    pngquant:
        quality: '40-85'
    jpegoptim:
        strip_all: true
        max: 70
        progressive: true
  ez_enhanced_image_asset.default.image_default_config: 
    animated: true
    quality: 80

3. 懒加载

懒加载由以下设置全局控制（默认为true），并且可以在字段级别进行覆盖。

parameters: 
  ez_enhanced_image_asset.default.enable_lazy_load: true

4. Retina变体

带有_retina后缀的Retina变体将在使用提供的字段模板时自动使用（如果启用）。为了显示，生成的变体宽度应为默认变体宽度的两倍。

考虑一个名为my_alias的变体，将使用名为my_alias_retina的变体并在Retina屏幕上显示。

 - { name: my_alias, params: {size: [<width>, <height>], focus: [0, 0]} }
 - { name: my_alias_retina, params: {size: [<width*2>, <height*2>], focus: [0, 0]} }

自动使用Retina变体的设置由这个设置控制

parameters: 
  ez_enhanced_image_asset.default.enable_retina: true

5. WebP变体

为每个现有变体自动创建WebP变体，然后自动将其作为替代源添加。

6. Twig渲染字段参数

现在可以指定alternativeAlias参数来根据屏幕大小定义替代图像别名

{{ ibexa_render_field(content, fieldIdentifier, {
    parameters: {
        alias: 'desktop_alias',
        alternativeAlias: [
            {
                alias: 'mobile_alias',
                media: '(max-width: 320px)'
            }
        ],
        lazyLoad: true|false, // optionnal
        retina: true|false // optionnal
    }
}) }}

变体配置

焦点变体需要使用“focusedThumbnail”过滤器来生成基于贡献的焦点点的缩略图。

 - { name: focusedThumbnail, params: {size: [<width>, <height>], focus: [0, 0]} }

注意：根据贡献自动更新每个图像的focus参数

迁移现有ezimage字段

由于新的enhancedimage字段类型是ezimage字段类型的扩展，因此您只需要更新您想要的字段的数据类型字符串列。

示例

UPDATE ezcontentclass_attribute ca
INNER JOIN ezcontentclass c ON c.id = ca.contentclass_id
SET data_type_string = "enhancedimage"
WHERE ca.data_type_string = "ezimage" AND c.identifier="my_content_type" AND ca.identifier="my_field_identifier";

UPDATE ezcontentobject_attribute oa
INNER JOIN ezcontentclass_attribute ca ON oa.contentclassattribute_id = ca.id
SET oa.data_type_string = "enhancedimage"
WHERE oa.data_type_string = "ezimage" AND ca.data_type_string="enhancedimage";

用法

某些功能将需要以下资源

{{ encore_entry_link_tags('enhancedimage-css', null, 'ibexa') }}

{{ encore_entry_script_tags('enhancedimage-js', null, 'ibexa') }}

novactive / ezenhancedimageassetbundle

维护者

详细信息