How to display different images using grid function using Tkinter?

Python's tkinter library is a powerful and versatile tool for creating graphical user interfaces (GUIs). One of its key features is the ability to display images, and the grid function is a great way to organize and display multiple images in a grid-like format. In this article, we will explore how to use tkinter's grid function to display different images.

Step 1: Import the Necessary Libraries

To get started, we need to import the tkinter and PIL (Python Imaging Library) libraries. PIL is used to load and manipulate image files in Python.

import tkinter as tk
from PIL import ImageTk, Image

Step 2: Create a Tkinter Window

Next, we will create a tkinter window to display the images. We will set the size of the window and give it a title.

root = tk.Tk()
root.geometry("720x500")
root.title("Display Images using Grid Function")

Step 3: Load the Images

Now, we need to load the images that we want to display in the grid. We will use PIL's ImageTk module to load the images and convert them into a format that tkinter can display.

image1 = Image.open(r"C:\Users\Leekha\Desktop\images\Monkey.jpg")
image1 = image1.resize((240, 240))
image1 = ImageTk.PhotoImage(image1)

image2 = Image.open(r"C:\Users\Leekha\Desktop\images\Panda.jpg")
image2 = image2.resize((240, 240))
image2 = ImageTk.PhotoImage(image2)

image3 = Image.open(r"C:\Users\Leekha\Desktop\images\Elephant.jpg")
image3 = image3.resize((240, 240))
image3 = ImageTk.PhotoImage(image3)

image4 = Image.open(r"C:\Users\Leekha\Desktop\images\Lion.jpg")
image4 = image4.resize((240, 240))
image4 = ImageTk.PhotoImage(image4)

In this example, we are loading four images named Monkey.jpg, Panda.jpg, Elephant.jpg, and Lion.jpg. We are also resizing the images to a width and height of 240 pixels to ensure that they are all the same size.

Step 4: Create Labels for the Images

Next, we will create labels for each of the images. Labels are used to display text or images in a tkinter window.

label1 = tk.Label(image=image1)
label2 = tk.Label(image=image2)
label3 = tk.Label(image=image3)
label4 = tk.Label(image=image4)

We are creating four labels, one for each image, and setting the image parameter of each label to the corresponding image that we loaded in the previous step.

Step 5: Display the Labels using the Grid Function

Finally, we will use the grid function to display the labels in a grid-like format. The grid function is used to organize widgets in a table-like structure with rows and columns.

label1.grid(row=0, column=0)
label2.grid(row=0, column=1)
label3.grid(row=1, column=0)
label4.grid(row=1, column=1)

In this example, we are using the grid function to display the labels in a 2x2 grid. The first label (label1) is placed in row 0, column 0, the second label (label2) is placed in row 0, column 1, the third label (label3) is placed in row 1, column 0, and the fourth label (label4) is placed in row 1, column 1.

Step 6: Run the Program

We are now ready to run the program and see the images displayed in the tkinter window.

root.mainloop()

This line of code is used to start the tkinter event loop and keep the window open and responsive to user interactions.

Example

Let’s see the complete code and its output −

import tkinter as tk
from PIL import ImageTk, Image
root = tk.Tk()
root.geometry("720x500")
root.title("Display Images using Grid Function")
image1 = Image.open(r"C:\Users\Leekha\Desktop\images\Monkey.jpg")
image1 = image1.resize((240, 240))
image1 = ImageTk.PhotoImage(image1)

image2 = Image.open(r"C:\Users\Leekha\Desktop\images\Panda.jpg")
image2 = image2.resize((240, 240))
image2 = ImageTk.PhotoImage(image2)

image3 = Image.open(r"C:\Users\Leekha\Desktop\images\Elephant.jpg")
image3 = image3.resize((240, 240))
image3 = ImageTk.PhotoImage(image3)

image4 = Image.open(r"C:\Users\Leekha\Desktop\images\Lion.jpg")
image4 = image4.resize((240, 240))
image4 = ImageTk.PhotoImage(image4)

label1 = tk.Label(image=image1)
label2 = tk.Label(image=image2)
label3 = tk.Label(image=image3)
label4 = tk.Label(image=image4)

label1.grid(row=0, column=0)
label2.grid(row=0, column=1)
label3.grid(row=1, column=0)
label4.grid(row=1, column=1)
root.mainloop()

Output

When we run this code, we should see a tkinter window displaying four images in a grid, as shown below −

Conclusion

To summarize, this article has demonstrated how to use Python's tkinter library to create a GUI that displays multiple images in a grid format. By using the PIL library to load and resize the images and the grid function to organize them, we were able to create a visually appealing and intuitive interface. With this knowledge, developers can create more complex and interactive GUIs that incorporate images, enabling users to engage with the software in a more natural and intuitive way.

Whether you are building a photo gallery, a product catalog, or any other type of application that requires image display, the techniques presented in this article will provide a solid foundation for achieving your goals. Overall, tkinter's grid function and image manipulation capabilities provide a powerful toolkit for creating rich and dynamic GUIs.