gallerygallery

introductionintroduction

Plumbago Photography
Plumbago Photography

The Gallery Extension has been designed to render a gallery exactly like the internal Gallery CE (content element), but adds advanced features.

The extension allows you to create Gallery Collections (Archives). In each Gallery Collection, you can then have multiple Galleries. Each Gallery is created as a group of images typically a folder, or individual files. The gallery can then be displayed in the front-end as thumbnails, with media-box pop-ups to zoom-up each image (you can also use the optional dfGallery).

What sets the Gallery Extension apart is that it adds many advanced features. Firstly, you can link a gallery collection to any number of page(s), associate an artist member group, change the default sort ordering, RSS feeds, comments and of course searchable (just like News, Events, FAQ).

Galleries also have advanced features. You can now either manage individual artwork pieces or photo items with a single poster image or you can add an additional multiple-image gallery. This allows you to both show galleries with single photos or create photo galleries. You can also display a poster image in the gallery list view and even optionally add the entire gallery items.

Galleries capture a lot of additional information (optional) to describe the piece of artwork, photograph, or any other visual design item. In fact if you added a cart, you could turn this into a visual store system.

Extension Repository

backendbackendgallerygalleryarchivearchivesetupsetup

Configure the Archive

Gallery Archive List
Gallery Archive List

To start, you first need to create a Gallery Archive. This provides a container for permissions and to allow you to list them and/or associate the collection to one or more pages.

Once you have the Gallery Archive setup, you will see it in the list view (see image). We will now go through the details of the archive settings.

Title, Filter, Artist Groups

Gallery Basic Info
Gallery Basic Info

In the first section you can enter the Title, Description and also the Redirect page where the gallery viewer module is located (when clicked on in the gallery list view).

Then you can enter the sort mode for the back-end, e.g. manual, date (asc, desc) or title.

You can also set the auto-page filter, so that you can use a single module to automatically filter, depending on the page it is on. This is useful if you have categories and you want to show multiple categories on a page. This also makes it easier to setup the site. Just setup the pages, associate those pages with the galleries and you're done.

You can then also setup the artist group, which is used to filter the artists drop-down when you edit a gallery.

Comments

Gallery Comments
Gallery Comments

You can also enable Comments for the whole gallery and control the setup here. This is identical to the standard way that comments is setup for News, Events, etc. Settings like notify, layout, sort order, comments per page, moderation, bbcode, login and disabling the security question.

Protection

Gallery Protection
Gallery Protection

You can also assign a member group to each gallery archive, so that only members when they are logged in from these groups will be able to see the galleries. Great for artists and photographers providing a preview or paid service.

RSS Feed

Gallery Feed
Gallery Feed

RSS Feeds can be activated to enable your galleries to be syndicated to other websites. This would be similar to a Flick Feed.


backendbackendgallerygallerysetupsetup

Galleries

Gallery List
Gallery List

Once you have saved a gallery collection, you will see the gallery collection list (above). If you click edit, you will be able to add new galleries.

The galleries will be displayed in a list in the BE with the artist/photographer, artwork size and poster image by default.

Title, Description and Info

Gallery Basic Info
Gallery Basic Info

In the first section you can enter the Title, Alias, Author, Location and Description.

There are also additional fields (optional) to capture information like status, date, artist/photographer member, artwork size, medium, substrate. These additional fields will be rendered as clickable filters in the front-end. 

Poster image, Gallery images

Gallery Images
Gallery Images

Now it's time to select the image and settings. First up is the poster image. This image is both used in the back-end to show a small thumbnail (for easy entry identification) and in the front-end for showing a small thumbnail of the gallery in a list view. The poster image is similar to a News story's "add image" feature. You can also setup the width and height, cropping and fullsize here. 

Then it's time to setup the actual gallery. If you are planning to only show single items, then the poster image will be sufficient, otherwise setup your gallery. The gallery contains a list of images (folder or individually selected files), control of the width and height, image margins, thumbnails per row, items per page, sort order (including random) and full size view. These are standard CE Gallery settings that you may be familiar with.

CSS, Feature, Publish

Gallery Images
Gallery Images

In the expert settings, you can optionally specify a CSS class for this gallery, disable comments and flag as featured gallery, which you can use to highlight galleries in a feature block at the top of your site.

You can also control the published, start and stop settings. the start and stop are always very useful to show an event gallery only up and to a specific date, e.g. marketing contract expired.


backendbackendlistlistmodulemodulesetupsetup

Gallery List

List Module
List Module

The Gallery List Module allows you to list in a similar way to news items.

You select which archives can be viewed and then you can modify the total, featured, per page, skip and sort order settings.

Filters

Filters
Filters

In this section you can add two types of filters. The first is a user-filter which displays the filter and it's value as a user-clickable filter. This allows the user to quickly just click on specific filters.

The second (longer) section, allows you to easily pre-filter the list to restrict the items, e.g. show only sold items, items in acrylic or items on paper. If you select a pre-filter here, it will automatically remove this filter from the user-filter (since it won't work anymore).

Meta, Poster image

Meta, Poster image
Meta, Poster image

In the first part of the Template settings, you can choose which meta fields to output to the template. If you don't tick it here, it will not be available as a template variable.

You should use the gal_short.tpl or (gal_default.tpl) template edit your own copy in /templates.

You can also setup the poster image overrides for size and full-size.

Access, Expert settings

Expert Settings
Access, Expert settings

The last two sections behave pretty much like any module in Contao. You can setup access protection for member groups, and there are additional settings for guest, CSS ID/class and spacing.


backendbackendlist bylist bypagepagemodulemodulesetupsetup

This module is virtually identical to the Gallery List Module, except that you don't have to choose any archives. The module will detect which page it's on, check through all the gallery archives to see if any of them match the current page and automatically show that gallery. This makes it very useful, as you can create 1 module and add that to a layout. Then you control the gallery assignment directly in the gallery archive settings, rather then having many modules each filtering for a specific archive assigned to a specific page.

backendbackendviewerviewermodulemodulesetupsetup

Thie Gallery Viewer module, is almost identical to the Gallery List module, except there are no filter settings, since they don't apply to viewing a single gallery.

You should use the gal_fullsize.tpl or (gal_dfGallery.tpl if you're using DF Gallery) template edit your own copy in /templates.

backendbackendsinglesinglemodulemodulesetupsetup

The Gallery Single module allows you to create a listing of 1 gallery item. This seems a bit pointless on its own, but now becomes powerful with the creation of an inserttag reference to use it.

{­{insert_gallery::ID:MID}­}

where ID is the gallery ID, and MID is the module ID of the Gallery Single Module. Basically, it loads the configuration of the Gallery Single Module, then re-assigns its module ID to the one you specified and then renders that into the inserttag output.

gallerygalleryexamplesexamples

Plumbago

Plumbago Photography uses a customised version of the Gallery. It makes poster images also galleries. This was needed to accommodate their image cross-fader wide shots which appear above the galler thumbnails. The Gallery thumbnails were also placed inside a mootools scroller to smoothly scroll from 1 page to the next, without reloading.

More

Delaney Artist

James Delaney wanted to showcase their artwork, and to enable this advanced filtering and categories, we wrote the new gallery version to accommodate his needs.

More

Vision IT

James Delaney wanted to showcase their artwork, and to enable this advanced filtering and categories, we wrote the new gallery version to accommodate his needs.

More

Commune de Broc

Another implementation on the Commune de Broc site.

More