使用Symfony2表单生成器显示缩略图而不是img的名称

Question

我正在制作允许用户选择img的表单。

Symfony2.8 with sonataMediaBundle/

$form = $this->createFormBuilder($form)
    ->add('media',EntityType::class,array(
            'expanded' => true,
            'class' => "ApplicationSonataMediaBundleEntityMedia"
            }))
    ->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 %}