[ Question] How to add multiple images next to each other with a popup?

[Shipmaster-DiggySP]

Type of Issue (Enhancement, Error, Bug, Question)

Question

---

Operating System

WIN 10

PySimpleGUI Port (tkinter, Qt, Wx, Web)

tkinter

---

Versions

Version information can be obtained by calling sg.main_get_debug_data()
Or you can print each version shown in ()
Python version: 3.11.0 (main, Oct 24 2022, 18:26:48) [MSC v.1933 64 bit (AMD64)]
port: tkinter
tkinter version: 8.6.12
PySimpleGUI version: 4.60.4
PySimpleGUI filename: D:\Python.venv\Lib\site-packages\PySimpleGUI\PySimpleGUI.py

Python version (sg.sys.version)
Python version: 3.11.0 (main, Oct 24 2022, 18:26:48) [MSC v.1933 64 bit (AMD64)]

PySimpleGUI Version (sg.version)
PySimpleGUI version: 4.60.4
GUI Version (tkinter (sg.tclversion_detailed), PySide2, WxPython, Remi)
tkinter version: 8.6.12

---

Your Experience In Months or Years (optional)

Years Python programming experience
2
Years Programming experience overall
3
Have used another Python GUI Framework? (tkinter, Qt, etc) (yes/no is fine)
no
Anything else you think would be helpful?

---

Troubleshooting

These items may solve your problem. Please check those you've done by changing - [ ] to - [X]

• Searched main docs for your problem www.PySimpleGUI.org
• Looked for Demo Programs that are similar to your goal. It is recommend you use the Demo Browser! Demos.PySimpleGUI.org
• If not tkinter - looked for Demo Programs for specific port
• For non tkinter - Looked at readme for your specific port if not PySimpleGUI (Qt, WX, Remi)
• Run your program outside of your debugger (from a command line)
• Searched through Issues (open and closed) to see if already reported Issues.PySimpleGUI.org
• Have upgraded to the latest release of PySimpleGUI on PyPI (lastest official version)
• Tried using the PySimpleGUI.py file on GitHub. Your problem may have already been fixed but not released

Detailed Description

I’m trying to find a way to add multiple images next to each other in the same row when the user responds to a pop-up since it's a tier list program. However, it's difficult to find a way and I believe my structure for the layout of the rows is inefficient.

Code To Duplicate

Here is the rows layout

image_row_column = [
    [sg.Image(key='-STIER-', ), sg.Image(key='-STIER2-'),sg.Image(key='-STIER3-'),sg.Image(key='-STIER4-'),sg.Image(key='-STIER5-'),sg.Image(key='-STIER6-')],
    [sg.HSep()],
    [sg.Image(key='-ATIER-'),sg.Image(key='-ATIER2-'),sg.Image(key='-ATIER3-'),sg.Image(key='-ATIER4-'),sg.Image(key='-ATIER5-'),sg.Image(key='-ATIER6-')],
    [sg.HSep()],
    [sg.Image(key='-BTIER-'), sg.Image(key='-BTIER2-'),sg.Image(key='-BTIER3-'),sg.Image(key='-BTIER4-'),sg.Image(key='-BTIER5-'),sg.Image(key='-BTIER6-')],
    [sg.HSep()],
    [sg.Image(key='-CTIER-'), sg.Image(key='-CTIER2-'),sg.Image(key='-CTIER3-'),sg.Image(key='-CTIER4-'),sg.Image(key='-CTIER5-'),sg.Image(key='-CTIER6-')],
    [sg.HSep()],
    [sg.Image(key='-DTIER-'), sg.Image(key='-DTIER2-'),sg.Image(key='-DTIER3-'),sg.Image(key='-DTIER4-'),sg.Image(key='-DTIER5-'),sg.Image(key='-DTIER6-')],
    [sg.HSep()],
    [sg.Image(key='-FTIER-'), sg.Image(key='-FTIER2-'),sg.Image(key='-FTIER3-'),sg.Image(key='-FTIER4-'),sg.Image(key='-FTIER5-'),sg.Image(key='-FTIER6-')],

Here is the layout for the row selector pop up:

def popup():
    layout = [
        [sg.T('Where do you want to place this image?')]] + [
        [sg.Button(f'{kind} Tier', key=kind) for kind in "SABCDF"] + [sg.Cancel()]
    ]
    window = sg.Window('Row Selector', layout)
    event, values = window.read(close=True)
    return None if event in (sg.WIN_CLOSED, 'Cancel') else event`
...
        selector_popup = popup()
        if selector_popup:
            file_name = Image.open(os.path.join(values['-FOLDER INPUT-'], values['-IMAGE LIST-'][0]))
            file_name.thumbnail((150, 150))
            bio = io.BytesIO()
            file_name.save(bio, format="PNG")
            window[f"-{selector_popup}TIER-"].update(data=bio.getvalue())

Screenshot, Sketch, or Drawing

---

Watcha Makin?

I'm trying to make a tier list maker that the user can import image files into.

[jason990420]

Not sure what the requirements is ?

[Shipmaster-DiggySP]

Not sure what the requirements is ?

Here's what I have so far:

I'm trying to find away to be able to add more images to each row but so far can only add one.
If you want I can send the full code.

[jason990420]

I'm trying to find away to be able to add more images to each row but so far can only add one.

For image_row_column, it shown that there are six Image elements in a row, not only one.

[Shipmaster-DiggySP]

Yeah, but as far as I know a single Image element can't display more than one image right?

[jason990420]

Basically, you are right.

Example Code for 7 images in a row.

import PySimpleGUI as sg

layout, row, cols, length = [], [], 7, len(sg.EMOJI_BASE64_LIST)

for i, emoji in enumerate(sg.EMOJI_BASE64_LIST):
    row.append(sg.Image(emoji))
    if (i % cols) == cols-1 or i == length - 1:
        layout.append(row)
        row = []
        if i != length - 1:
            layout.append([sg.HorizontalSeparator()])

sg.Window('Title', layout).read(close=True)