Symfony 4 – How to using images instead of radio buttons?

in my symfony 4 project I have a template which I use to display a sidebar like this:

enter image description here

It’s from this github project : https://github.com/azouaoui-med/pro-sidebar-template

Thanks to the code, it is possible to change the theme of the sidebar thanks to the buttons on the right.
The default code to display them is:

<div class="form-group col-md-12">
     <a href="#" data-theme="default-theme" class="theme default-theme"></a>
     <a href="#" data-theme="chiller-theme" class="theme chiller-theme selected"></a>
     <a href="#" data-theme="legacy-theme" class="theme legacy-theme"></a>
     <a href="#" data-theme="ice-theme" class="theme ice-theme"></a>
     <a href="#" data-theme="cool-theme" class="theme cool-theme"></a>
     <a href="#" data-theme="light-theme" class="theme light-theme"></a>
</div>

When we click on one of the elements, the sidebar sees its theme modified according to our choices.
What I would like in my Symfony project is to be able to keep the changes to display the sidebar in the theme corresponding to the user’s choices.

So I have to reproduce this layout but with a form

However, I don’t see how to get the same page with the images instead of radio buttons.

I tried something like :

->add('backgroundColor', ChoiceType::class, [
                "required" => false,
                "label" => "Couleur de fond",
                "choices" => [
                    "default-theme" => "default-theme",
                    "chiller-theme" => "chiller-theme",
                    "legacy-theme" => "legacy-theme",
                    "ice-theme" => "ice-theme",
                    "light-theme" => "light-theme",
                    "cool-theme" => "cool-theme",
                ],
                'choice_attr' => function($choice, $key, $value) {
                    // adds a class like attending_yes, attending_no, etc
                    return [
                        'class' => 'theme '.strtolower($value),
                        'data-theme' => strtolower($value),         
                    ];
                },
                "label_attr" => [
                    "class" => "radio-inline"
                ],
                "choice_label" => false,
                "placeholder" => false,
                'expanded' => true,
                'multiple' => false,
            ])

But the result is the next :

enter image description here

And when I use another bootswatch theme than the Sketchy theme (https://bootswatch.com/sketchy/)

I’ve :

enter image description here

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *