collection form theming symfony2 - forms

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"...