Показывать миниатюры вместо имени img с помощью Symfony2 formbuilder

Question

Я делаю форму, которая позволяет пользователю выбрать изображение.

Symfony2.8 с сонатой MediaBundle/

$form = $this->createFormBuilder($form)
    ->add('media',EntityType::class,array(
            'expanded' => true,
            'class' => "Application\Sonata\MediaBundle\Entity\Media"
            }))
    ->add('save', SubmitType::class, array('label' => 'Create Post'))
    ->getForm();

в ветке

{{form_widget(form.media)}}

Однако он показывает переключатели только с именем img.

○ AAA.jpg ○ BBB.jpg ○ CCC.jpg ○ DDD.jpg ("○" - переключатель)

Это не хороший дизайн для пользователей.

Я хочу показать эскиз imgs здесь.

Есть ли хороший способ сделать это?

Answer 1

Самый простой способ, который я могу себе представить, - это проверить переключатель с помощью javascript.

Ваш контроллер:

//src/AppBundle/Controller/YourController.php

public function yourAction()
{
    $em = $this->getDoctrine()->getManager();

    $medias = $em->getRepository('AppBundle:Media')->findAll();

    $entity = new YourEntity();

    $form = $this->createForm(YourEntityType::class, $entity);

    if ($form->isSubmitted() && $form->isValid()) {
        //... your logic
    }

    return $this->render('AppBundle::template.html.twig', array(
        'form' => $form->createView(),
        'medias' => $medias
    ));
}

Тогда в вашем файле ветки

{% for media in medias %}
    <img class="to-select" src="{{ media.pathToThumbnail }}" data-id="{{ media.id }}" />
{% endfor %}

{{ form_start(form) }}
    <!-- assuming you are using bootstrap -->
    <div class="hidden">{{ form_widget(form.media) }}</div>
    {{ form_widget(form.submit) }}
{{ form_end(form) }}

{% block javascripts %}
    <script>
        //assuming you use jquery
        $('.to-select').click(function () {
            var id = '#form_name_media_' + $(this).data('id');
            var media = $(id);

            if (media.is(':checked')) {
                media.prop('checked', false);
            } else {
                media.prop('checked', true);
            }
        });
    </script>
{% endblock javascripts %}