Upload image input

#1

How to have the correct css and behavior (the thumbnail is not displayed in edit mode) ?

this is my code php :
class ServiceType extends AbstractResourceType
{
…
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder ->add(‘images’, CollectionType::class, [
‘entry_type’ => ServiceImageType::class,
‘allow_add’ => true,
‘allow_delete’ => true,
‘by_reference’ => false,
‘label’ => ‘sylius.form.service.images’,
])
} …
in twig :
{% form_theme form ‘SyliusUiBundle:Form:imagesTheme.html.twig’ %}

{{ 'sylius.ui.media'|trans }}


{{ form_row(form.images, {'label': false}) }}
...
#2

I have the same issue, the row is rendered but the preview of the images is not visible.
Did you find some solution?

#3

Solved,

You have to override @SyliusUi/Form/imageThemes.html.twig and add your own widget to render the image file input:

{% block app_service_image_widget %}
    {% spaceless %}
        <div class="ui upload box segment">
            {{ form_row(form.type) }}
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
            {% if form.vars.value.path|default(null) is not null %}
                <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
            {% endif %}
            <div class="ui hidden element">
                {{ form_widget(form.file) }}
            </div>
            <div class="ui element">
                {{- form_errors(form.file) -}}
            </div>
        </div>
    {% endspaceless %}
{% endblock %}