English spoken conference
WARNING: You are browsing the documentation for version 1.1 which is not maintained anymore. If some of your projects are still using this version, consider upgrading.

Form Types

1.1 version
Maintained Unmaintained

Form Types

The MediaBundle provides a couple of useful form types along with form data transformers.

cmf_media_image

The cmf_media_image form maps to an object that implements the Symfony\Cmf\Bundle\MediaBundle\ImageInterface and provides a preview of the uploaded image.

If the LiipImagineBundle is used in your project, you can configure the imagine filter to use for the preview, as well as additional filters to remove from cache when the image is replaced. If the filter is not specified, it defaults to image_upload_thumbnail.

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    liip_imagine:
        # ...
        filter_sets:
            # define the filter to be used with the image preview
            image_upload_thumbnail:
                data_loader: cmf_media_doctrine_phpcr
                filters:
                    thumbnail: { size: [100, 100], mode: outbound }
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    <?xml version="1.0" encoding="UTF-8" ?>
    <container xmlns="http://symfony.com/schema/dic/services">
    
        <config xmlns="http://example.org/schema/dic/liip_imagine">
    
            <!-- define the filter to be used with the image preview -->
            <filter-set name="image_upload_thumbnail"
                data-loader="cmf_media_doctrine_phpcr">
    
                <filter name="thumbnail"
                    size="100, 100"
                    mode="outbound"
                />
            </filter-set>
        </config>
    </container>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    $container->loadFromExtension('liip_imagine', array(
        // ...
    
        'filter_sets' => array(
            // define the filter to be used with the image preview
            'image_upload_thumbnail' => array(
                'data_loader' => 'cmf_media_doctrine_phpcr',
                'filters' => array(
                    'thumbnail' => array(
                        'size' => array(100, 100),
                        'mode' => 'outbound',
                    ),
                ),
            ),
        ),
    ));
    

Then you can add images to document forms as follows:

1
2
3
4
5
6
7
8
use Symfony\Component\Form\FormBuilderInterface;

protected function configureFormFields(FormBuilderInterface $formBuilder)
{
     $formBuilder
        ->add('image', 'cmf_media_image', array('required' => false))
     ;
}

Tip

If you set required to true for the image, the user must re-upload a new image each time they edit the form. If the document must have an image, it makes sense to require the field when creating a new document, but make it optional when editing an existing document. We are trying to make this automatic.

Next you will need to add the fields.html.twig template from the MediaBundle to the form.resources, to actually see the preview of the uploaded image in the backend:

  • YAML
    1
    2
    3
    4
    twig:
        form:
            resources:
                - 'CmfMediaBundle:Form:fields.html.twig'
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    <?xml version="1.0" encoding="UTF-8" ?>
    <container xmlns="http://symfony.com/schema/dic/services">
    
        <config xmlns="http://symfony.com/schem/dic/twig">
    
            <form>
                <resource>CmfMediaBundle:Form:fields.html.twig</resource>
            </form>
        </config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    $container->loadFromExtension('twig', array(
        'form' => array(
            'resources' => array(
                'CmfMediaBundle:Form:fields.html.twig',
            ),
        ),
    ));
    

The document that should contain the Image document has to implement a setter method. To profit from the automatic guesser of the form layer, the name in the form element and this method name have to match. See ImagineBlock::setImage for an example implementation.

To delete an image, you need to delete the document containing the image. (There is a proposal to improve the user experience for that in a MediaBundle issue.)

Note

There is a Doctrine listener to invalidate the imagine cache for the filters you specified. This listener will only operate when an Image is changed in a web request, but not when a CLI command changes images. When changing images with commands, you should handle cache invalidation in the command or manually remove the imagine cache afterwards.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.