paktdigital/focus-point-bundle

There is no license information available for the latest version (1.0.3) of this package.

Symfony bundle for third774's image focus, for image cropping based on a focus point.

1.0.3 2021-07-07 14:12 UTC

Requires

• php: ^8.0
• liip/imagine-bundle: ^2.0
• symfony/asset: ^5.0
• symfony/config: ^5.0
• symfony/dependency-injection: ^5.0
• symfony/form: ^5.0
• symfony/options-resolver: ^5.0
• vich/uploader-bundle: ^1.16

Requires (Dev)

• friendsofphp/php-cs-fixer: ^2.16
• phpstan/phpstan: 0.12.*

Suggests

• symfony/twig-bundle: Allows usage of the focus point Twig extension.

Unknown License

• Hugo Hulsebosch

README

Pakt.digital

FocusPointBundle

This Symfony bundle provides an liip/imagine-bundle filter extension, a form type (using VichImageType) and an optional Twig extension for third774's image focus.

Requires:

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

Usage

Image entity

Implement ImageInterface in the entity you use for your images

use PaktDigital\FocusPointBundle\Entity\ImageInterface;

class Image implements ImageInterface

and add

/**
  * @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;
}

Configure image_entity in the yaml file with your image entity

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

The filter

You can apply the filter to an image by adding paktdigital.focuspoint to the image's filters in the liip_image.yml configuration

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

Field type

Add ImageFocusType to your form and add the css class js-focus-picker, e.g. in EasyAdmin

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

and add the assets

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

In Twig

Twig filter extension

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