使用 Symfony2 formbuilder 显示缩略图而不是 img 的名称

Question

我正在制作允许用户 select 图片的表格。

Symfony2.8 与 sonataMediaBundle/

$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 %}

使用 Symfony2 formbuilder 显示缩略图而不是 img 的名称

Show the thumbnails instead of the name of img with Symfony2 formbuilder

symfony

twig

sonata-media-bundle

sonata