How to add html to the form field. Symfony2 - image

Question

How add html element to the form field. How? The reasoning below is wrong, because it outputs my div in the "input" field, instead of inserting pure html between form fields. I want instead of input, to display html code, which would load images. I mean i have ManyToMany relation between images and users. When i have data transformer, which generates strings:
"<img src=\"{{ asset( 'bundles/meeting/images/uploads/".$img->getPath()."') }}\" height=\"200\" />". I would like to insert these strings between User form fields, which should finally display images.
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Entity\User.php
/**
* User
*
* #ORM\Table(name="tuser")
* #ORM\Entity()
*/
class User implements AdvancedUserInterface, \Serializable
...
/**
* #ORM\ManyToMany(targetEntity="\MeetingBundle\Entity\Image")
* #ORM\JoinTable(name="tUserImgUni",
* joinColumns={#ORM\JoinColumn(name="user_id", referencedColumnName="id")},
* inverseJoinColumns={#ORM\JoinColumn(name="image_id", referencedColumnName="id")}
* )
*/
private $imgsuni;
....
/**
* Constructor
*/
public function __construct()
{
$this->imgsuni = new ArrayCollection();
}
...
/**
* Add imgsuni
*
* #param \MeetingBundle\Entity\Image $imgsuni
*
* #return User
*/
public function addImgsuni(\MeetingBundle\Entity\Image $image)
{
$this->imgsuni[] = $image;
return $this;
}
....
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Entity\Image.php
/**
* #ORM\Entity
* #ORM\HasLifecycleCallbacks
*/
class Image
{
/**
* #ORM\Id
* #ORM\Column(type="integer")
* #ORM\GeneratedValue(strategy="AUTO")
*/
public $id;
/**
* #ORM\Column(type="string", length=255, nullable=true)
*/
public $path;
...
/**
* Get path
*
* #return string
*/
public function getPath()
{
return $this->path;
}
..
/**
* Called after entity persistence
*
* #ORM\PostPersist()
* #ORM\PostUpdate()
*/
public function upload()
{
if (null === $this->file) {
return;
}
$this->file->move(
'C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\web\bundles\meeting\images\uploads',
$this->path
);
$this->file = null;
}
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Form\UserType.php
...
use MeetingBundle\Form\DataTransformer\ImageDataTransformer;
class UserType extends AbstractType
{
/**
* #param FormBuilderInterface $builder
* #param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$em = $options['em'];
$trans = new ImageDataTransformer($em);
$builder
->add('username')
->add(
$builder
->create('imgsuni', 'text')
->addModelTransformer($trans)
)
...
/**
* #param OptionsResolverInterface $resolver
*/
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'MeetingBundle\Entity\User'
))
->setRequired(['em'])
->setAllowedTypes('em', 'Doctrine\ORM\EntityManager')
;
}
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Form\DataTransformer\ImageDataTransformer.php
<?php
namespace MeetingBundle\Form\DataTransformer;
use MeetingBundle\Entity\Image;
use Doctrine\ORM\EntityManager;
use Symfony\Component\Form\DataTransformerInterface;
class ImageDataTransformer implements DataTransformerInterface
{
/**
* #var EntityManager
*/
private $em;
/**
* #param EntityManager $em
*/
public function __construct(EntityManager $em)
{
$this->em = $em;
}
/**
* Transforms an objects (Tags) to a string.
*/
public function transform($imgs)
{
if (null === $imgs) {
return "";
}
$output = [];
foreach ($imgs as $img) {
$output[] =
"<img src=\"{{ asset( 'bundles/meeting/images/uploads/".$img->getPath()."') }}\" height=\"200\" />"
;
}
return join(', ', $output);
}
}
For instance i have user with id=21 and image id=1.
My transformer generates string:
<img src="{{ asset( 'bundles/meeting/images/uploads/a4d7fb6b1282815d41e2015bfe6b3334f0833063.png') }}" height="200" />
i want that this string would be inserted as html code instead of beeing displayed in input of the form.
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Controller\UserController.php
/**
* Displays a form to edit an existing User entity.
*
* #Route("/{id}/edit", name="user_edit")
* #Method({"GET", "POST"})
*/
public function editAction(Request $request, User $user)
{
$em = $this->getDoctrine()->getManager();
$deleteForm = $this->createDeleteForm($user);
$editForm = $this->createForm(new UserType(), $user, ['em' => $em ]);
$editForm->add('submit', 'submit', array(
'label' => 'Update details',
));
$image = new Image();
$imageForm=$this->createForm(new ImageType(), $image);
$imageForm->add('submit', 'submit', array('label' => 'Upload image'));
$editForm->handleRequest($request);
if ($editForm->isSubmitted() && $editForm->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
return $this->redirectToRoute('user_edit', array('id' => $user->getId()));
}
$imageForm->handleRequest($request);
if ($imageForm->isSubmitted() && $imageForm->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($image);
$em->flush();
//$image_id=$image->getId();
$user->addImgsuni($image);
$em->persist($user);
$em->flush(); //MeetingBundle::
return $this->redirectToRoute('user_edit', array('id' => $user->getId()));
}
return $this->render('MeetingBundle::user/edit.html.twig', array(
'user' => $user,
'edit_form' => $editForm->createView(),
'image_form' => $imageForm->createView(),
'delete_form' => $deleteForm->createView(),
));
}
C:\Bitnami\wampstack-5.5.30-0\sym_prog\proj3_27\src\MeetingBundle\Resources\views\Image\edit.html.twig
{% extends "MeetingBundle::layout.html.twig" %}
{% block body %}
<h1>User edit</h1>
{{ form_start(edit_form) }}
{{ form_widget(edit_form) }}
{{ form_end(edit_form) }}
<br>
{{ form(image_form) }}
<ul>
<li>
Back to the list
</li>
<br>
<li>
{{ form_start(delete_form) }}
{{ form_end(delete_form) }}
</li>
</ul>
{% endblock %}
url: http://localhost:8000/user/21/edit
This displays form with Imgsuni input field with the following content:
<img src="{{ asset( 'bundles/meeting/images/uploads/a4d7fb6b1282815d41e2015bfe6b3334f0833063.png') }}" height="200" />

Answer 1

The way is to add html to some field in Image entity, said named "htmlimg". Than to display contents of the field in twig template using {{ image.htmlimg }}. This generates: <img src="{{ asset( 'bundles/meeting/images/uploads/a4d7fb6b1282815d41e2015bfe6b3334f0833063.png') }}" height="200" /> and displays images.