[SonataAdminBundle] Preview an image on form mapper field

[David Romaní]

Hello again,

I need to show an image on form field when I update an instance of Product class. I'm using VichUploaderBundle with SonataAdminBundle, I'm not using SonataMediaBundle. I have the Product class like this:

/**
 * @ORM\Entity
 * @ORM\Table(name="flux_product")
 * @ORM\Entity(repositoryClass="Flux\ProductBundle\Repository\ProductRepository")
 * @ORM\HasLifecycleCallbacks
 * @Gedmo\TranslationEntity(class="Flux\ProductBundle\Entity\Translation\ProductTranslation")
 * @Vich\Uploadable
 */
class Product
{
     /**
     * @ORM\Id
     * @ORM\Column(type="integer")
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;
    /**
     * @ORM\Column(type="string", length=20, unique=true)
     * @Assert\NotBlank()
     */
    protected $code;
    /**
     * @Assert\File(
     *     maxSize="3M",
     *     mimeTypes={"image/png", "image/jpeg", "image/pjpeg"}
     * )
     * @Vich\UploadableField(mapping="vins", fileNameProperty="image1")
     */
    protected $image1File;
    /**
     * @ORM\Column(type="string", length=255, nullable=true)
     */
    protected $image1;
}

And then, inside ProductAdmin I have:

protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('code', 'text', array('label' => 'Code'))
            ->add('image1File', 'file', array('label' => 'Image file', 'required' => false))
            ->add('image1', null, array('label' => 'Image', 'required' => false, 'read_only' => true))
}

How can I override the image1 view (or twig template) to show a thumbnail or preview image?

Thanks a lot.

[Cassiano Tartari]

I think you gonna have to override the action of preview in your controller to set your own twig file.

Or set a route, than create an action in your controller, in this case, for example:

    protected function configureRoutes(RouteCollection $collection) {
        $collection->add('imageView', $this->getRouterIdParameter() . '/image-view');
    }

    protected function configureListFields(ListMapper $listMapper) {
          $listMapper
                ->add('_action', 'actions', array(
                    'label' => 'Ações',
                    'actions' => array(
                        'imageView' => array('template' => 'ApplicationSonataAdminBundle:CRUD:list__action_image_view.html.twig'),
                    )
                ))
        ;
    }

And than create the imageViewAction() in your controller.

Cassiano Valle Tartari
MSc. Computer Engineer

Tel: +55.48.84474818
Email: fal...@cassianotartari.eng.br
Site: http://www.cassianotartari.eng.br

--
You received this message because you are subscribed to the Google Groups "sonata-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sonata-users...@googlegroups.com.
To post to this group, send email to sonata...@googlegroups.com.
Visit this group at http://groups.google.com/group/sonata-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[David Romaní]

You are setting this inside the configureListFields functions which you can set an action option, but I need to add the option inside the configureFormFields function.

I want that the user can see the thumbnail when he is updating a record (form).

 
 

[Cassiano Tartari]

Ok, so better override the twig template and add a js.

Cassiano Valle Tartari
MSc. Computer Engineer

Tel: +55.48.84474818
Email: fal...@cassianotartari.eng.br
Site: http://www.cassianotartari.eng.br

On Fri, Apr 5, 2013 at 5:16 AM, David Romaní <romani...@gmail.com> wrote:

You are setting this inside the configureListFields functions which you can set an action option, but I need to add the option inside the configureFormFields function.

I want that the user can see the thumbnail when he is updating a record (form).

 
 

[David Romaní]

Can you tell me which and where is the twig template, sorry I'm new with Sonata and I'm still a bit confused for now.

Thank you.

[Cassiano Tartari]

You should override the methods of the controller createAction and editAction to add your personal twig template, the original one is SonataAdminBundle:CRUD:edit.html.twig, it is easy to know, just open the CRUD controller and see the methods.

Cassiano Valle Tartari
MSc. Computer Engineer

Tel: +55.48.84474818
Email: fal...@cassianotartari.eng.br
Site: http://www.cassianotartari.eng.br

[David Romaní]

Hello,

Finally I make this approach, tell me if you can improve it.

1 · override ONLY edit method (when create there is no image to show) inside my PageBundle/Controller/PageAdminController to return my custom twig template

return $this->render('FluxPageBundle:Admin:edit.html.twig', array(
            'action' => 'edit',
            'form'   => $view,
            'object' => $object,
        ));

2 · FluxPageBundle:Admin:edit.html.twig extends my custom FluxPageBundle:Admin:base_edit.html.twig

3 · FluxPageBundle:Admin:base_edit.html.twig use FluxPageBundle:Admin:base_edit_form.html.twig

4 · inside FluxPageBundle:Admin:base_edit_form.html.twig I put:

                                     {% for field_name in form_group.fields %}
                                        {% if admin.formfielddescriptions[field_name] is defined %}
                                            {{ form_row(form[field_name])}}
                                            {# CUSTOM IMAGE PREVIEW FIELDS #}
                                            {% if field_name == 'image1' and object.image1 %}
                                                <div class="control-group">
                                                    <label class="control-label"></label>
                                                    <div class="controls">
                                                        <img src="{{ vich_uploader_asset(object, 'image1File') | imagine_filter('imatge50x50') }}" alt="">
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {# END CUSTOM IMAGE PREVIEW FIELDS #}
                                        {% endif %}
                                    {% endfor %}

I compare all the field names every time to make a decision where puts the img preview, 

Thanks.

[Cassiano Tartari]

Yeah David!

I think that's it! There is no such lost of processing doing this little if, so if it is working, good! If somebody do this job in another way I want to know too!

I just don't really get the inheritance that you made in your twig files.

Cassiano Valle Tartari
MSc. Computer Engineer

Tel: +55.48.84474818
Email: fal...@cassianotartari.eng.br
Site: http://www.cassianotartari.eng.br

--

[Jakala]

Hello:

i Think this is a bad way. You can change the template directly in your admin. You can override the configure method like this:

public function configure(){

    $this->setTemplate('edit', 'yourbundle:yourCrudFolder:Yourtemplate.html.twig');

}

now, your edit action goes to your defined template, and you don't need to change your controller...

Perhaps this is more simple, but i think the correct way is to define a new form type... See http://symfony.com/doc/2.0/cookbook/form/create_custom_field_type.html

[David Romaní]

Thanks Jakala,

I understand that the configure method is more efficient, thanks for your contribution. However I don't understand how to create a new form type and pass it to the custom template, an example would be appreciated.