Trying to display images of varying dimensions while maintaining height to width ratio

Online experiments
1

Hi,
I have a couple of images that I want to display at the end of each block during a feedback routine. They vary in their width and height. I want to keep the width fixed and adjust the height dynamically.

For this purpose, I have the following bit of code at the beginning of the routine in Python. I can then use the my_ratio variable to adjust the size in the image component. This works fine locally.

ch_pic = “stim/ch” + str(block_n) + “.jpg”

my_image = visual.ImageStim(
win=win,
name=‘my_image’,
image=ch_pic, mask=None,
ori=0, pos=(0, -0.1), size=None,
color=[1,1,1], colorSpace=‘rgb’, opacity=1,
flipHoriz=False, flipVert=False,
texRes=512, interpolate=True, depth=-3.0)

my_width = my_image.size[0]
my_height = my_image.size[1]

#width to height ratio
my_ratio = my_width/my_height

But I am stuck when trying to make it work on pavlovia. Below is the corresponding JS code (I have changed null to undefined as recommended in Wakefield’s Crib Sheet).

ch_pic = ((“stim/ch” + block_n.toString()) + “.jpg”);
my_image = new visual.ImageStim({“win”: win, “name”: “my_image”, “image”: ch_pic, “mask”: undefined, “ori”: 0, “pos”: [0, (- 0.1)], “size”: undefined, “color”: [1, 1, 1], “colorSpace”: “rgb”, “opacity”: 1, “flipHoriz”: false, “flipVert”: false, “texRes”: 512, “interpolate”: true, “depth”: (- 3.0)});
my_width = my_image.size[0];
my_height = my_image.size[1];
my_ratio = (my_width / my_height);

The error message I get online is: Cannot read property ‘0’ of undefined, and the offending JS code line is
my_width = my_image.size[0];

Is what I am trying to do not possible in JS?

Images are inserted as additional material in the online settings, and they do show on pavlovia if I remove the code above

Any help would be much appreciated

2

In your code you’ve just set “size”: undefined and you are getting an error that the size is undefined. How about setting the size to a starting value (e.g. [1,1])