PysimpleGUI handling pictures with text in frames

Question

I have used tkinter to organize pictures with text inside various frames on a canvas with a scrollbar. (as can be seen in the picture). I'm really struggling to achieve same functionalities with pysimplegui. I need help on creating a layout using Image(),Text() and Frame() Elements. I have also tried to manipulate the layout with Column Element without success. Looping through the arrangement really stops my progress.

Answer 1

To avoid the location issue for image and text, I build a Image Column for it.

If you need to work dynamically with adding elements, Image, Frame, remember to call window.refresh() and scrollable_column.contents_changed() after it, so it will update all content to keep the scroller work correctly.

Example Code

import PySimpleGUI as sg

class Image(sg.Column):

    def __init__(self, source, text):
        layout = [[sg.Image(source)], [sg.Text(text, size=8, justification="center")]]
        super().__init__(layout, element_justification="center")

sg.theme("DarkBlue")
sg.set_options(font=("Courier New", 11))

emoji = {"Happy":sg.EMOJI_BASE64_HAPPY_LIST, "SADLY":sg.EMOJI_BASE64_SAD_LIST}

columns = 10
column_layout = []
for title, lst in emoji.items():
    frame_layout, line = [], []
    limit = len(lst) - 1
    for i, item in enumerate(lst):
        line.append(Image(item, f"{title} {i+1}"))
        if i % columns == columns - 1 or i == limit:
            frame_layout.append(line)
            line = []
    column_layout.append([sg.Frame(title, frame_layout)])

layout = [[sg.Column(column_layout, scrollable=True, vertical_scroll_only=True)]]
sg.Window("Scrollable Frames with Images", layout).read(close=True)