Web Design Class: How to Add a Photo Gallery to Joomla!

By Nathan Segal

You may have used a photo gallery that allowed you to easily scroll through multiple images on a website, and wondered how you could add this feature to your own website. In this article we're going to look at the process of adding a photo gallery to Joomla! using an extension.

As with all extensions, we start our search on the Joomla! website.

Before you start searching for a photo gallery, it's important to know how you intend to use it. To elaborate, do you want to show photos in a gallery? Do you want to add photos to articles? Do you want give users the ability to download your photos? These questions need to be addressed before you start your search.

To search for a photo gallery I've decided to use the Categories menu on the far left. I clicked on: Photo and Images, first, then in the resulting list of options, I chose: Photo Gallery (which has 83 results). In this case, what I'm looking for is a gallery option that will allow me to add images and galleries to articles.

Image 1

Using the sigplus Joomla! Extension

Looking through the list, I found sigplus, a non-commerical extension which has 164 votes and 98 reviews. The reviews were overwhelmingly positive and it seemed like this extension was what I was after. You can download the extension as a module or a plugin. I chose to use the plugin.

After downloading it, install the extension by going to Extensions: Install/Uninstall, select the file and click on the Upload File & Install button.

Nex, go to Extensions: Plugin Manager. If the plugin doesn't appear, go to the Filter parameters box and type in sig. This will bring up the Content - Image gallery - sigplus heading. In the Filter parameters box, type in sig and click on Go. When sigplus appears, click on the red "X" under the Enabled heading to enable it.

Module Edit

If you click on sigplus it brings up the following page, where you're able to edit a wide variety of image settings.

Parameters

Note that when you hover your mouse over any of the settings, more information become available on how to use them.

In this section, several settings are enabled by default. Here are a few of them:

Images are stored in the images/stories folder
Gallery Layout: Fixed
Rows: 1
Columns: 1
Maximum Preview Image Count: 0
Preview Image Width: 200
Preview Image Height: 200
Crop When Resizing: Yes

And there are many more settings you can use. How important these are will become apparent when it comes time to insert images into articles.

The easiest type of usage is where you use the following code which you insert into your articles: {gallery}imagefolder{/gallery}. When you do so, the plugin will create a preview of all the images in the stories folder. Here's how it works. In an article, choose a place where you want a gallery and type:

{gallery}fruit{/gallery}

Article

Here's the result. Note that the images are much too big for the frontend, so we'll have to go to the plugin settings and change them. Go to Extensions: Plugin Manager. If the Content - Image gallery - sigplus heading doesn't come up right away, type sig in the Filter parameters box and click on Go. When the file comes up, click on it.

Plugin Parameters

In the Plugin [Edit] page, change the following settings:

Preview Image Width: 100
Preview Image Height: 100
Alignment: left
Lightbox pop-up: none

Save your changes.

Article 2

Refresh the frontend. Now the images fit the article and are left justified. Note that you only see a few images in this example. To see more, use the navigational links. You can change how many images will appear on the frontend and control the type of navigation, image size, lightbox, and much more. For a complete listing of what's available, visit the documentation page.

If you like to use CSS, there are several examples in the documentation which show you how to override the controls within the plugin. To see some examples of galleries, visit the demo page.

About Images and sigplus

Be aware that images with a resolution of 600x800 pixels and larger are not recommended, partly because they take too much time to be displayed. The other issue is sigplus and it could run into memory issues when trying to load large images into memory which it uses to generate previews. There can be other issues as well with pop-up windows which might not resize the images or allow saving the images, either. To learn more, read the section on downloading images on the documentation page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date