DEV Community

Cover image for File Display using Wizard's Toolkit
Alec
Alec

Posted on

File Display using Wizard's Toolkit

Wizard's Toolkit is a library of PHP functions to make building responsive-designed websites and hybrid mobile apps quick and easy. This library was started in 2009 and has been enhanced and grown over the years.

This video gives a complete code walk-through and showcases the File Display function.

Almost all websites need to show a gallery of images, PDFs and/or videos. Sometimes those are stored in a database, and sometimes you may want to just show all files that are in a folder and sub-folders.

First we examine pulling the information from a SQL database. The SQL script retrieves the locations of the user images and path to that image.

In PHP we use PDO to pull in the data into a PHP array. Then just pass that array to wtkFileDisplay and it returns the HTML to evenly distribute the images in a nice viewing grid. The function dynamically determines the optimal number to show per row but you can override that.

For this example we are using MaterializeCSS which has a nice lightbox effect for images.

Next we look at the wtkReadDir function which can be used to get a listing of files from a directory and it's subdirectories. You can pass in a specific file extension to search for, or use the special 'image' or 'video' value to find all image file types or video file types. If you want to check specific directory instead of the directory your PHP file is in, you can.

Of course you can merge multiple arrays using array_merge_recursive then pass to wtkFileDisplay and voila, you have a combination of videos, images and PDFs. Likewise you could also pull from your SQL database and merge it into the array and display.

Last thing to note, the wtkFileDisplay function uses wtkFileCell to generate the HTML based on file type. The wtkFileCell uses wtkInsertSpaces on the file name to make it more user-friendly. The wtkInsertSpaces function adds a space between words based on WordCaps or snake_case. That way when you change a file name in the folder it displays nicely on the web page. This wtkInsertSpaces is used by many other functions in Wizard's Toolkit to save developers huge amounts of time.

Wizard's Toolkit - Low-code library of PHP, SQL and JavaScript
https://WizardsToolkit.com

Top comments (0)