I have 2 problems (which might be connect to each other!)
1. My app includes showing a couple of images to the participants. I save all images in Static in my coding root, but once I changed the images, it does not show the new images and show previous images! 

2. My HTML pages work, but suddenly last night started to show these errors in all html pages "{{ or {% expected". I unisntalled pycharm and installed it again but the messages are still exist! (I am using new version of oTree5 and python 3.9)

(1) in your browser, try a full refresh with Ctrl+F5
(2) can you show your code?

Thank you Chris. I refreshed it a lot but it does not work! 
my -init-: 
@staticmethod
    def vars_for_template(player: Player):
        import random
        rand = random.randint(1, 2)
        return dict(
            klee_img=f'first5paintings/klee{player.round_number}.jpg',
            kandinsky_img=f'first5paintings/kandinsky{player.round_number}.jpg',
            rand=rand,
        )
        
My HTML: 

{{ if rand == 1}}
<table class="my-3" style="width:100%">
    <tr>
        <td style="align-items: center ; vertical-align: middle; horiz-align: center" ;><img src="{{ static klee_img }}"
                style="width:300px; height:300px;"/>
        </td>
        <td style="align-items: center ; vertical-align: middle; horiz-align: center" ;><img src="{{ static kandinsky_img}}"
                style="width:300px; height: 300px;"/>
        </td>
</table>

{{ else }}
<table class="my-3" style="width:100%">
 
    <tr>
        <td style="align-items: center ; vertical-align: middle; horiz-align: center" ;><img
                src="{{ static kandinsky_img}}"
                style="width:300px; height: 300px;"/>
        <td style="align-items: center;  vertical-align: middle ; horiz-align: center" ;><img
                src="{{ static klee_img}}"
                style="width:300px; height: 300px;"/></td>
    </tr>
</table>

{{ endif }}

Dear Chris, 
you are right. With hard refreshing (ctr+shift+r), it is solved!

Is the other error still happening? If yes, which line of your code does it mention?

By the way I recommend putting your CSS into a <style> element instead of inline; it will make your code easier and more concise.


<style>
    .your-td {
        align-items: center ; vertical-align: middle; horiz-align: center;
    }
    .your-table {
        width:100%;
    }
    .kk-img {
        width:300px;
        height:300px;
    }

</style>


<table class="my-3 your-table">
    <tr>
        {{ if rand == 1}}
        <td class="your-td"><img src="{{ static klee_img }}" class="kk-img"/></td>
        <td class="your-td"><img src="{{ static kandinsky_img }}" class="kk-img"/></td>
        {{ else }}
        <td class="your-td"><img src="{{ static klee_img }}" class="kk-img"/></td>
        <td class="your-td"><img src="{{ static kandinsky_img }}" class="kk-img"/></td>
        {{ endif }}
    </tr>
</table>

And if you define the image order in vars_for_template it becomes even simpler:

def vars_for_template(player: Player):
    import random

    names = ['kandinsky', 'klee']
    image_paths = [f'first5paintings/{name}{player.round_number}.jpg' for name in names]
    random.shuffle(image_paths)
    return dict(
        image_paths=image_paths
    )
    

<table class="my-3 your-table">
    <tr>
        {{ for image_path in image_paths }}
            <td class="your-td"><img src="{{ static image_path }}" class="kk-img"/></td>
        {{ endfor }}
    </tr>
</table>

Thank you very much Chris. really useful comments

Hi Chris,

I got the same issue #2. Pycharm is suddenly unable to recognize {{ inside html. I tried different python interpreters and updated otree to no avail. Attached is a screenshot. I think pycharm does not recognize the python code inside {{ and the coloring is also off. Could you please help? Thanks!