How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

Pro Gallery Templates

Overview

Most NextGEN Pro galleries and albums now offer a simple template mechanism that allows you to add simple variations of existing Pro galleries. Here is the process for creating templates:

1) Copy the default template.
2) Rename as temlatename-template.php.
3) Edit the template.
4) Place template in custom ngg folder.
5) Add custom CSS.
6) Select template when adding a gallery.

The rest of this page walks through the details of this process.

 

1) Copy the default template

Each Pro gallery and album type has a default template. To get started, you'll need to copy that template. Here is a quick list of the locations to the default templates for each gallery type:

Pro Thumbnail:
nextgen-gallery-pro/modules/nextgen_pro_thumbnail_grid/templates/nextgen_pro_thumbnail_grid.php

Pro Film
nextgen-gallery-pro/modules/nextgen_pro_film/templates/nextgen_pro_film.php

Pro BlogStyle
nextgen-gallery-pro/modules/nextgen_pro_blog_gallery/templates/nextgen_pro_blog.php

Pro Mosaic
nextgen-gallery-pro/modules/nextgen_pro_mosaic/templates/default.php

Pro Masonry
nextgen-gallery-pro/modules/nextgen_pro_masonry/templates/index.php

Pro Sidescroll
nextgen-gallery-pro/modules/nextgen_pro_sidescroll/templates/nextgen_pro_sidescroll.php

Pro Slideshow
No templates. This is a 100% dynamic, Javascript-based gallery.

Pro Filmstrip
No templates. This is a 100% dynamic, Javascript-based gallery.

 

2) Rename as templatename-template.php

Once you have a copy of the template, rename it using the following format, but replacing 'templatename' with your desired template name.

templatename-template.php

Be sure your file ends with '-template.php', otherwise it will not show up in your list of templates.

 

3) Edit the template

You'll then need to edit your template.

A simple approach is to add a custom CSS class. Templates typically include markup with a div around the gallery. You can add a custom class to that div, and then add custom CSS. The box shadow thumbnail template below uses this approach.

Note you should always preserve the default CSS classes. Add your new ones, but do not remove the existing classes. Often gallery functionality depends on the existing CSS classes.

 

4) Place template in custom ngg folder

Put the new template in the wp-content/ngg/modules/[gallery-type-name]/templates/ folder. By default, NextGEN Gallery creates a 'ngg' folder within the wp-content directory on your website. Within the ngg folder, it creates folders for each NextGEN 'module,' including our gallery display types, and creates a 'templates' folder for each display type. You will place your new template in the relevant 'templates' folder.

For a Pro Thumbnail gallery, you would place the template here:
wp-content/ngg/modules/photocrati-nextgen_pro_thumbnail_grid/templates/

For a Pro Film template, you would place the template here:
wp-content/ngg/modules/photocrati-nextgen_pro_film/templates/

 

5) Add custom CSS

Most templates will requires some associated CSS for styling. You can add this CSS via whatever mechanism you normally use to add custom CSS to your site. Many people, for example, use Jetpack, Simple Custom CSS, or other plugins. You can also add custom CSS via NextGEN Gallery - from your dashboard, go to the Gallery > Other Options > Styles and click 'Show Customziation Options'.

 

6) Select template when adding a gallery

When adding your gallery via NextGEN's Insert Gallery Window, click Customize Settings and look for the Select Template dropdown. This dropdown lists all available templates. Select your template and save.

Any templates we include with the plugin are listed only by their name (templatename-template.php). Any templates added by the user via the wp-content/ngg/ folder are listed with "custom" before them (custom/templatename-template.php).

 

7) Example: Pro Thumbnail template with box shadow

As a simple example, let's now add a simple template for Pro Thumbnail Grid galleries that adds a box shadow around each thumbnail.

Create a copy of the Pro Thumbnail Grid default template above. Rename the file to pro-thumbnail-boxshadow-template.php. On line 2 of the template, add a new 'pro-thumbnail-boxshadow-template'. Change this line:

to

Via FTP, put the new template file into the following location:
wp-content/ngg/modules/photocrati-nextgen_pro_thumbnail_grid/templates/pro-thumbnail-boxshadow-template.php

Add the following custom CSS wherever you put custom CSS on your site.

Now create a new page, open the NextGEN Insert Gallery Window. Select Pro Thumbnail Grid as the display type, and select which gallery or images you'd like to show. Then click Customize Settings, and in the Select Template drop down, select "custom/pro-thumbnail-boxshadow-template.php." Save your gallery.

If you go to the front end, your gallery should now be using the new template and displaying box shadows around the thumbnails.

 

8) Overriding default templates completely

All of the above information is designed to help you add an extra, optional templates to your gallery displays. But you can use a similar approach to completely override the default template. The main difference is that you do not rename the template file. That is, if you put a template file using the same name as the original template into the wp-content/ngg/modules/[gallery-name]/templates/ folder, that template file will be used rather than the original.

To be more specific, say you wanted the box shadows above to appear for all Pro Thumbnail galleries by default. Of course, you could just add that via custom CSS. But you could also do it via a template.

  • Copy the Pro Thumbnail Template
  • Add the new 'pro-thumbnail-boxshadow-template' CSS class as above
  • Save the file WITHOUT RENAMING IT
  • Put the new file here: wp-content/ngg/modules/photocrati-nextgen_pro_thumbnail_grid/templates/nextgen_pro_thumbnail_grid.php

Now all Pro Thumbnail galleries will load using your custom template by default. You do not need to select any template. In essence, you've replaced the default template.

Previous Printlab Payment Gateway Setup
Next Printlab – Manage Orders
Table of Contents
Close Menu