A new respsonsive gallery similar to this is now available, click here to find out more about the Respsonsive Base Gallery.

Base Gallery Product Page

Find out more about the base gallery, including live demos.

Buy the Gallery

Try the Base Gallery Demo for free

Fully functional demo available (Limited to 6 images on export).

Base Gallery Demo

Gallery requirements & Browser Compatibility

Version 1.7 of the Base Gallery works with Adobe Lightroom 3, 4 & 5 (use version 5 for lightroom 6/CC) on PC & Mac.

Browser Compatibility is listed below;

  • Latest Firefox, Opera, Safari & Chrome
  • Internet Explorer 8+ (IE 8 has reduced styling functionality, as CSS 3 is not supported.)

Downloading & Installing

Getting started...

When you purchase the gallery from the website you should recieve an email with a download link to the gallery. If you do not recieve an email or have issues with the download (for instance, blocked by spam filter or your entered your email address incorrectly). You can log in to your account here and go to the file tab to download your purchase.

Once you have downloaded the gallery please unzip the file. Please see the instructions below on how to install the Lightroom gallery on either Windows or OS X. (The same instructions applies for installing the demo of the gallery.)


Windows Lightroom web plugin installation



Locate the folder which has your version of Lightroom, LR3 or LR4+5 inside this folder copy the folder called

redrexBase.lrwebengine

Paste the folder in to your Lightroom installation path

C:\Users\**YOUR_USERNAME**\AppData\Roaming\Adobe\Lightroom\Web Galleries

Please ensure hidden files are visible in your folder options, to see the above path.

OS X Lightroom web plugin installation




Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/

To navigate the installation path shown above you need to go to the Finder's Go menu, next hold the Option key to make the Library section appear in the menu, so you can go to the next folder in the installation path. Alternatively you can check the 'show library folder' checkbox in the folder settings see the video for more details.

FAQ: I can't see the 'Library' folder

Hold down the Option key on your keyboard, then click the Go menu. The (formerly) invisible Library folder appears in the Go menu, as long as the Option key is pressed.

Updating Base Gallery

To update the base gallery please remove the redrexBase.lrwebengine folder from its installation path and place with the newer version. You will need to restart Lightroom to see any changes. Also update the template files with each update too.

Uninstalling Base Gallery Demo

To remove the demo of the base gallery delete the redrexBaseDemo.lrwebengine folder from the installation path. You will need to restart Lightroom to see any changes. Please note that the demo does not have to be uninstalled to use the full version.

Installing Web Gallery Templates


In Lightroom on the Web section right click on the User Templates in the Template Browser panel. Then click import and select the template files from your download. Templates are now installed to use. For any update please delete the older web template versions and install the new ones in their place.



Web Gallery Settings

This section goes through each input field in the gallery settings panel.

Installing Web Templates

Titles

Page title

Shows in the browser header.

Site title

Gallery title which is displayed in the top right hand corner of the page.


Scripts & Links (Optional)

All the fields in this section are optional features and are not required for the gallery to operate.

Google Analytics (Javascript)

You can integrate Google Analytics tracking in to the gallery by adding your javascript tracking code in this field.

You can obtain the code by creating an account via this link http://www.google.com/analytics/.

Offers you the option of adding javascript tracking code from services such as Google analytics. Make sure you include the tags for the code.

An example of this code is shown below. Do not use this code it will not work as the UA number is not complete. Obtain your code from the Google analytics website.


<script type="text/javascript">
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA******** **']) ; _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.googleanalytics. com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
</script>

Fotomoto (Javascript)

You will require an account to get the required code. Please go to http://www.fotomoto.com and sign up for an account.

When you create a site you will be presented with a Store wizard (see below). On the screen make sure you select the following options under section 4 (Highlighted in red). Under the 'Your sites publish platform' choose the 'I have a custom made website' from the 'Publishing Platform' drop down. On the next drop down menu select 'Galleriffic' for the 'Do you use any libraries'. Now click finish.

Fotomoto

The next page will give you the javascript, copy and paste this code into the Fotomoto field in the Base Gallery in Lightroom.


Fotomoto

You can get this code later if you go to the settings page http://my.fotomoto.com/stores/settings.

The next step is to set up your fotomoto gallery how you like please go to http://support.fotomoto.com/customer/portal/articles/9897iveinstalledfotomotonowwhatfor help on what to do next.

FAQ: Do I have to use Fotomoto?

You do not need to use fotomoto with the gallery. Its an optional feature.

FAQ: Fotomoto buttons do not appear to show

Please check the following points below to help ensure fotomoto works correctly.

  • The gallery needs to be hosted on a web server for Fotomoto to work, it will not show locally on your computer.
  • Make sure the Galleriffic option is selected in the Fotomoto settings panel, as shown in the images above.
  • Once the gallery is uploaded make sure you view all the images in the gallery in a web browser. Then allow up to 24 hours for them to be indexed.

Fotomoto Demo

Fotomoto Demo

A Fotomoto demo is viewable here.

Google Web Font (Link)

Here you can add fonts from the Google web font service https://www.google.com/fonts. They need to be added as a link tag similar to this.

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
Then in the font family fields (found in the appearance section). Add the fonts like this.
'Kavoon', Arial, sansserif

Footer Text

Contact Info & Web or mail link

Field allows you to enter text which is displayed at the bottom right of the page. This can be used with the next field to allow a web or mail link.

Copyright notice

Gives you the option of entering your own copyright notice, which shows on the bottom left.

Identity Plate

Add your Identity Plate to the top left corner of the page and set a Web or Mail link in the field below it.



Installing Web Templates

Gallery Labels

In this panel you can change all of the gallery labels and link buttons. You can use Font Awesome icons to enhance the UI.

Example of implementing a font awsome icon.


<i class="fa fa-camera-retro fa-5x"></i>

View this link to see all the icons available.

Titles and Labels

Please ensure that you do not use HTML mark up in the Title Labels fields, as this will break the galleries code validation. Only use HTML in the Label fields.

Installing Web Templates

Colours

In this section you can adjust the colours of the gallery.

Installing Web Templates

Appearance

Font Families & Sizes

Here you need to add your font choice either from a web safe font or a Google web font. List your fonts in order preference and separate with a comma.

Various font sizes can be adjusted for the Header, Body, Caption Title & description.

Retina Support

This feature enables high resolution images to be created which will be displayed when viewed on high resolution devices such as the retina iPad or iPhone and Nexus 10 tablets. Please note that by enabling this that your gallery size will increase in terms of bandwidth required to view it. If you want mobile users to have a faster viewing experience then disable the feature, however to improve their viewing experience of the image please enable it.

Disable Right Click On Images

By enabling this users will not be able to right click an image and "Save Image As/Copy" an Image.

This gallery shows this feature in action.

Auto play slideshow

Starts slide show as soon as page is opened.

Slide Pause

Time pause for each image in milliseconds.

Transition

Time its takes for image to appear.

Slide Show Control

Hide or show the slideshow controls bar.

Show top pager/Show bottom pager

Controls Thumbnail paging make sure a least one of these are checked if you have more images than the number of thumbs value.

Hide or show gallery nav controls.

Facebook Like Button

Hide/Show button, please be aware this is only visible on a live web server.

redrex recommends www.1and1.co.uk for web hosting services.

Facebook Like URL

The URL you would like your like to link to. Please make sure the URL starts with "http://"




Installing Web Templates

Caption Settings

Caption Opacity

Sets the transparancy of the caption background.

Enable Caption box

Shows the caption box in the gallery.

Enable Caption box toggle (Above must be enabled)

Allows the user to show and hide the caption panel via click the toggle link. Make sure the checkbox is enabled above if you wish this to work correctly.

Caption Toggle Bottom Location (Top if unticked)

Sets the location of the toggle link. If unticked the link will show in the top position above the gallery.

Show Caption box on page load

Caption box will be displayed on initial view of the gallery.

Off set Caption below Main Image

When checked this will put the caption box below the main image. This makes the gallery operate similar to how it did before the 1.7 update.

Centre Thumbs (Landscape)

This option is best for the landscape layout. It centres the thumbnails. Please note this option isn't supported in IE7 and will not show correctly in Lightroom 3 on Windows due to it using IE7 to preview.

Layout Helper (Preview only)

Click this to help you in creating different layouts when editing the gallery sizes. Only shown in Lightroom.

Centre Main Image

Click this to centre the large main image in its panel, works best when the "Main image longest edge size" is set to 1280px.

Show top bar / Show bottom bar

Hide or show line bars.

Render the gallery header which contains the title and logo.

Render the gallery footer which contains the contact link and copyright details.

Installing Web Templates

Main Image Settings

Main Image Height & Main Image Width

The largest value you would like your photos to have in either width or height. Please note that the size of your image may not match this for certain image ratios and if its in landscape or portrait orientation.

Main Image Margin Top

Sets a margin between the top slideshow bar and the main image.

Main Image Border Width

Adjusts the border width for the main image.

Main Image Corner Radius

Allows you to round the borders of the main image. Please note that this will not be visible in preview mode of Lightroom in Windows, due the IE 7/8 limitations. Example of rounded corners can be see here.

Main Image Holder Height

Adjust this to the maximum height of your photos, also leave a little extra if you are using fotomoto to fit in the links.

Main image Margin Right

Margin right for the main image.

Thumb Image Settings

Thumb Size

Size of the thumbnails. Between 50 and 100 pixels.

Thumbs Panel Width

Width of the panel which contains the thumbnails.

Thumbs Panel Margin Left

Lets you adjust the left margin of the thumbs panel.

Number of Thumbs

Amount of thumbs rendered in the gallery.

Thumbs margin

Margin adjustment on a thumbnail image.

Number of pages listed

Amount of pages listed in the pagination. To Learn more on how these gallery settings work try using the different templates included in the download and see how the settings work.

Show Thumbs

Enables the displaying of the thumbs.

Thumb crop position x & y

Repositions the cropping of the thumb images in the x and y coordinates. Zero starts at the top left hand corner.

Thumb Borders

Allows you to enable borders for the thumbnails. Here you can also set the colour, width, corner radius and pagination corner radius.

Installing Web Templates

Image Info

Labels

This section allows you to define what information is displayed in the caption section.

Installing Web Templates

Output Settings

For the quality setting you may want to consider a balance between image size and quality. As this will improve load times of your gallery.

Known Issues/Limitations

Windows preview in lightroom

Lightroom uses Internet Explorer 8(IE8) browser to render its preview, if you change your default browser to another, for example Firefox, IE8 will still be used. Due to this HTML5 and CSS3 spec features will not render correctly as they are not featured in this browser, for example the rounded corners on the thumbnails and paging. If you click on "Export" or "Preview in Browser" and view your gallery in a modern browser (IE9+) then all features will be working. Mac users will not have this issue as the most recent version of safari browser is used by Lightroom to render its preview.

Lightroom Crashes when adding a Watermark for certain photos

This issue occurs if you choose to watermark an image which has a large ratio difference such as 2500 x 500 pixels and you choose to have large index and gallery thumbnails. To solve this issue you can reduce the thumbnail size of both index and gallery thumbnails, normally anything below 170pxs will resolve it. Or another option is to export your images with the watermark from the library section and then reimport them and add them to your web gallery, this would enable you to have larger thumbnails. This issue is a limitation of Lightroom cropping the thumbnails, to make them square, which causes the crash and not a problem with the redrex base web gallery.

Facebook like button not displaying locally

The Facebook like button will not be visible on the Lightroom preview or the local file view. To enable the button to display you need to have the gallery hosted on a live web server. redrex recommends www.1and1.co.uk for web hosting solutions.

Incorrect rendering

If you encounter the gallery updating not working correctly make sure that Lightroom has finished creating the photos and make another edit to get the gallery to update correctly, this usually happens when making large galleries.

Contact

If you come across any issues while using the gallery please contact us at support@plugins.redrex.co.uk, please make sure that your issue is one of those stated in the Issues section above.

Upon purchase, free download or trial of a redrex Photography product you are granted a nontransferable license to use purchased or downloaded plugins, web galleries, develop presets and templates subject to the terms & restrictions stated below.

You are free to install and use redrex Photography plugins, web galleries, develop presets and templates on up to 2 computers owned by yourself. To install redrex Photography plugins, web galleries, develop presets and templates on a number of computers exceeding two, additional licenses are required to be purchased.

You are not licensed to reverseengineer, distribute, clone, copy, modify or alter in any way the licensed software without the specific approval of redrex Photography, or if written in product documentation, or in tutorials published by redrex Photography. jQuery and the Galleriffic plugin, are third party plugins and hold their MIT Licenses respectfully.

You are allowed to make your own alternations as desired to exported HTML pages, CSS stylesheets, JavaScript and image files only.

All exported galleries can be published on any domain owned by yourself. If you wish to publish galleries on domains not owned by yourself, a new purchase is required from the domain owner.

DISCLAIMER OF WARRANTIES: YOU AGREE THAT REDREX PHOTOGRAPHY HAS MADE NO EXPRESS WARRANTIES TO YOU REGARDING THE SOFTWARE AND THAT THE SOFTWARE IS BEING PROVIDED TO YOU "AS IS" WITHOUT WARRANTY OF ANY KIND. ADOBE DISCLAIMS ALL WARRANTIES WITH REGARD TO THE SOFTWARE; EXPRESS OR IMPLIED; INCLUDING; WITHOUT LIMITATION; ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE; MERCHANTABILITY; MERCHANTABLE QUALITY OR NONINFRINGEMENT OF THIRD PARTY RIGHTS. LIMIT OF LIABILITY: IN NO EVENT WILL REDREX PHOTOGRAPHY BE LIABLE TO YOU FOR ANY LOSS OF USE; INTERRUPTION OF BUSINESS; OR ANY DIRECT; INDIRECT; SPECIAL; INCIDENTAL; OR CONSEQUENTIAL DAMAGES OF ANY KIND (INCLUDING LOST PROFITS) REGARDLESS OF THE FORM OF ACTION WHETHER IN CONTRACT; TORT (INCLUDING NEGLIGENCE); STRICT PRODUCT LIABILITY OR OTHERWISE; EVEN IF REDREX PHOTOGRAPHY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

All logos and trademarks are the property of the respective trademark owners.

Updated: 19/02/2014