Django Crispy Forms: Replace Label and Radio Buttons with Images

Question

I have a form where a certain field is a radio selector with 3 options. Let's say this represents Good, More-or-Less, and Bad.

I managed to put them in the same line with InlineRadio, like this:

self.helper.layout = Layout(InlineRadio(field_name))

Now, I need to 2 things:

1) replace each option, that is rendered as a radio-button and its label with a pre-defined image.

2) Add 2 images, one to the left and one to the right of the radio buttons. So, at the end, I'll have 5 images in a row. From left to right: Image of Smile (just the image) - Image of selector (Good) - Image of selector (More-or-Less) - Image of selector (Bad) - Image of Sad face (just the image)

Is it possible to achieve them with django-crispy? If not, how can I achieve this?

Thanks in advance.

Answer 1

I'm the lead developer of crispy-forms. You could do this using Field layout object and using a custom template.

Field('field_name', template="custom_inline_radio.html")

Other option you have is to create your own layout object subclassing InlineRadio. That way you would only have to do:

CustomInlineRadio('field_name')

Actually, what you try to do is basically override the output of a default widget in Django and that probably makes more sense if you use a custom widget in your Django form, crispy-forms will play great with it. I wrote an article on widgets and Django forms that might interest you.