Using the Photo Gallery Module you can display your Google Drive images on your website in a masonry grid layout with a lightbox preview. This module lets you create a stunning photo gallery and display it to your users.
Step-1: Create Photo Gallery Module
To create a Photo Gallery Module, click on the Shortcode Builder menu from the admin dashboard left sidebar menu. Create a new Shortcode > select the Photo Gallery module from the Types tab.
Rename the shortcode title from the top left side of the WordPress dashboard depending on your project type.
Then click Next.
Step-2: Configure the Sources Tab
Now you will be redirected to the next step (Source Folders & Files). Here you need to select your source files from Google Drive. Select your files & folders by pressing the plus sign.
You will discover your selected files in the selected files list section of your screen. You can drag them up or down to change their orders.
You might see a couple of settings named All Folders & Files and Use Private Folders. Let’s introduce you to them.
All Folders & Files: If All Folders & Files is enabled, visitors can navigate through all the folders & files of all the linked Google Drive accounts.
Use Private Folders: On the other hand, if Use Private Folders is turned on, users can only navigate through the file & folder they are permitted to.
Step-3: Configuring Excludes Tab
Now you are in the Excludes Tab. Where you can customize every file and folder that you want to exclude.
Show Files: The Show Files option is given to show or hide your files. If it’s enabled files will show, otherwise files will be hidden for the users.
Show Folders: The Show Folders option is given to show or hide your folders. If it’s enabled the folders will be shown otherwise, the folders will be hidden from the users.
Exclude Extensions: With the help of Exclude Extensions, you can simply exclude any files by the extensions you want. For example you want to exclude (.jpg, .png, .ppt, .doc files). Simply type the file extension in the exclude box and you get to go. Keep in mind, when Exclude All Expect is enabled, only the typed extension files will not show.
Exclude Names: You can also exclude any file or folder name by using Exclude Names. Type any file or folder name and your items will be excluded right away. Use Exclude All Expect to only show up typed names.
Step-4: Configuring Advanced Tab
The next step is to set up advanced options. You can do multiple customizations depending on your test and need.
Module Width: From this section, you can customize the module width. The value is given in the percentage (%). Play with this section and customize what you need. Just change the value and test! You can use any valid CSS unit (pixels, percentage), eg ‘360px’, ‘780px’, ‘80%’
Module Height: It’s similar to the width. Normally it’s given auto. You can customize depending on your need. You can use any valid CSS unit (pixels, percentage), eg ‘360px’, ‘780px’, ‘80%’
Browser View: This option is given to let you change your browser view to List or Grid. Select anyone you feel better about and give it a test.
Show Header: It will Show or hide the file browser header. If you don’t want to show the file browser header turn it off. Otherwise, let it turn on! If the header is disabled users won’t be able to see the Search, Refresh, and Breadcrumbs.
Show Search: If enabled, visitors will be able to search anything to find specific items in a short time. Having this option is good practice regarding better user experience.
Show Refresh: This option will help users to refresh across Google Drive. If any updated files are not showing, by clicking Refresh Button, files will be automatically synced.
Show Breadcrumbs: To show or hide Breadcrumbs turn the option on or off depending on your need. Breadcrumbs are shown in the top menu bar.
File Numbers: The number of files you want to show from your Google Drive, can be controlled from this option. Type numeric numbers only here. If you want to show all, type -1.
Sorting: Using this feature you can sort files by Name, Size, Created Date, Modified Date, Ascending, or Descending Direction. Select the option you are thinking to implement.
Finally, click Next.
Step-5: Configuring Permissions Tab
Now you will be redirected to the Permission tab. Here you will mostly work on permission-related tasks.
Display for: Using this option you can allow permission of your files & folder to everyone and logged-in users. You can also filter manually by user roles or any specific users.
Click Save Changes and copy the shortcode from the shortcode builder page.
Now you can use the shortcode to display your Google Drive photos with the help of the Photo Gallery module, inside any posts or pages.