Tutorial #4
Incorporating a Lightroom web-gallery into an existing website
Updated: July 2010
Just by clicking a button, Adobe Lightroom (and many other web-gallery software programs) will produce a self-contained web gallery with index pages, photo pages and thumbnails – which saves an immense amount of time compared with doing it manually. The resultant gallery is perfectly adequate except…..if you want to incorporate it seamlessly into an existing website that already has its own style.
The basic problem is that, because it is self-contained, there is a closed-loop of hyper-links that cannot be broken if the integrity of the gallery is to be maintained (i.e. every page links to at least three others and so to change one page means that many others also have to be changed).
A self-contained gallery does have the option to match the background and fonts to match the style of your existing website so you could simply just provide a link from that site to the gallery and a link from the gallery back to your website. But this tutorial assumes that you want the gallery to exist within your site, rather than as a separate addition.
Three methods:There are three methods to achieve this aim. However each method has its pro’s and con’s and it is up to you to decide on which method gives the best aesthetic result compared with the amount of web-authoring skill required.
They are
Method 1 – Total integrationPro’s
Absolutely seamless integration into the existing site
Con’sTime consuming
Requires html coding skills
Not easy to update
In this method, you use Lightroom to produce the entire web gallery – and then you cut & paste the relevant code from each page into a template page from your existing site.
You need to use the code view of your web authoring software (rather than the wyswyg design view) since you don’t want the code contained within the <HEAD> tags copied over.
Open the first page of the web-gallery (which will be called ‘index’) in the code view of your chosen web authoring software.
Look for the tag on the left-hand side that reads: ‘</head>’ (make sure it is the one with an oblique or forward-slash before the word)
Highlight every single line beneath this tag and copy to the clipboard.
Open the template page of your existing website in wyswyg design view and click on the area where you want your gallery to show. Then change to code view.
Look for the flashing cursor and click on it.
Paste the contents of your clipboard at this point.Go back into wyswyg design view and fine-tune the layout.
Save the page with a filename of your choice.
At this point, the gallery layout may show but none of the links or any of the images will show.
Repeat the above for every single page of the gallery.
When complete, you then need to visit every single page again and re-make the links to-and-from the index page(s), to-and-from the preceding and following pages and also add the links to each thumbnail and full sized images.
After an immense amount of time you will have a gallery that is fully incorporated into your site. The only problem now is that each time you add just one image to your website you need to edit at least 4 pages – the index page to add a new thumbnail and link, the images page itself needs to be generated and the preceding and following pages need links to be added.
Method 2 – Embedding the gallery
Note: The latest versions of some browsers (IE8 for example) do not support Java applets and so this method is no longer advisable. Pro’s
Simple and quick
Requires little html coding skills
Easy to update gallery
Con’sLeaves visible scroll bars
Java applets not supported in the latest versions of some browsers
In this method you just ‘embed’ the gallery as produced by Lightroom into an existing web-page template. Once the embedding process is complete, that web-page never needs to be changed. If you add images to your gallery you just simply upload the new gallery to your server.
Make your web gallery using Lightroom changing the background, text, titles, etc. to suit your website's’ style.
Upload the completed gallery to the server.
Open the template page of your existing website in wyswyg design view and click on the area where you want your gallery to show. Then change to code view.
Look for the flashing cursor and click on it. Press ‘enter’ to create a new line.
Type in the following code exactly, changing the source location of your gallery’s index file as appropriate (shown in yellow, below):
<p>
<object data="Gallery/index.html" width="800" height="700" align="top">
<embed src="Gallery/index.html" width="800" height="700" align="top"></embed><embed
src="Gallery/index.html" height="800" width="700">
Error: Embedded data could not be displayed.</object>
</p>
Alternately, some web-authoring software packages allow you to use the design view and insert (or embed) directly. For example, in Dreamweaver, go to ‘Insert’ -> ‘Media’ -> ‘Applet’ and then choose your gallery’s index page. You then need to change the width and height to 800 and 700 respectively.The aesthetic problem with this method is that, no matter what dimensions you set for the embedded page, a set of vertical and horizontal scroll bars are added to the lower edge and right-hand edge of the gallery together with a thin line to the top and left.
Don't worry if, when testing your gallery, Internet Explorer flags up a warning about the embeded script which reads “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options….” - this will not show when the gallery is 'live' on the internet.
To update your gallery all you need to do is use Lightroom to generate a new one and upload it to overwrite the existing one on the server. The embedded script on your web-page will now find the new ‘index’ file and show that instead.
Method 3 – Using frames
Pro’sGood integration into the existing site
Easy to update gallery
Con’sRequires some understanding of the ‘frames’ concept
Frames are ‘frowned-on’ by web professionals because they are not search-engine friendly.
Website frames are, effectively, two or more web pages stitched together to look as one. Therefore, the index page from your self-contained gallery can be attached to an existing menu template to make it look like any other page.
You need to decide on the frame layout that complements your existing web-page style. Three common examples are shown below.
The terminology commonly used is to call the whole page a ‘frameset’, the largest, centre frame (which is going to hold your gallery) “mainframe”, whereas the others are simply called “topframe”, “leftframe”, etc, as appropriate.
Since we know that the “mainframe” is going to hold your gallery’s ‘index’ page, then most of your frameset is already complete.
Now you need to design the other parts of the frame before you ‘stitch’ them together into a frameset.
Open an existing template page which just shows your title and/or menu in the correct font and background colour and then save using a name that reflects its position e.g. ‘menuleft’.
As an example, this is the ‘menuleft.htm’ page for my gallery webpage which will go onto the left-hand side of the frameset:
The same principle applies if you want a title page across the top of your frameset.
So now, assuming we just want a vertical, two-frame frameset, we have both frames ready, a menu page for the leftframe and the gallery’s index page for the mainframe. We now need to make the frameset itself.
Create a new page.
If you are using web-authoring software that can produce frameset pages then you need to look in the documentation to see the exact way in which they are produced.
For example, in Dreamweaver:
Choose ‘insert; -> ‘HTML’, -> ‘Frames’ -> ‘Left’.
This will produce a vertical, two-frame frameset.
Click anywhere in the left hand frame.
Go to ‘File’ -> ‘Open in frame’
Select the page file which is going into this frame, e.g. ‘menuleft.htm’
Click OK
Then hover over the dividing line between the two frames and drag it to give the correct sized frame for its content.
Now click anywhere in the mainframe.
Go to ‘File’ -> ‘Open in frame’
Select the gallery index file which is going into this frame, e.g. ‘Gallery/index.html
Click OK
Now click on the frameset border so that the entire frameset is picked.
Go to ‘File’, -> ‘Save frameset as’.
Call the file ‘gallery’
If you prefer to work in code view or want to check the code, it should be similar to this:
<frameset rows="*" cols="258,*" framespacing="0" frameborder="NO" border="0">
<frame src="menuleft.htm" name="leftFrame" scrolling="NO" noresize>
<frame src=" Gallery/index.html" name="mainFrame">
</frameset>
So now the gallery page should look the same as any other page on your website - but you haven’t quite finished yet. You now need to edit the links from your menu buttons.
Because your ‘menuleft’ page is a web page in its own right, if you click on an existing link it will just open a page replacing the ‘menuleft’ page in the left-hand frame, rather than replacing the entire frameset itself.
What you actually want is for the new page to completely replace both the ‘menuleft’ page AND the ‘index’ page.
So now you need to open the ‘menuleft’ frame and, in turn, edit each link.
Highlight the link (as you would normally to create a link)
In the ‘Properties’ box for that link, find an option with a click-down box called ‘Target’
In the ‘click-down’ box, choose ‘Parent’.
What you are doing here is telling the web-page that when a link is clicked to a new page it will replace the entire frameset (i.e. both frames’ with the new page.
Don’t forget to do this for each and every link on the ‘menuleft’ frame
Save the frame.
Test the frameset thoroughly after uploading it to the server. Check and recheck every link to make sure that they have been edited correctly.
To update your gallery all you need to do is use Lightroom to generate a new one and upload it to overwrite the existing one on the server. The frameset on your web-page will now find the new ‘index’ file and show that instead as the mainframe.
Conclusion
So there we have three different ways of incorporating a Lightroom web gallery into your existing site. The choice of method is, of course, yours but personally I use frames every time – I don’t like the scroll bars and Java applet problem with the ‘embedded’ version and life is too short to manually code every page of my gallery.
Have fun…….
In the next tutorial we will look at a High Dynamic Range (HDR).
If this tutorial was useful to you, please let me know by signing the guestbook. Thanks.
All material on this web-site is copyright
© John Hallett 2008-2010
