Problems trying to position images with Tkinter

[emont]

Hello,

I am trying to create this in Python with TKinter (see screenshot1), but when I try to position the foler_logo.png image, but always appears on top, how to change it according to Screenshot1?

import tkinter as tk
from PIL import Image, ImageTk

# Set the width and height for the iPhone 14 screen (adjust as needed)
iphone_width = 300
iphone_height = 500

# Create the main window
window = tk.Tk()
window.title("Invoice Processor")

# Set the window size
window.geometry(f"{iphone_width}x{iphone_height}")
window.config(bg='White')

image = Image.open("Images/Folder_Logo.png")
image = ImageTk.PhotoImage(image)
image_label = tk.Label(window, image=image, borderwidth=0)
image_label.place(x=150, y=350)
image_label.pack()

canvas = tk.Canvas(window, width=300, height=70, bg="#0014DC")
canvas.pack()

rectangle = canvas.create_rectangle(0, 0, 300, 70, fill="#0014DC")  # Set the rectangle coordinates and fill color
welcome_text = canvas.create_text(75, 50, text="Welcome", fill="white", font=("SLB Sans", 20))

additional_text = tk.Label(window, text="This application will help you\n"
                                    "to automatize the file download\n"
                                    "process in bulk.", font=("Arial", 11), bg="white")
additional_text.place(x=45, y=100)

# Run the Tkinter event loop
window.mainloop()

Thanks in advance for the help.

[menator01]

You are using pack and place on the image. Use one or the other. Not both

[deanhystad]

Not only should you not use pack and place together in the same frame/window, but I would also go further and say you should not use place at all. Layout managers like pack and grid automatically compensate for different sized images or different fonts. If you use place, any change to any of the widgets may require recoding all the place statements.

You can put the image and text in the same Label.

import tkinter as tk

window = tk.Tk()
image = tk.PhotoImage(file="Images/Folder_Logo.png")
tk.Label(window, image=image, text="Folder Processing", compound="left").pack()
window.mainloop()

You could use a grid layout

import tkinter as tk

window = tk.Tk()

image=tk.PhotoImage(file=Images/Folder_Logo.png")
tk.Label(
    window,
    image=image
).grid(row=0, column=0)

tk.Label(
    window,
    text="Folder Processing"
).grid(row=0, column=1)

window.mainloop()

You could use a frame to make a layout row.

import tkinter as tk

window = tk.Tk()

frame = tk.Frame(window)
frame.pack(side=tk.TOP)

image = tk.PhotoImage(file="games/tictactoe/pygame/x.png")
tk.Label(frame, image=image).pack(side=tk.LEFT)
tk.Label(frame, text="Folder Processing").pack(side=tk.LEFT)

window.mainloop()

[menator01]

I did a version of your script.

import tkinter as tk 
from os.path import dirname, realpath
import os
from PIL import Image, ImageTk

path = f'{realpath(dirname(__file__))}/images'

class Window:
    def __init__(self, parent):
        parent.columnconfigure(0, weight=1)
        parent.rowconfigure(0, weight=1)

        container = tk.Frame(parent, bg='white')
        container.grid(column=0, row=0, sticky='news')       

        img_list = os.listdir(path)

        label = tk.Label(container, text='Welcome', fg='white', bg='blue')
        label['font'] = ("SLB Sans", 20, 'bold')
        label.grid(column=0,row=0, sticky='new')

        label = tk.Label(container, anchor='w', wraplength=180, bg='white')
        label['text'] = '''This application will help you to automatize the file download process in bulk.'''
        label.grid(column=0, row=1, sticky='new', padx=10, pady=20)

        index = 0
        labels = ['Folder Processing', 'Downloading Files', 'Moving Files', 'Process Complete']
        row = 2
        for img in img_list:
            with Image.open(f'{path}/{img}') as im:
                resized = im.resize((40,40))
            icon = ImageTk.PhotoImage(resized)
            icon.bak = icon

            label = tk.Label(container, bg='white', fg='blue', text=f' {labels[index]}', image=icon, compound='left', anchor='w')
            label.grid(column=0, row=row, sticky='new', padx=8, pady=8)
            row += 1
            index += 1
       


root = tk.Tk()
root['padx'] = 8
root['pady'] = 8
root['bg'] = 'white'
Window(root)
root.mainloop()