How to display a certain .jpg conditional on a variable's value?

[Leila Wenninger]

Hi everybody!

I have a condition variable player.condition_var which can have the integer values 1, 2 or 3.

Now I want to display either 1.jpg, 2.jpg or 3.jpg on the Results.html page conditional on the value of the variable. But I don't get it to work.

What do I have to write in the .html file?

[Chris @ oTree]

see here: https://otree.readthedocs.io/en/latest/templates.html#dynamic-images

[Leila Wenninger]

Thanks a lot! This helps but I'm still running into a problem.

I've adapted and itegrated the code from that website you posted and according to the debug info the image_path variable is working (it yields 'global/1.jpg' or 'global/2.jpg' as it should, depending on player.condition_var)

However, the image is not displayed on the page and there is also no error message.

For your understanding, I have done the following:

1. Added the following line to class Constants(BaseConstants):
my_template = 'newapp/_Template.html'

2. Created the file _Template.html with the following content:
{{ block title }}
    Results
{{ endblock }}
{{ block content }}
<img src="{{ static image_path }}"/>

    {{ next_button }}

{{ endblock }}

3. Added the following line to integrate the template in the HTML-page, where the picture should be displayed:
{{ include Constants.my_template }}

Any ideas?

PS: Sorry if I double posted, I don't get how this is working here.. :-o

[BonnEconLab]

Dear Leila,

I don’t see the need for your points 1 and 3. This seems unnecessarily complicated to me.

If I understand you correctly, you have put the images that you need to use in multiple apps into the _static/global directory of your project.

Moreover, you seem to have a folder/app called newapp. Assuming that you are using the “no-self” variant of oTree, there is a file __init__.py in that folder. You also seem to have a file _Template.html in that folder.

With this setup, you should have something like the lines

class _Template(Page):

    @staticmethod

    def vars_for_template(player):

        return {

            image_path = 'global/1.jpg',

        }

in the file newapp/__init__.py. This is what you seem to do. (Of course, in your case image_path is created dynamically based on certain conditions.)

Then, all you should need in _Template.html is

<img src="{{ static image_path }}" />

(as you suggested). That’s all.

Best,

Holger

[Leila Wenninger]

This totally works, thank you so much Holger!! I'm so happy!!! :D