Working with images

Widestand ofrece la posibilidad de trabajar con imágenes, permitiendo asociar imágenes a las entidades, generar recortes y rendiciones para dichas imágenes, y atajos para utilizarlas en el sitio web.

Añadir la imagen a la entidad

Lo primero que se debe hacer es añadir un campo imagen en la entidad, junto con los setters y getters. La imagen se añade como una relación con la entidad WS\Core\Entity\AssetImage de WS.

Para este ejemplo usaremos la entidad Job.

class Job 
{

    #[ORM\ManyToOne(targetEntity: AssetImage::class)]
    #[ORM\JoinColumn(name: 'job_image', referencedColumnName: 'image_id', nullable: true)]
    private ?AssetImage $image = null;

    public function getImage(): ?\WS\Core\Entity\AssetImage
    {
        return $this->image;
    }

    public function setImage(?\WS\Core\Entity\AssetImage $image): self
    {
        $this->image = $image;

        return $this;
    }

}

Definir los tamaños de la imagen

El paso siguiente es indicar los recortes de la imagen que se desea obtener.

Para esto, se debe indicar al servicio que gestiona la entidad que implemente la interfaz WS\Core\Library\Asset\ImageRenditionInterface. Esta interfaz requiere que se implemente el método getRenditionDefinitions().

En este método debemos indicar los recortes que deseamos generar, devolviendo un array de objetos WS\Core\Library\Asset\RenditionDefinition

Siguiendo el ejemplo con la entidad Job, generaremos un recorte de 300x300 para utilizar como thumbnail en el CMS, y uno horizontal de 600x400 para utilizar en el frontend.

use WS\Core\Library\CRUD\AbstractService;
use WS\Core\Library\Asset\ImageRenditionInterface;
use WS\Core\Library\Asset\RenditionDefinition;

class JobService extends AbstractService implements ImageRenditionInterface
{
    public function getRenditionDefinitions() : array
    {
        return [
            new RenditionDefinition(App\Entity\Job::class, 'image', 'thumb', 300, 300, RenditionDefinition::METHOD_THUMB, ['150x150']),
            new RenditionDefinition(App\Entity\Job::class, 'image', 'horizontal', 600, 300, RenditionDefinition::METHOD_CROP, ['200x150']),
        ];
    }

Los objetos RenditionDefinition debemos crearlos indicando lo siguiente:

• La clase a la que pertenece la imagen
• El campo de imagen al que aplica el recorte
• Un nombre para identificar el recorte
• Ancho mínimo permitido para la imagen
• Alto mínimo permitido para la imagen
• El método de recorte (RenditionDefinition::METHOD_CROP o RenditionDefinition::METHOD_THUMB)
• Un array de rendiciones que se requieran generar a partir de la indicada.

Mostrar en el formulario

Para poder subir la nueva imagen, es necesario añadirla al formulario de la entidad. WS ofrece un widget muy funcional para realizar esto.

use WS\Core\Library\Asset\Form\AssetImageType;
use use Symfony\Component\Form\AbstractType;

class JobType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('image', AssetImageType::class, [
                'label' => 'Imagen',
                'required' => false,
                'ws' => [
                    'entity' => $builder->getData(),
                    'display-mode' => AssetImageType::ASSET_IMAGE_DISPLAY_MODE_LIST
                ],
                'attr' => [
                    'id' => 'job_image',
                ]
            ])

Utilizar las imágenes en la vista

WS también ofrece funcionalidades para mostrar las imágenes generadas y sus recortes. La función de twig asset_get_image permite mostrar la ruta a la imagen creada, o a sus recortes.

<img src="{{ asset_get_image(job.image, 'horizontal', '200x150') }}">