paktdigital/focus-point-bundle

此包最新版本（1.0.3）没有提供许可证信息。

Symfony 插件用于 third774 的图像焦点，基于焦点点的图像裁剪。

维护者

详细信息

github.com/pakt-digital/FocusPointBundle

源代码

问题

安装: 589

依赖项: 0

建议者: 0

安全: 0

星级: 3

关注者: 3

分支: 1

开放问题: 16

类型:symfony-bundle

1.0.3 2021-07-07 14:12 UTC

Requires

Requires (Dev)

Suggests

Unknown License 8432902438f709d3cf8011c2f8baa43e1bae4eb7

  • Hugo Hulsebosch <hugo.hulsebosch.woop@wearejust.com>

This package is auto-updated.

Last update: 2024-09-06 08:42:11 UTC

README

Pakt.digital

FocusPointBundle

此 Symfony 插件提供了 liip/imagine-bundle 过滤器扩展、表单类型（使用 VichImageType）以及可选的 Twig 扩展，用于third774 的图像焦点。

需求

  • liip/imagine-bundle
  • vich/uploader-bundle

用法

图像实体

在你的图像实体中实现 ImageInterface

use PaktDigital\FocusPointBundle\Entity\ImageInterface;

class Image implements ImageInterface

并添加

/**
  * @ORM\Column(type="json_array")
  */
private $focusPoint = [];

public function getFocusPoint(): ?array
{
    return $this->focusPoint;
}

public function setFocusPoint(array $focusPoint): self
{
    $this->focusPoint = $focusPoint;

    return $this;
}

在 yaml 文件中配置 image_entity 以指定你的图像实体

paktdigital_focus_point:
    image_entity: '\App\Entity\Media\Image'

过滤器

你可以在 liip_image.yml 配置中将 paktdigital.focuspoint 添加到图像的过滤器以应用此过滤器

exampleImage:
    quality: 100
    filters:
        paktdigital.focuspoint:
            size: [500, 500]

字段类型

将 ImageFocusType 添加到你的表单中，并添加 css 类 js-focus-picker，例如在 EasyAdmin 中

Page:
    class: App\Entity\Page
    form:
        fields:
            - { property: 'image', type: 'PaktDigital\FocusPointBundle\Form\ImageFocusType', css_class: 'js-focus-picker' }
            - active
            - title
            - intro
            - active

并添加资产

assets:
    js:
    - '/bundles/paktdigitalfocuspoint/main.js'
    css:
    - '/bundles/paktdigitalfocuspoint/main.css'

在 Twig 中

Twig 过滤器扩展

<img src="{{ examplePage.image | paktdigital_focus('exampleImage') }}" />