README

Contao Image Alternatives

此扩展扩展了在 Contao 中使用具有艺术指导的响应式图片的功能。您将有机会定义一组替代图片，然后可以在文件管理器中为每个图片定义相应的替代图片。

假设您希望根据输出设备使用不同尺寸的图片，例如为桌面、平板电脑和手机分别使用特定的图片。您可以定义一组名为 mobile 和 tablet 的替代图片集（桌面将作为后备 - 原始图片）

# config/config.yaml
contao_image_alternatives:
    alternatives:
        - tablet
        - mobile

现在您可以在 Contao 的文件管理器中分别选择每张图片的替代图片

可以通过 image_alternatives 翻译区域翻译每个替代图片的后端标签

# translations/image_alternatives.en.yaml
tablet: Tablet
mobile: Mobile

在您的图片尺寸设置中，您可以针对每个媒体查询项选择是否为此特定图片尺寸选择替代图片

或者您也可以通过 contao_image_alternatives.sizes.*.items 在配置中设置替代图片。请注意，尺寸的名称必须与 contao.image.sizes 中的名称相同，并且每个项的媒体查询必须与 contao.image.sizes.*.items 中的媒体查询匹配

# config/config.yaml
contao_image_alternatives:
    alternatives:
        - tablet
        - mobile
    sizes:
        example:
            items:
                -
                    media: '(max-width: 480px)'
                    alternative: mobile
                -
                    media: '(max-width: 800px)'
                    alternative: tablet

当您在选择内容元素或模块中的配置图片尺寸时，生成的图片将自动使用每个源图片的替代版本，以符合特定的图片尺寸媒体查询项。

替代重要部分

也可以为每个替代图片设置不同的重要部分。当在文件管理器中编辑图片时，顶部将有一个 重要部分替代 选择，您可以通过它来切换不同的重要部分。例如，如果您已为图片设置了默认的重要部分，以及为 mobile 替代设置了重要部分，那么后者将用于您的 mobile 媒体查询图片尺寸项（如果已配置），否则使用默认设置。这允许您在同一图片中对不同输出设备裁剪到不同的部分。

预裁剪

还可以在根据缩放设置缩放图片之前，将图片预裁剪到重要部分。这允许您为某些图片尺寸裁剪到重要部分，而其他情况下仅缩放至特定宽度或高度。此设置可以在数据库中针对每个图片尺寸设置，也可以通过包配置设置

# config/config.yaml
contao_image_alternatives:
    sizes:
        example:
            pre_crop: true