如何在Statamic Antlers中获取图片焦点X/Y坐标（无需插件）

我开发的网站基于Statamic CMS（Antlers模板）、Tailwind.css和AlpineJS，其中一个页面的replicator字段区域展示标题、描述和数量可变的图片，图片已经实现指定的动态网格布局。当前问题是图片裁剪默认以中心为焦点，但我已在CMS中手动设置每张图片的焦点，希望不添加插件的情况下提取这些焦点的X和Y坐标，项目已引入AlpineJS可用于实现方案。

现有代码 #

模板代码 #

{{ elements sort="order" }}
<div>
    <h2 class="text-white text-4xl lg:text-6xl font-bold text-left my-4">{{ title }}</h2>
    <div class="max-w-[1100px] text-white text-lg lg:text-2xl font-normal">
        {{ description }}
    </div>
    <div class="case__gallery flex flex-wrap my-8">
        {{ images }}
            <div class="p-4 flex-auto image-container">
                <img src="{{ url }}" alt="{{ alt }}" class="object-cover object-center w-full h-full">
            </div>
        {{ /images }}
    </div>
</div>
{{ /elements }}

额外CSS #

@media (min-width: 768px) { 
    .case__gallery {
        .image-container {
            @apply w-full;
        }
        .image-container:nth-of-type(5n+1), 
        .image-container:nth-of-type(5n+5) { 
           @apply w-2/3;
        }
        
        .image-container:nth-of-type(5n+2), 
        .image-container:nth-of-type(5n+4) { 
           @apply w-1/3;
        }
        .image-container:nth-of-type(5n+3) { 
           @apply w-full;
        }
    }
}

已尝试的代码 #

{{ elements sort="order" }}
<div>
    <h2 class="text-white text-4xl lg:text-6xl font-bold text-left my-4 px-5 lg:px-0">{{ title }}</h2>
    <div class="max-w-[1100px] text-white text-lg lg:text-2xl font-normal">
        {{ description }}
    </div>
    <div class="case__gallery flex flex-row flex-wrap my-8">
        {{ images }}
            <div class="p-4 image-container"> <!-- 额外的DIV容器 -->
                <img class="w-full" src="{{ glide:url fit='crop_focal' }}" alt="{{ alt }}"> <!-- 移除img标签的内边距样式 -->
            </div>
        {{ /images }}
    </div>
</div>
{{ /elements }}

解决方案 #

Statamic的图片字段内置存储了焦点坐标，可通过{{ focal_point }}变量直接访问，返回格式为X-Y的百分比字符串（例如30-70代表X轴30%、Y轴70%）。结合AlpineJS可以解析该值并动态设置object-position样式，替代默认的object-center，实现按CMS设置的焦点裁剪：

修改后的模板代码 #

{{ elements sort="order" }}
<div>
    <h2 class="text-white text-4xl lg:text-6xl font-bold text-left my-4">{{ title }}</h2>
    <div class="max-w-[1100px] text-white text-lg lg:text-2xl font-normal">
        {{ description }}
    </div>
    <div class="case__gallery flex flex-wrap my-8">
        {{ images }}
            <div class="p-4 flex-auto image-container">
                <img 
                    src="{{ url }}" 
                    alt="{{ alt }}" 
                    class="object-cover w-full h-full"
                    x-data="{ focal: '{{ focal_point ?: '50-50' }}' }"
                    :style="{ 'object-position': `${focal.split('-')[0]}% ${focal.split('-')[1]}%` }"
                >
            </div>
        {{ /images }}
    </div>
</div>
{{ /elements }}

关键说明 #

• {{ focal_point }}：Statamic原生变量，直接读取CMS中设置的图片焦点坐标，未设置焦点时用?: '50-50'默认值保持中心裁剪。
• AlpineJS的x-data：将焦点坐标字符串传入组件数据。
• 动态style绑定：通过split('-')拆分坐标字符串，转换为object-position的百分比值，让图片按设置的焦点区域裁剪，完全适配现有动态网格布局。

这种方案无需额外插件，利用Statamic内置变量和AlpineJS的动态样式绑定即可实现需求，避免通过Glide生成裁剪图片的方式破坏原有布局逻辑。

内容的提问来源于stack exchange，提问作者Kuba