1. Code
  2. OpenCart

Integrate UberGallery With OpenCart: Part One


UberGallery is a simple PHP script that creates a nice web image gallery by generating thumbnails of the original images on the fly. You just need to upload images to a specific directory, and they’ll be picked up to generate the photo gallery.

Our goal is to make a module that uses the UberGallery script to generate the gallery, but in an OpenCart way. In the back-end, you should be able to configure parameters like thumbnail width, thumbnail height and the like. Based on that, it’ll create an image gallery block in the front-end pages.

Today, we’ll go through the back-end setup in which we’ll create the files required to create a custom configuration form in the back-end module part. I assume that you’re familiar with the basic module development process in OpenCart, as we’ll skip through the basics of module creation steps. Here’s a nice article explaining the basics of OpenCart modules if you want to explore it.

I assume that you’re using the latest version of OpenCart, so make sure you have it so that you can follow the code samples.

File Setup—in a Nutshell

Let’s quickly go through the file setup required for the back-end.

  • admin/controller/module/uber_gallery.php: It's a controller file that provides the application logic of the usual controller in OpenCart.
  • admin/language/english/module/uber_gallery.php: It's a language file that helps set up language labels.
  • admin/view/template/module/uber_gallery.tpl: It's a view template file that holds the XHTML of the configuration form.
  • system/library/uberGallery: It’s the UberGallery component itself.

So that’s a list of the files we’re going to implement today. It’ll create a custom configuration form for our UberGallery module so that you can configure the different parameters from the back-end.

Without wasting any time, I’ll straight away dive into the geeky stuff.

Set Up the Back-End Module Files

Before we go ahead and create our custom module files, download UberGallery from the official website and copy the resource directory in such a way that it looks like system/library/uberGallery/resources.

Now, create a file system/library/uberGallery/resources/oc.galleryConfig.ini with the following contents.

It’s a file similar to the UberGallery configuration file galleryConfig.ini, but with placeholders. It’ll be used to create an actual configuration file on the fly when admin saves the configuration form from the back-end.

Finally, as per the UberGallery requirements, you need to copy system/library/uberGallery/resources/sample.galleryConfig.ini to system/library/uberGallery/resources/galleryConfig.ini. Also, make sure that system/library/uberGallery/resources/galleryConfig.ini and system/library/uberGallery/resources/cache are writable by the web server.

Next, go ahead and create a file admin/controller/module/uber_gallery.php with the following contents.

As usual, you’ll see two standard methods in any back-end controller file—the index method, which is used to provide standard logic that deals with storing configuration form values, and the validate method, which is used to validate the configuration form.

As I’ve already mentioned in the beginning of the article that you should be familiar with basic module development in OpenCart, we’ll discuss the code specific to the UberGallery part.

Other than doing the usual index method stuff, loading appropriate languages and models and setting up variables for the view template file, there’s an interesting piece of code in our index method. Let’s look at it closely.

What we’re trying to achieve here is that whenever admin saves the UberGallery configuration form in the back-end, galleryConfig.ini should be created on the fly. Recall that oc.galleryConfig.ini we created at the beginning of this section, and you should now understand the trick behind that.

We’re fetching the contents of system/library/uberGallery/resources/oc.galleryConfig.ini, replacing placeholders with actual values, and finally saving it as a galleryConfig.ini which overwrites the existing default file.

Moving ahead, create a file admin/language/english/module/uber_gallery.php with the following contents.

Nothing extraordinary—we’re just declaring language variables in this file.

Finally, we’ll create a view template file that contains the XHTML for our custom configuration form. Go ahead and create a file admin/view/template/module/uber_gallery.tpl with the following contents.

So, that’s it as far as the back-end file setup is concerned.

Test the Configuration Form

Head over to the back-end and navigate to Extensions > Modules. Install our newly created uberGallery module and edit it to open the configuration form.

Configuration Form

Fill in the values as required, and save the form! Of course, it’ll save the module settings in the database, but in addition to that it’ll generate a new galleryConfig.ini as well! Go ahead and open system/library/uberGallery/resources/galleryConfig.ini, and it should reflect the parameter values with the configuration form fields.

So, we’ve just built a mechanism to generate galleryConfig.ini on the fly using a configuration form! It’ll be used in the front-end when we enable the module to display the gallery.

So, that's it for today's article. I'll be back soon with the next part of this series.


In this first part, we have gone through the back-end file setup for the UberGallery module. In the next part, we'll explore the front-end counterpart of it. For any queries, use the comments feed below!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.