How to display image on HTML fieldtype?

1

I need help to understand the process. Here is my case:

  • I have doctype Member Type which has fields:
    – type_of_member [fieldtype: Data]
    – upload_image_of_card [fieldtype: Attach Image] (to upload different card image based on member type)
    – image_of_card [fieldtype: Image] (to display the image of blank cards)

  • I have doctype Member which has fields:
    – member_type [fieldtype: Link to Member Type]
    – card_image [fieldtype: HTML] (because I want to render html to display member’s name on top of the card image)

Each time the member_type is selected, the card_image should display the image of card (taken from Member Type doctype) with member’s name on top of it.

I currently achieve this by putting HTML and Jinja in the Option box of the card_image. But I think this is risky because a user might accidentally change the html code and break everything. And Jinja is not working fully here (can’t use elif).
So I want to move it to code (js or py).

Can anyone please tell me the process of how to achieve this?
Thank you.

2

Turn out, instead of using frm.set_value, I use jQuery

$( frm.fields_dict.card_image.wrapper ).html( html_of_card )

where html_of_card is the html template to be inserted to the html field.

I also don’t use Jinja but jQuery variable ${var} to insert the values from other fields.

I hope this helps other looking for way to do similar.

1 Like