README

此插件提供了一些 Twig 函数和过滤器，以便在 Craft CMS 模板中使用 FocalPoint。当图片的重要部分不在中心时，它在响应式设计中的背景定位非常有用。

（这是我第一个 Craft CMS 插件，为了学习 Craft 插件开发的一些基础知识。除此之外，我只需要 Twig 函数 :)

要求

此插件需要 Craft CMS 3.0.0-beta.1 或更高版本。

安装

要安装此插件，请按照以下说明操作。

1. 在终端中转到您的 Craft 项目

    cd /path/to/project
   

2. 通过 composer 安装插件

    composer require mfeinbier/craft3-fp-backgrounds
   

3. 在控制面板中，转到设置 → 插件，然后点击 FocalPoint backgrounds 的“安装”按钮。

用法

使用 Craft 中为图片设置的 FocalPoint，对于较小的屏幕尺寸，可以将标记的区域始终保持在屏幕中心。当 图片的重要部分不在中心时，这特别有用。

想象一下，您在模板中有一个全屏背景图片，它在 CSS 中的定义如下

.fullpage-bg {
    background: #BADA55 url("images/fallback-background") no-repeat 50% 50%;
    background-size: cover;
}

将 background-size 设置为 cover 对于自动填充整个 div 以适用于所有屏幕尺寸非常重要。

现在，在您的 Craft 模板中，您想使用一个链接资产来填充背景，并使用此插件提供的新功能来定位您的图片

{% set image = entry.backgroundImage[0] ?? null %} // or whatever you use to get the image
    <div class="fullpage-bg"
         {%- if image -%}
            style="background-image: url('{{ image.url }}');
                   {{ renderBackgroundPosition(image) }}"
        {%- endif -%}>
    </div>

这将输出基于 FocalPoint 的正确 CSS 定位设置

    <div class="fullpage-bg"style="background-image: url('/slider-images/slider-04.jpg');
                                   background-position-x: 65.29%; background-position-y: 29.66%;">
    </div>

如果您需要更多地控制 x 或 y 位置，可以使用 |focalXPosition 和 |focalYPosition 过滤器

<div class="fullpage-bg"
         {%- if image -%}
            style="background-image: url('{{ image.url }}');
                   background-position-x: {{ image|focalXPosition }}";
                   background-position-y: {{ image|focalYPosition }}";
        {%- endif -%}>
    </div>