Как в symfony2 в формах сделать images checkbox?

Question

[Никита Рощенко]

Добрый день, у меня в проекте на Symfony2, есть Entity Photo

И есть форма для добавления фоторгафий в альбом из уже существующих у пользователя. Мне бы хотелось что бы в форме возможные фотографии для добавления отображались не как dropdown, а как обычные фотографии <img src=""/>. И из превью уже можно было бы выбирать что добавлять в альбом. Можете подсказать вариант как это можно реализовать?

Гугл к сожелению внятного ничего не дал, на Symfony пишу впервые, так что простите если задаю глупый вопрос)

Код CreateAlbumType:

class CreateAlbumType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('date', 'datetime', [
                'widget' => 'single_text'
            ])
            ->add('text', 'textarea', [
                'attr' => [
                    'rows' => 5,
                    'style' => 'min-width: 300px;',
                ],
            ])
            ->add('photos', 'entity', array(
                'class' => 'Flugo\PhotosBundle\Entity\Photo',
                'label' => 'Photos',
                'multiple' => true,
            ))
        ;
    }
    
    /**
     * @param OptionsResolverInterface $resolver
     */
    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'Flugo\AlbumBundle\Entity\CreateAlbum'
        ));
    }

    /**
     * @return string
     */
    public function getName()
    {
        return 'flugo_albumbundle_post';
    }
}

Отображение формы:

{% block body -%}
    <h1>Album creation</h1>

    {{ form(form) }}
{% endblock %}

И фотографии отображаются в selecte:


А мне хотелось бы наподобии такого:

Comments

[tasce]

А что вы делаете? Приложите файл шаблона, где выводится форма.

[Никита Рощенко]

tasce: добавил более подробное описание в вопрос)

Answer 1

[Никита Рощенко]

Нашел решение проблемы сам. Все оказалось просто, нам нужно что бы EntityType отображался как CheckboxList. Для этого выставляет параметры multiple и expanded в true. Далее в лейбле чекбокса выводим html тег img с прописанным атрибутом scr. Сам чекбокс скрываем, а на картинки через js вешаем обработчики событий.

Вот что получилось:


Вот код (я его вынес из формы в контроллер, что бы ограничить choices фотографиями пользователя):

$form->add('photos', 'entity', array(
            'class'    => 'Flugo\PhotosBundle\Entity\Photo',
            'multiple' => true,
            'expanded' => true,
            'choices'  => $user->getPhotos(),
            'attr'     => [
                'class' => 'photos-checkbox '
            ],
            'choice_label' => function($choice, $currentChoiceKey) {
                return sprintf('<img src="%s">',  $choice->getPhoto130());
            },
            'choice_attr' => ['class' => 'hidden'],
        ));

Comments

[BoShurik]

В вашем случае тип 'entity' избыточен, т.к. 'choices' вы задаете ручками. Ограничение результатов в таком случае нужно делать через опцию 'query_builder'.
Интересное решение с лейблом, но для более сложной кастомизации - придется все-таки переопределять виджет.

Answer 2

[BoShurik]

StackOverflow
Вам надо переопределить виджет для поля photos