TTG Highslide Gallery
TTG Highslide Gallery represents the next step in the evolution of Lightroom web engines from The Turning Gate. It’s more flexible and more robust than any other TTG offering, incorporates a number of new features requested by TTG users during the past two years, and is powered by Torstein Hønsi’s magnificent Highslide JS, one of the most feature-rich and powerful image presentation engines available.
And rather than trying to teach an old gallery new tricks, TTG Highslide Gallery is comprised of entirely new code, built from the ground up for the sole purpose of being completely awesome. TTG Highslide Gallery’s long list of features include:
- Highslide JS driven viewing of large images.
- New, super-flexible page header with an all new look!
- Unlimited menu items.
- By popular demand, menus can be set to left, right or center alignment.
- Search Engine Optimization features.
- Fully customizable colors and appearance.
- Three gallery modes — Proofing, Slideshow and Inline Slideshow — making TTG Highslide Gallery three galleries in one!
- Enlarge multiple images in Proofing mode for side-by-side comparison.
- In all modes, image scaling to ensure that over-large images fit to the visitor’s browser window.
- Full styling options for the gallery description.
- Automatic color labeling from your Library (optional).
- BoxOver tool tips on thumbnails and other gallery components (optional).
- Selection gallery features for client proofing.
- Form-to-Email powered delivery for proofing feedback.
- A set of “Developer Options” making it easier than ever to integrate TTG Highslide Gallery into existing site designs.
- TTG Auto Index support.
- Web-standards compliant XHTML and CSS.
TTG Highslide Gallery
TTG Highslide Gallery Pro is also available, offering all the features of TTG Highslide Gallery, plus a myriad options for selling images from your galleries.
Download Demo * Forum Thread Installation
Slideshow Mode Sample Proofing Mode Sample
Inline Slideshow Mode Sample Colorful Sample
* The Demo is fully functional, but will export only 10 images.
About Your Purchase
Upon purchasing TTG Highslide Gallery Pro, you will receive a download URL valid for nine uses or 352 days (1 year) — whichever comes first. After nine uses or one year, your URL will expire and a new purchase will be necessary to continue with updates. Gallery updates will always be available from that same URL. Thus, the URL can be used for the initial download, plus eight updates within a year of your purchase. Be sure to save your URL in a safe place, as it cannot be retrieved if lost. If you have trouble receiving your URL after purchase, please ensure 1) that your payment has cleared with PayPal, and 2) that messages from E-Junkie.com are not being caught in your spam filter.
Requirements
TTG Highslide Gallery 1.x requires Lightroom 2.3 or above.
The Form-to-Email script requires a web server running PHP and supporting the PHP mail() function.
Windows users should have installed Internet Explorer 7 or above, regardless of what is used as a primary browser.
HighSlide Licensing
TTG Highslide Gallery relies heavily upon Torstein Hønsi’s HighSlide. HighSlide is not free for commercial use. Please read the HighSlide licensing information before using TTG Highslide Gallery.
TTG Highslide + TTG Pages
TTG Highslide Gallery and TTG Pages make great companions. Use TTG Pages to build your website with a Home page, About page, Gallery Index and Contact page. Use TTG Highslide Gallery to create your image galleries. It’s the whole deal. By default, the menus are already setup to work together, so there’s no need to fuss with URLs. Just export your Highslide galleries, drop them into the /galleries/ folder created by TTG Pages and put it all online. It doesn’t get any easier!
Form-to-Email Setup
In order for the form submission to reach you, the photographer, the form-to-email script needs to be configured.
First, configure and export your gallery from the Lightroom Web module, as usual.
Next, open the FormToEmail.php file in a text-editor. Locate “Step 2″ on line 83, and follow the instructions you find there, setting your email address and, optionally, a continuation address to which users will be redirected after form submission.
Rather than editing the PHP file for each exported gallery, users might prefer to edit the FormToEmail.php in the template archive. Then, each exported gallery will already be configured for your address.
Isolating Selections in Lightroom
Submitted selections are easy to isolate in Lightroom’s Library module, provided you’ve been savvy in naming your source files.
When Lightroom generates a web gallery, it renames the image files, replacing spaces and special characters with underscores. To get the most out of the selection gallery, Your source files and the web gallery image files should have identical names.
To accomplish this, avoid spaces and special characters when naming your files; use underscores where separation is necessary. Example filenames might look like 20070108Identifier001.jpg or 20070108_Identifier_001.jpg.
If your files are named correctly, the filenames of the exported web gallery images will not be changed. These filenames will then be submitted to your email by the FormToEmail script in a comma separated list.
In the Lightroom Library module, access the Find pane. Set Text to either “Anywhere” or “Filename”. Set Rule to “Contains Any”. Copy and paste the filenames from the email into the search field. The selected images will be isolated in the grid, allowing your to color code them, create a collection, or otherwise separate them for further consideration, processing or output.
The podcast demonstrates this visually.
See also my article on Filenaming Conventions.
Troubleshooting
A minority of LR/Windows users have reported application freezes when using TTG Highslide Gallery. Version 1.3+ includes a Windows Safe-Mode feature. If you are among those experiencing freezes when attempting to load TTG Highslide Gallery or TTG Highslide Gallery Pro, please install the “Safe-Mode” .lrtemplte file included with your download by copying it into the Web Templates folder. Use this template to load the engine from the Template Browser, and DO NOT load it from the Engines list.
While in Safe-Mode, Highslide functionality is disabled. You will be able to configure other elements on the page and see them in the LR preview. To check Highslide functionality, you will need to launch the gallery using Lightroom’s “Preview In Browser” feature, accessible from the Web menu. Exported galleries and galleries being Preview[ed] in Browser will be fully functional.
The freezing problem arises from Internet Explorer’s jerky nature. LR/Mac users should not experience freezing problems.
Changelog
- v1.9.4 ( 2010-01-31 )
- Fixes critical bug causing unresponsiveness of engine in LR2/Win.
- v1.9.3 ( 2010-01-25 )
- Fixed a Javascript error.
- Added separate hyperlink color options for captions, located in the Caption Extras controls.
- Added
onDimmerClickoption to Slideshow Mode; controls where or not large images close when the dimmer area is clicked during a slideshow. - Changed handling of Google Analytics. Now requires only your Web Property ID (UA-xxxxxx-x), rather than the entire block of Javascript.
- Because scripts can no longer be cheated into the Google Analytics entry field as before, I’ve added a new Advanced Options control group to the Output Settings control pane. There are three input fields: Add CSS rules in , Add script to and Add script before . CSS rules are visible in preview, while the scripts are only added when the gallery is published (exported, or previewed in browser) to prevent any possible Lightroom tantrums.
- Added a new
#wrapperDIV to the source code that allows for new custom styling possibilities. - Source code for Lightroom’s preview onclick events now prevented from exporting, resulting in cleaner code that IE8 should no longer bitch about.
- Some tweaks under the hood.
- v1.9.2 ( 2010-01-10 )
- Cooliris Title and Description now have dedicated controls in the Image Info pane.
- Cooliris links now take advantage of the new permalink support for images.
- Fixed a bug that slipped into the menu in 1.9.1.
- v1.9.1 ( 2010-01-05 )
- Added permalink support for accessing specific images via URL, e.g. http://www.domain.com/gallery/?autoload=Image_Filename. When writing URLs, do not include the image file extension; use ‘image’, not ‘image.jpg’.
- New “Caption Extras” control area for adding Download Image and Permalink hyperlinks to image captions. This is a revision and expansion of the “Download Image” control area added in v1.9.
- New option to position the header/identity plate beneath the menu.
- New
border-bottomoptions for the header/identity plate. - New
text-decorationoptions for Hyperlinks and Menu Links. - Increased large image-size range to a maximum 15,000 pixels.
- Fixed bug in Cooliris captions; now takes IPTC data source from
<img alt=in the Image Info control pane. - UI changes.
- v1.9 ( 2009-12-11 )
- Added “Download Image” links; not an e-commerce option.
- Added a favicon.
- Slideshow mode dimming slider now has a minimum value of 0 and a maximum of 100, owing to new underlying math that allows these values to work.
- Fixed a newly discovered bug affecting background-color of North/South Inline Slideshow layouts.
- Revised value ranges for thumbnail size and fixed width header sliders.
- v1.8 ( 2009-11-03 )
- Updated to Highslide JS 4.1.8.
- Fixed border for Gallery Description image; was inadvertently broken from 1.6 update.
- More improvements and fixes to Inline Slideshow mode.
- Added an Inline Slideshow, West layout option.
- Added control sliders for Tooltip font-size and width.
- Increased maximum number of images allowed per single gallery; limit now set at 10,000 images (I do not recommend creating galleries so large).
- UI Changes: Swapped location of ID Plate settings with Header/Page Settings; seems to make better sense in regard to workflow.
- Structural optimizations.
- Tested various configurations for XHTML validation. All configurations should now validate XHTML/Strict, except PayPal Shopping Carts, which validate XHTML/Transitional.
- v1.7 (2009-10-06)
- Taking a cue from Timothy Armes, font stack presets are now built in, though font stacks remain user editable.
- Reorganized controls to better facilitate top-to-bottom workflow in creating gallery; lots moved, but nothing missing.
- Javascript enhancements.
- Selection counter text can now be customized using three input fields for “image”, “s” and “selected”.
- Updated Highslide JS to version 4.1.7.
- Slideshow buttons can now be styled.
- v1.6 (2009-09-11)
- Menu Items now preset for use with TTG Pages 3.0.
- Updated contact form to be more consistent with features introduced in TTG Pages 3.0.
- Added some new styling options and tweaked some CSS for consistency with TTG Pages 3.0.
- New templates to match those provided in TTG Pages 3.0.
- Fixed CSS bug affecting particular header configurations.
- Fixed IE8 bug in check-box counter.
- Lost the divider line in the gallery description as it just didn’t seem to fit the design, and caused bizarre spacing issues when made “invisible”. I hope no one misses it, but shout at me if you do.
- v1.51 (2009-08-27)
- Form-to-Email Remote support.
- UI changes.
- CSS improvements and fixes.
- v1.5 (2009-08-19)
- Slideshow mode: Actual Size (1:1) button can now be disabled.
- Slideshow mode: Architectural changes made to slideshow buttons to allow Actual Size button removal.
- Slideshow and Proofing modes: Option to set caption alignment justify, left, right or center.
- Fixed some Fotomoto CSS conflicts.
- Round corner options for on-page box elements; only shows in web browsers supporting CSS3 corners.
- Replaced Mootools Javascript library with JQuery.
- New JQuery checkbox replacement for selection galleries.
- New JQuery checkbox counter, for tallying and displaying the number of images “checked” in a selection gallery.
- New JQuery elastic textarea for selection gallery comments form.
- Fixed some validation errors that crept in during updates.
- Minor UI adjustments.
- v1.41 (2009-08-09)
- Improved form validation for Selection Gallery.
- Fixed form compatibility for Form-to-Email Pro.
- Improved handling/protection of Highslide license.
- Fixed bug that prevented text customization for ‘Close’ button in Slideshow mode.
- Package includes a modified Form-to-Email script and readme file for use on Yahoo Small Business accounts.
- v1.4 (2009-07-26)
- New Selection gallery form: all new code, additional styling options, Telephone and Website fields (optional), custom field labels; form validation (Name, Email and Telephone are required fields, Website optional).
- Optional Close button corner overlay in Slideshow and Proofing modes.
- Option to make caption background transparent.
- v1.3 (2009-07-23)
- New Outline-Type options.
- Added “Windows Safe-Mode” feature, intended to help the minority of Windows users experiencing lock-ups when using TTG Highslide Gallery.
- New option to select Character Set for the page. Should help with displaying non-English alphabet characters.
- Added ability to change labels for slideshow controls.
- Gallery Description (title, subtitle and paragraphs) and Footer can now be edited by clicking on text in the preview window.
- UI improvements.
- v1.2 (2009-07-16)
- Updated to Highslide 4.1.5.
- XHTML/Strict validation improvements.
- SEO tweaks.
- Select checkboxes can now default to “All Checked”.
- Fixed a Shared Resources issue with inline slideshow mode icons.
- Added option to use an external source for Highslide language strings. Edit hs_lang.html in the template to configure translation strings.
- Inline Slideshow overhaul.
- New layout options for Inline Slideshow mode.
- Gallery Description Image is now specified manually, by path to image file.
- Image ID plate border width in thumbnail grid now controlled by thumbnail frame border slider, so that frames and plates match.
- v1.11 (2009-06-10)
- Fixed bugs affecting galleries with shared resources.
- Default typography string changed: ‘Lucida Grande’, ‘Trebuchet MS’, Helvetica, Verdana, Geneva, Tahoma, Arial, sans-serif.
- Miscellaneous tweaks.
- v1.1 (2009-06-06)
- Cooliris support.
- Google Analytics support.
- Additional tweaks to the Shared Resources option.
- /resources/ folder no longer created on export when “Set Path to Shared Resources” is enabled.
- Javascript tweaks.
- Added option “Fix Header Width”.
- Added options “Menu Padding Left” and “Menu Padding Right”.
- Added Menu option “Text-Decoration”.
- Back-end architectural changes.
- v1.01 (2009-05-24)
- Fixed a small Javascript error that might have affected Windows users.
- v1.0 (2009-05-23)
- Initial release.
{ 6 trackbacks }
{ 229 comments… read them below or add one }
← Previous Comments
…ok thanks a lot…the button has a bad place to be realize.
….another issue. I can’t find the checkbox dialog for customer proofing in the TTG highslide gallery….
In the Appearance control pane, Selection Gallery features.
Hi!
I bought this one and still use it to build my galleries. I Have a question though.
When hovering over an image a text displays how the controls work (\use arrowkeys etc..\) How to change the language ?
Regards,
Timo
In the .lrwebengine package, there is a file named hs_lang.html. This file contains all of the strings for that text. You will need to edit the file for your language and save it. In Lightroom, located “Highslide Options” in the Color Palette control pane and enable the check-box for Use External Language File.
I cannot figure out how to get the \Download Image\ feature to work. After selecting the \Links in Caption\ feature to \Download Only\ nothing changes in the web page display. I could see the path entered into the \Download Image Location\ within the generated HTML page, but the actual folder was not created (e.g. \photos/highres/\)
I must be missing something. I searched and couldn’t find any instructions. Check out my site to see how I’ve constructed my pages.
How do I get the option for the user to download the high-res file to appear?
You need to create the downloadable images folder yourself. This is stated quite clearly in the control pane, in orange text within the Downloadable Images controls:
Hi-Res images should be exported separately;the web engine will not do this for you. Please
specify the location of your downloadable images:
You need to set the “Links in Caption” option to one of the settings that includes Download Links.
I’ve even done this in the past, but something changed in the software and now I’m unable to get this to work.
> stated quite clearly in the control pane
I realize I have to create the images myself. The question is about the location on the web site. Is the path I specify prefixed by the path of the web page containing the gallery, or is the path absolute? In other words, if the gallery is /gallery and I want the downloadable images to be within that directory, do I specify /gallery/here or just /here?
With some testing, I could figure this out but it’s really not made clear by the orange text (and I wish there was a manual).
> You need to set the “Links in Caption” option to one of the settings that includes Download Links.
Yes, that’s what I did (as I had said in my original post). The question I have remains. After setting “Links in Caption” nothing changes on the web page. No links appear to download the images.
Sorry for my confusion. I’ve tried everything I could think of. I’ve searched everywhere for instructions, but I’m still not able to make this work. Please, what – exactly – are the steps necessary to create a gallery that allows the user to download the high-res images?
Hi Jim,
I often use the default values for a field in order to establish precedent for input, and such is the case for the download path. The default value is
photos/, which should imply a relative URL using the gallery as a base. By default, the download link points to the large rendition images used in the gallery.But, if you’d like, you can also use an absolute URL with
http://. I try to keep similar items uniform throughout the gallery, and so you should treat this URL in the same way as the menu URLs.So, if you want the hi-res images in your
galleriesfolder, you could either write and absolute URL, or you could do it relatively../hires_images.I would recommend putting the images into the gallery folder, though.
The options are not available to the Inline Slideshow mode, but should work in either the Slideshow or Proofing modes. Which are you using?
Ah ha! I figured out the problem. I think this is a bug.
My caption background is white. I discovered the Download Link Text was also white, as was the Hover color. This meant I could never see where the link was appearing.
BTW it recall it used to at the bottom left of the thumb, and after searching the HTML text files I found it was moved to inside the rendered image (seen only *after* you click on the thumb).
The confusion seems to be what controls the color of the Download Link Text. It is NOT the Hyperlink Color & Hover settings that appear in the Caption Extras section! BTW I couldn’t determine what these setting actually control. And since the appear immediately below the Links in Caption option, I assumed they actually did control the text.
The Download Link Text is actually being determined in an entirely different section, the Header/Page Settings. In there it is the Hyperlinks & Hover settings that control the Download Link Text colors and decoration.
If you’re using 1.9.4, then the default hyperlink color for captions should be black, and I assure your the hyperlink color controls in the Caption Extras section are the ones to use.
If you’re not using 1.9.4, then you need to update.
> hyperlink color controls in the Caption Extras section are the ones to use
I beg to differ. Steps to reproduce what I’m seeing…
Install 1.9.4
Dismiss Licensing notice
Go to the Captions Extras section
Set Links in Caption to Download Only
Change Hyperlink Color to RED
Click on thumb in gallery to open rendered image
NOTE – text is not RED
While rendered image is open, do the following…
Go to the Header/Page Settings section within the Site Info panel
Change the Hyperlink color to BLUE
NOTE – Download Link Text changes to BLUE
Change the Hyperlink Text-Decoration to Underline in Header/Page Settings
NOTE – Download Link Text changes to Underline
I’m seeing the Header/Page Setting controls the Links in Caption text, but I’m not seeing any change (to anything) when selecting the color within the Captions Extras section.
Seems like something is broken to me. Color options in Captions Extras do not affect the Download Link Text. The only method I find that affect it is within the Site Info panel, Header/Page Settings section for Hyperlinks.
Matt—
in the Client Select gallery, I know the form requires that the name and address fields be filled out, but there doesn’t seem to be anything that requires they actually select any thumbnails. Is there an easy way to add that in?
love your software as I use it on my mac, but occassionally I do have to use PCs (yuk!). I have LR 2.6 installed on XP, and have purchased this past weekend, and downloaded TTG Pages, TTG Auto Index, and TTG Highslide Gallery Pro. As I said they seem to work fine on my Mac, but on XP whenever I click on either the engines or the templates LR freezes and I have to ctrl-alt-delete to shut the program down. In the LR base templates and web engines, this is not a problem……..please help, its driving me crazy!
Cheers, Terry
Hi Terry,
You should be able to launch TTG Highslide Gallery using one of the included “safe-mode” templates from the Template Browser. Safe-mode templates have never been needed by TTG Pages or TTG Auto Index, though. Are these also causing LR to become nonresponsive?
same problem….cant even select the safe mode template browser w/o it freezing LR.
please confirm that I can use the same download URL that I received upon my purchases for both mac and PC? If that is not possible (which I would like to hope that it is) then could this be the issue that the original download of the TTG products was for my mac and now I want to use the same URLs for PC XP?
Mac or PC, doesn’t matter.
What versions of Lightroom and Internet Explorer are you running?
I am using LR 2.6 build 632038, with Firefox 3.5.7
LR 2.6 is fine, but I asked about IE for a reason. Firefox is irrelevant.
← Previous Comments