collection form theming symfony2

Question

I use the following abstract type in my symfony 2 application in order to edit an album

    public function buildForm(FormBuilderInterface $builder, array $options)
  {
    $builder
      ->add('title', 'text')
      ->add('description', 'textarea')
      ->add('public', 'checkbox')
      ->add('lists', 'collection', array(
            'attr' => array('data-category' => 'access-right'),
            'type' => 'albumListType',
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference'  => false,
            )
      )
      ->add('medias', 'collection', array(
            'attr' => array('data-category' => 'media'),
            'type' => new MediaType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference'  => false,
            )
        )
    ;
  }

when i display this form i need to display a thumbnail for each medias linked with the article so i try to overload the mediawidget in order to produce the following html

<div class="row" id="albumtype_media" data-prototype="prototype">
    <div class="col-md-3" id="albumtype_media_0">
            <img src="path"/>
            <input type="hidden" name="albymtype_media[0][path]" value="path"/>
    </div>
    <div class="col-md-3" id="albumtype_media_1">
            <img src="path"/>
            <input type="hidden" name="albymtype_media[1][path]" value="path"/>
    </div>
</div>

in order to achieve this i use a special form theme to customize the media widget

{% block _medias_widget %}
    {% spaceless %}
        {% if prototype is defined %}
            {% set attr = attr|merge({'data-prototype': form_row(prototype) }) %}
        {% endif %}
        <div class="row" {{ block('widget_container_attributes') }}>
            {{ block('collection_media_rows') }}
            {{ form_rest(form) }}
        </div>
    {% endspaceless %}
{% endblock %}

{% block collection_media_rows %}
{% spaceless %}
{{ form_errors(form) }}
{% for innerform in form %}
        {% spaceless %}
             <div class="col-md-3" {{ block('widget_attributes') }}>
                {% if form.parent is empty %}
                    {{ form_errors(innerform) }}
                {% endif %}
                <img src="{{ innerform.vars.value.path }}"/>
                {% for child in innerform %}
                    {{ form_errors(child) }}
                    {{ form_label(child) }}
                    {{ form_widget(child) }}
                {% endfor %}
            </div>
        {% endspaceless %}
{% endfor %}
{% endspaceless %}
{% endblock %}

wichh give me the following output

<div class="row" id="albumtype_media" data-prototype="prototype">
    <div class="col-md-3" id="albumtype_media" data-prototype="prototype">
            <img src="path"/>
            <input type="hidden" name="albymtype_media[0][path]" value="path"/>
    </div>
    <div class="col-md-3" id="albumtype_media" data-prototype="prototype">
        <div id="albumtype_media_1">
            <input type="hidden" name="albymtype_media[1][path]" value="path"/>
    </div>
</div>

as i begin with symfony 2 i don't have a very good understanding at twig and looking at the source code for form_widget doesn't help me neither so if you could explain me how to get the desired result i would be very greatful.

Answer 1

Does your twig template inherit from another template? If not , you should be mindful of block order. Block that are meant to be nested when rendered should be nested. You cannot define a block as using another block then define that second block afterward. block "collection_media_rows" should be defined within block "_medias_widget"...