# Display multiple images simultaneously

**URL:** <https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967>\
**Category:** Builder\
**Tags:** screen, images\
**Created:** [August 26, 2020, 3:49am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967 "2020-08-26T03:49:46Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![tlan](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tlan](https://discourse.psychopy.org/u/tlan)\
**Post date:** [August 26, 2020, 3:49am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/1 "2020-08-26T03:49:46Z")

</div>

Hi,

I wonder what’s the best way to display multiple images on the screen simultaneously. (Preferably with only one image component)

I have 100 small images to display at the same time, with their file names in a condition file. The image position varies, and is calculated/randomized in a code component.

My guess is that some custom codes are needed so that the screen flips only after all images are placed on the screen, instead of flipping 100 times.

I appreciate any further comments.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [August 26, 2020, 9:51am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/2 "2020-08-26T09:51:29Z")

</div>

If you added 100 image Components, I believe it would only flip the screen once, as the flip command happens at the end of the frame loop rather than after each component. I can see why you wouldn’t want to add all those components though…

What you could do is have all the file names in an excel cell separated by a delimeter (such as a comma), then use a Variable component to split them apart into a list. For example, if your excel sheet looked like this:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/7/1/71332c4398295267cce58f3f3cc0ea73d6e77015.png)

You could create a Variable component with the value:

```auto
$ImageFile.split(",")

```

This means the Variable, let’s call it `imlist`, will be a `list` of all the filenames there, as it splits the cell value at every comma.

The challenge then is creating all the Image components - but you could create one in Builder, then in a Code component you could make 100 copies using `.copy()` and set the `image` value of each to the corresponding image file, then store them in a list, something like:

```auto
for i in range(100):
    images[i] = MyImage.copy()
    images[i].image = imlist[i]

```

You’d then have to add code to draw _each_ image rather than just draw the original, but if you give this first bit a go and let me know how you get on I can then help you further.

---

<div class="post-metadata">

**Author:** ![tlan](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tlan](https://discourse.psychopy.org/u/tlan)\
**Post date:** [August 26, 2020, 9:57pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/3 "2020-08-26T21:57:19Z")

</div>

I got a bit lost starting at copying the component 100 times. What is `MyImage` in your example? I also wasn’t sure how you would use `images[i]` when you actually draw them. Some elaboration would be very helpful.  
Thanks.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [August 27, 2020, 3:44pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/4 "2020-08-27T15:44:19Z")

</div>

`MyImage` in this case is your placeholder Image component in Builder view, so when you say `MyImage.copy()` what you’re saying is “I’ve made this blank Image component in Builder, now make a copy of it”.

`images` will therefore be a `list` of Image objects, so you can do anything to `images[i]` that you would do to `MyImage`, if that makes sense? I think drawing it should be as simple as adding to the Each Frame tab:

```python
for i in range(100):
    images[i].draw()

```

As you’re essentially saying “for each image in `images`, perform it’s draw command”

---

<div class="post-metadata">

**Author:** ![tlan](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tlan](https://discourse.psychopy.org/u/tlan)\
**Post date:** [August 28, 2020, 6:39pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/5 "2020-08-28T18:39:37Z")

</div>

> [@TParsons](#):
>
> ```auto
> for i in range(100):
> images[i] = MyImage.copy()
> images[i].image = imlist[i]
> 
> ```

It’s starting to make sense, while it gives me an error with the `copy()` command:  
_`'ImageStim' object has no attribute 'copy'`_

Any thought?

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [September 1, 2020, 8:04am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/6 "2020-09-01T08:04:41Z")

</div>

Oops, my mistake! Some objects in Python have a `copy` method, I thought ImageStim did too… So instead you’ll need to add:

```auto
import copy

```

to the Begin Experiment tab, then rather than `MyImage.copy()` use `copy.copy(MyImage)` - so essentially you’re importing a method to copy it rather than using its own method. Does the same thing though!

---

<div class="post-metadata">

**Author:** ![tlan](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tlan](https://discourse.psychopy.org/u/tlan)\
**Post date:** [September 1, 2020, 4:45pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/7 "2020-09-01T16:45:03Z")

</div>

Ok, it makes sense. Now there’s one last issue, I believe. When we copy the image component, we are copying an “ImageStim” object in PsychoPy. It seems though the indexing is having a problem -

```auto
for i in range(3):
    images[i] = copy.copy(imageSample)
    images[i].image = imList[i]

IndexError: list assignment index out of range

```

Another similar error -  
`'ImageStim' object does not support indexing`

When I tried this method with only one image (so no indexing), it worked fine.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [September 2, 2020, 8:26am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/8 "2020-09-02T08:26:42Z")

</div>

Ah, I guess you need to initialise a blank list first… You could try adding this to the beginning:

```auto
images = []*len(imList)

```

or you could do this:

```auto
for i in range(len(imList)):
    images.append(copy.copy(imageSample))
    images[i].image = imList[i]

```

which should work too. Which you go with is personal preference really!

---

<div class="post-metadata">

**Author:** ![tlan](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tlan](https://discourse.psychopy.org/u/tlan)\
**Post date:** [September 2, 2020, 6:23pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/9 "2020-09-02T18:23:02Z")

</div>

Oh yes, of course I should do it this way. Silly question.  
Now the images are drawn on screen properly. Glad that I don’t need to create 100 components in the builder. 😀

Thanks Todd.

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [July 21, 2023, 12:40pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/10 "2023-07-21T12:40:55Z")

</div>

Hi,

I had a similar siuation as describen here and followed the advices. However, here I have some porblems:

for i in range(100):  
images[i].draw()

The end it only shows me the last image of the images list. Any idea of what I need to change?

Many thanks in advance!  
Annkathrin

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [July 27, 2023, 10:52am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/11 "2023-07-27T10:52:33Z")

</div>

How are the images spaced out?

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [July 30, 2023, 12:24pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/12 "2023-07-30T12:24:07Z")

</div>

They should be dispalyed in a 5x5 grif with each image being 0.9x0.9 and a spacing of 0.1 between them.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [August 2, 2023, 9:39am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/13 "2023-08-02T09:39:39Z")

</div>

Is this in norm/height units? If the image is 0.9x0.9 and there’s a gap of 0.1 between it and the next one, the next one would likely be off the screen

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [August 2, 2023, 3:30pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/14 "2023-08-02T15:30:33Z")

</div>

No, the spatial units are from the exp settings and I can actually see the images for a very short time and then it ends with only showing the last image. My impression is that for every frame it changes which images is shown but it is not showing all images. I am not really sure if that is possible and how to change that.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [August 2, 2023, 5:00pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/15 "2023-08-02T17:00:19Z")

</div>

What spatial units do you have in experiment settings? If you could share your experiment file that would be helpful

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [August 4, 2023, 9:56am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/16 "2023-08-04T09:56:06Z")

</div>

[EBIST\_01\_08\_23.psyexp](https://discourse.psychopy.org/uploads/short-url/nHvKSDMnSzfD8QsSQfsbdTo8WoV.psyexp) (80.7 KB)

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [August 4, 2023, 9:58am UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/17 "2023-08-04T09:58:12Z")

</div>

Hi, this is the current version of my experiment. What I actaully want to archieve is to have a 5x5 grid of grey images and change them on a mouse click.

---

<div class="post-metadata">

**Author:** ![TParsons](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/tparsons/32/8301_2.png) [@TParsons](https://discourse.psychopy.org/u/TParsons)\
**Post date:** [August 4, 2023, 12:11pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/18 "2023-08-04T12:11:58Z")

</div>

I think the problem is probably with using copy - `copy.copy` is only a surface level copy, so it probably still keeps the same stuff underneath, meaning when you set the position it sets it for all copies. Instead I’d recommend just initialising a new image with the relevant parameters:

```auto
images.append(visual.ImageStim(
    win,
    image=imList[i],
    mask=stimuli_image.mask,
    units=stimuli_image.units,
    pos=positionList[i],
    size=stimuli_image.size,
    anchor=stimuli_image.anchor,
    ori=stimuli_image.ori,
    ...etc
)

```

---

<div class="post-metadata">

**Author:** ![akb](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@akb](https://discourse.psychopy.org/u/akb)\
**Post date:** [August 4, 2023, 1:23pm UTC](https://discourse.psychopy.org/t/display-multiple-images-simultaneously/15967/19 "2023-08-04T13:23:13Z")

</div>

Thank you so much. It now worked! 🙂