How can I add text and image inside a frame in Python using tkinter

Question

I am writing my first programming codes. I want to know if I can add text and image label inside a frame. I created a canvas and added two frames to it and then tried to add image and text file (to be displayed at the top of the canvas) but the text and picture do not show. When I run the program without the frames, it does show. Here is the code:

#

from tkinter import *
from tkinter import ttk

root = Tk()
root.title ('iMedic')
canvas = Canvas(root, width = 1600, height = 800)


panewindow = ttk.Panedwindow(canvas, orient = VERTICAL)
panewindow.pack(fill = BOTH, expand = True)
paitents_frame = ttk.Frame(panewindow, width = 1600, height = 400, relief = RAISED)
prescription_frame = ttk.Frame(panewindow, width = 1600, height = 300, relief = RAISED)
panewindow.add(paitents_frame, weight = 1)
panewindow.add(prescription_frame, weight = 1)

canvas.grid(row = 0, column = 0)
photo = PhotoImage(file = './logo.gif')
canvas.create_image(55, 55, image=photo)
canvas.create_text(600, 155, text = 'Welcome', font = ('Helvetica', 72, 'bold'), justify = 'center', fill='blue')
canvas.update

root.mainloop()

#

Is there a way I can fix this? I would assume another way would be to have the pic and text on top and then add frames below it but I don't know how to do it. Thanks!

Answer 1

It's not clear to me why you're adding frames to a canvas but going by the later statement;

I would assume another way would be to have the pic and text on top and then add frames below it but I don't know how to do it.

Here is how you could do it:

1. Make the panewindow child of root instead of child of canvas
2. The frames resize to fit their content so I added two labels in each to make them visible, you should replace those labels with whichever widgets you need.
3. I used pack for all the widget placements but you can replace them with grid and provide the appropriate row and column values.

**

from tkinter import *
from tkinter import ttk

root = Tk()
root.title ('iMedic')
canvas = Canvas(root, width = 1600, height = 250)


canvas.pack(fill = BOTH, expand = True)
photo = PhotoImage(file = './logo.gif')
canvas.create_image(55, 55, image=photo)
canvas.create_text(600, 155, text = 'Welcome', font = ('Helvetica', 72, 'bold'), justify = 'center', fill='blue')
canvas.update

# Make panewindow child of root
panewindow = ttk.Panedwindow(root, orient = VERTICAL)
panewindow.pack(fill = BOTH, expand = True)

# paitents_frame with Labels in it
paitents_frame = ttk.Frame(panewindow, width = 1600, height = 400, relief = RAISED)
paitents_label1 = Label(paitents_frame, text="Name Label")
paitents_label1.pack()
paitents_label2 = Label(paitents_frame, text="Name Label")
paitents_label2.pack()

# prescription_frame with Labels in it
prescription_frame = ttk.Frame(panewindow, width = 1600, height = 300, relief = RAISED)
prescription_label1 = Label(prescription_frame, text="Prescription Text")
prescription_label1.pack()
prescription_label2 = Label(prescription_frame, text="Prescription Text")
prescription_label2.pack()

# Add the frames to panewindow
panewindow.add(paitents_frame, weight = 1)
panewindow.add(prescription_frame, weight = 1)

root.mainloop()

Another option is to leave out the canvas entirely and use labels to place image and text inside a frame. See this post on how to use image in labels

Answer 2

This code demonstrates how to place any text on any image in a Frame.

It works by creating a Label inside the Frame to hold your image and text.

Label requires the compound attribute to be set to either bottom, center, left, right, top or none

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title ('iMedic')

photo = tk.PhotoImage(file = "./logo.gif")

frame = ttk.Frame(root, relief = tk.RAISED)
frame.grid(row = 0, column = 0, sticky = tk.NSEW)
label = tk.Label(
    frame, image=photo, compound = tk.CENTER,
    font = "Helvetica 40 bold",
    foreground = "yellow", text = "Welcome")
label.grid(row = 0, column = 0, sticky = tk.NSEW)

root.mainloop()