Aggiungo l'html personalizzato all'etichetta choicefield in django

Question

Sto lottando con un requisito ora, voglio aggiungere un'immagine all'etichetta del campo scelta e davvero non ho idea di come farlo. Sto usando il wizard del modulo django per rendere il modulo. Ecco l'immagine che mostra quello che voglio raggiungere:

E qui è quello che ho ottenuto in questo momento (per rendere i pulsanti di opzione in linea, so che potrebbe essere raggiunto attraverso css):

Ecco il forms.py:

from django import forms 
from django.utils.translation import gettext as _ 


CHOICES=[('0','Pay by card'), ('1','Invoice')] 




class PaymentForm(forms.Form): 
    title = 'payment' 
    payment_method = forms.ChoiceField(label = _("Payment Options"), choices=CHOICES, widget=forms.RadioSelect(), required = True) 

sto il rendering tramite il modulo wizard:

{{ wizard.form.payment_method.label_tag }} 
           {{ wizard.form.payment_method|safe }} 
           {{ wizard.form.payment.errors}} 

Qualcuno ha qualche suggerimento per questo oltre al widget personalizzato?

Answer 1

1) Poco (ma non sono sicuro) chiamare una funzione in cui 'Paga con carta' e restituire tutti gli <img>... necessari.

2) Si può fare somthing come @Gahbu detto

3) a lungo [meglio, credo, ma non testato :(]: Fai un renderer:

from myapp.my_widgets import CardsRadioFieldRenderer 

CARD_CHOICE = '0' 

CHOICES=[(CARD_CHOICE,'Pay by card'), ('1','Invoice')] 

class PaymentForm(forms.Form): 
    title = 'payment' 
    payment_method = forms.ChoiceField(label = _("Payment Options"), choices=CHOICES,widget=forms.RadioSelect(renderer=CardsRadioFieldRenderer), required = True) 

# myapp/my_widgets.py 

class CardRadioInput(RadioInput): 
    def __init__(self, name, value, attrs, choice, index): 
     self.name, self.value = name, value 
     self.attrs = attrs 
     choice_value = force_text(choice[0]) 
     self.choice_value = choice_value 
     if choice_value == CARD_CHOICE: 
      choice_label = force_text(self.get_html_for_card_choice()) 
     else: 
      choice_label = force_text(choice[1]) 
     self.choice_label = choice_label 
     self.index = index 

    def get_html_for_card_choice(self): 
     #some logic to get the images tags (<img ...> <img ...>) 
     return text 


class CardsRadioFieldRenderer(RadioFieldRenderer): 
    def __getitem__(self, idx): 
     choice = self.choices[idx] # Let the IndexError propogate 
     return CardRadioInput(self.name, self.value, self.attrs.copy(), choice, idx) 

Answer 2

Nel modello fare qualcosa di simile:

{% for choice in wizard.form.payment_method.choices %} 
    {{ choice.0 }} {# value #} {{ choice.1 }} {# value #} 
    {% if choice.0 == PAYMENT_BY_PAYPAL %} 
    ... 
    {% endif %} 
{% endfor %} 

Si può anche scrivere:

{% for key, value in wizard.form.payment_method.choices %} 
    {% if key == PAYMENT_BY_PAYPAL %} 
    ... 
    {% endif %} 
{% endfor %} 

Answer 3

Senza un widget:

from django.utils.safestring import mark_safe 
CHOICES=[('0', mark_safe('Pay by card <img src="by_card.jpg"/>')), 
     ('1', mark_safe('Invoice <img src="no_card.jpg"/>')) 
] 

credito: setting help_text for each choice in a RadioSelect

Answer 4

Se si desidera twe provalo dal modello, devi usare la "cassaforte" che dice a Jinja di non scappare. come qui di seguito

{{ some_object.some_property|safe }} 

Eppure, se si desidera utilizzarlo all'interno del vostro codice Python, mentre la definizione del modulo/ModelForm basta usare mark_safe come di seguito.

mark_up = 'this is a <a href="http://www.google.com">link</a>' 
choices = list() 
choices.append(('some_id', mark_safe(mark_up))) 
self.fields['some_field'].choices = choices