Setting up the J51 GridGallery
This stylish portfolio extension is an ideal solution to showcase site content in to attractive image boxes which can then be linked to further articles within your site.
Install the GridGallery
To install the GridGallery extension simply upload the install package (mod_j51gridgallery.zip) via your Extensions Manager (Extensions -> Extensions Manager). Your GridGallery install package can be found in the same folder of your download as your template.
Once installed you can create a new instance of the module by navigating to Extensions -> Module Manager -> New -> J51_GridGallery. Multiple instances of your GridGallery module, or indeed any module can be achieved by simply repeating this process.
When creating/editing your GridGallery module will find your 'General Settings' tab. This tab contains the main settings for your entire gallery.
- Number of images to display - The number of images that will be displayed in your gallery.
- Randomize images - Randomize the images been displayed. This will randomize the order and also which images if the 'Number of images' field is less than the images sset up in your gallery.
- Image Width - This is the default image width as displayed on a desktop screen size.
- Image Width (Tab Landsape) - This is the width of your gallery images on a tablet mobile device in landscape.
- Image Width (Tab Portrait) - This is the width of your gallery images on a tablet mobile device in portrait.
- Image Width (Mob Landscape) - This is the width of your gallery images on a mobile phone device in landscape.
- Image Width (Mob Portrait) - This is the width of your gallery images on a mobile phone device in portrait.
- Horizontal Margin - This is the horizontal margin in pixels of each image within your gallery.
- Vertical Margin - This is the vertical margin in pixels of each image within your gallery.
- Caption Title Color - The color your image caption title.
- Caption Text Color - The color your image caption text.
Note: As the styling of the GridGallery module may vary from one template release to the next, further settings maybe be available (Eg. Overlay color, border color etc.).
Image Settings (Image ##)
Along with your 'General Settings' tab, you will find a tab for each image within your gallery. There is a total of 15 tabs allowing your gallery to contain a maximum of 15 images. Set the following settings for each image you wish to be displayed in your gallery.
- Select Image - Select the image from your 'Media Manager' to display
- Image Alt Tag - Mainly for SEO purpose, this field allows you to set an 'alt' tag for the image.
- Image Caption Title - Set caption title to display.
- Image Caption Text - Set the caption text to display.
- Disable Caption - Disable/hide the caption and title.
- Linked menu Item - * Select the Joomla menu item to link to.
- Disable Link - Disable the image link
- Open link in new window - Allow the link to open in a new browser window.
- On scroll animation - Add an animate class name to animate the image on scroll.
Fill in an 'Image #' tab for each image you wish to display in your gallery. If you wish to display all the images you have set up it is important to edit the 'Number of Images' field in your 'General Settings' tab to match the number of images you have set up.
*If linking your gallery to articles I would suggest creating a menu specifically for your gallery (Menus -> Menu manager -> Add new menu). Within this menu you can create a menu item for each image within your gallery (Menus -> [YourNewMenu] -> New -> Single Article). This allows you to create menu items for articles that may not be linked to anywhere else in the site.