Adobe Lightroom Tutorial (Part 2) | Build A Successful Web Site

Adobe Lightroom HTML Gallery Tutorial (Part 2)

On 07.03.10, In Adobe Lightroom, HTML Tutorials, by admin

Assuming your read my previous post, I will begin this tutorial by showing you how to link to your images and CSS pages. Open your favorite HTML editor and get ready to start copying and pasting. If you own Adobe Lightroom, you can export your files and change your index.html file. You should change it to “your main web site keyword”, for example “photographs.html” if you do not want it to be the index file for your web site. The index.html file is your home page file if you use SBI! (Site Build It!).

Let’s begin by creating an HTML file and editing the head section. What you can do is either download adobe lightroom gallery and edit the photography.html file in your favorite HTML editor, or copy and paste the HTML in this tutorial into your html editor and edit from there. My comments will not appear when you open the HTML with a browser. They look like this: <!– comment –>. You do not have to delete them if you do not wish to.

After you have downloaded the necessary files, begin by changing photography.html. If your gallery contains pencil drawings, you may wish to rename it pencil-drawings.html.

<!–Scroll down to my next comment. Do not touch this code unless you know what you are doing –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ >
<!– Change the description below. Keep it short –>
<meta name=“description” content=“Lighroom Photography Gallery”
<!– Change the keywords below. Do not forget to add commas between keywords. Do not add a comma after your last keyword –>
<meta name=“keywords” content=“photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom” />
<meta name=“generator” content=“Adobe Photoshop Lightroom” >
<!– Change the title. Make sure it contains your first keyword(s). –>
<title>Lighroom Photography Gallery</title>
<!– The code below has been changed for you –>

cellColor=”#949494″;

</script>
<script type=“text/javascript” src=”support-files/live_update.js“>
</script>
<!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
<!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
<!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
</head>

<!– this is where your head tag ends –>
<body>
<div id=“wrapper_thumb”>
<div id=“sitetitle”>

<!– Change “Photography” below to match your first keyword–><h1 onclick=“clickTarget( this, ‘metadata.siteTitle.value’ );” id=“metadata.siteTitle.value” class=“textColor”>Site Title</h1>

</div>

<!– Change “My Photographs”–>

<h1 onclick=“clickTarget( this, ‘metadata.groupTitle.value’ );” id=“metadata.groupTitle.value” class=“textColor”>My Photographs</h1>

<!– Change “Web Photo Gallery created by Buildasuccessfulwebsite.com”–>

<p onclick=“clickTarget( this, ‘metadata.groupDescription.value’ );” id=“metadata.groupDescription.value” class=“textColor”>Web Photo Gallery created by Buildasuccessfulwebsite.com</p>

</div>

<!– We will worry about creating the HTML files later. So, if you have a picture of a compact disc, and have your picture saved as compact-disc.jpg, have the hyperlink point to ‘compact-disc.html’–>

<!– The class “itemNumber” changes the large number on top of your image–>

<!–Again same link as before (you can copy and paste). Add a title if you would like –>

<!– For landscape photos you will use this code: <div style=”margin-left:15px; margin-top:37px;”> if your photo is portrait you will have this: <div style=”margin-left:31px; margin-top:15px;”>. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>

<!– Now change the link to point to your image file that you made using the first tutorial. Make sure it point to your thumb (smaller image) so that your gallery loads quickly. Edit the alt tag and the height and width depending on whether your image is portrait or landscape. If it is landscape photos leave the height and width the way it is. If it is portrait make sure you change it or you will have a squished photo. For portrait photos the height and width should be: height=”130″ width=”87″ and for landscape the height and width should be about: height=”87″ width=”130″ –>

</div>

</a> </div>
<!– Do the same thing for your next photo. Do not foget any of the links –>
<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’baby.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID46C15679-2928-43ED-8952-3718B29C1A37_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’movement.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’girl.html’”>

<!– Change code –>
<a title=“girl” href=”girl.html” onclick=“return needThumbImgLink;”>
<!– Change code if necessary –>
<div style=“margin-left:15px; margin-top:33px;”>

</div>

</a> </div>

</div>
<!– Change code –>
<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’ball.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID0D17AE79-5375-4226-8159-E9042839C15F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’geranium.html’”>

<!– Change code –>
<a title=“geranium” href=”geranium.html” onclick=“return needThumbImgLink;”>
<!– Change code if necessary –>
<div style=“margin-left:15px; margin-top:37px;”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’glass-house.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hibiscus.html’”>

</div>

</a> </div>

</div>
<!– Change code –>
<div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’interlock.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’lilac.html’”>

<!– Change code if necessary –>
<div style=“margin-left:15px; margin-top:37px;”>

</div>

</a> </div>

<!– Change code –>
<div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID23CE4832-830E-4B5C-92DF-6CE8D1EDF9B0_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’leaves.html’”>

</div>

</a> </div>
<!– Change code –>
<div class=“thumbnail borderTopLeft borderRight borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hook.html’”>

</div>
</div>
</div>
<div class=“clear”>
</div>
<div class=“pagination”>
<ul>
<li class=“current textColor”>1</li>
<!– Place the link to your next gallery page here intead of # if you create more than one –

<li class=“previous textColor”> Previous </li>
<!– Place the link to your next gallery page here if you create more than one –>
<li class=“next textColor”> <a class=“paginationLinks” href=”#“>Next</a> </li>

</ul>

</div>

<!– This starts the contact area, so if you want to delete it start here—>
<div id=“contact”>
<!– Delete or place your email address here –>
<a href=”mailto:user@domain“> <span

class=“textColor” id=“metadata.contactInfo.value”>Contact Name</span>

</a>

</div>
<!– and end here –>
<div class=“clear”>
</div>
</div>

</body>
</html>

The modified Adobe Lightroom Gallery makes:

Your images search engine friendly
Your content search engine friendly
Your web site galleries receive more traffic!

In the next tutorial you will learn how to add search engine friendly pages with the large images you created in the first Adobe Lightroom Tutorial.

<!–Scroll down to my next comment. Do not touch this code unless you know what you are doing –>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<!– Change the description below. Keep it short –>

<!– Change the keywords below. Do not forget to add commas between keywords. Do not add a comma after your last keyword –>

<!– Change the title. Make sure it contains your first keyword(s). –>

<title>Lighroom Photography Gallery</title>
<!– The code below has been changed for you –>
<link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/custom.css” >
<link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/master.css” >
<script type=”text/javascript”>
window.AgMode = “publish”;
cellRolloverColor=”#A1A1A1″;
cellColor=”#949494″;
</script>
<script type=”text/javascript” src=”support-files/live_update.js”>
</script>
<!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
<!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
<!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
</head>
<!– this is where your header section ends –>
<body>
<div id=”wrapper_thumb”>
<div id=”sitetitle”>
<!– Change “Photography” below to match your first keyword–>
<h1 onclick=”clickTarget( this, ‘metadata.siteTitle.value’ );” id=”metadata.siteTitle.value” class=”textColor”>Site Title</h1>
</div>
<div id=”collectionHeader”>
<!– Change “My Photographs”–>
<h1 onclick=”clickTarget( this, ‘metadata.groupTitle.value’ );” id=”metadata.groupTitle.value” class=”textColor”>My Photographs</h1>
<!– Change “Web Photo Gallery created by Buildasuccessfulwebsite.com”–>
<p onclick=”clickTarget( this, ‘metadata.groupDescription.value’ );” id=”metadata.groupDescription.value” class=”textColor”>Web Photo Gallery created by Buildasuccessfulwebsite.com</p>
</div>
<div id=”stage”>
<div id=”index”>
<!– We will worry about creating the HTML files later. So, if you have a picture of a compact disc, and have your picture saved as compact-disc.jpg, have the hyperlink point to ‘compact-disc.html’–>
<div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘ID23A62AEC-2BA2-4FE3-8A58-2A1F90A16D14_thumb’ );” onmouseout=”window.gridOff( this.parentNode );”onclick=”window.location.href=’compact-disc.html’”>
<!– The class “itemNumber” changes the large number on top of your image–>
<div class=”itemNumber”>1</div>
<!–Again same link as before (you can copy and paste). Add a title if you would like–>
<a title=”compact disc” href=”compact-disc.html” onclick=”return needThumbImgLink;”>
<!– For landscape photos you will use this code: <div style=”margin-left:15px; margin-top:37px;”> if your photo is portrait you will have this: <div style=”margin-left:31px; margin-top:15px;”>. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>
<div style=”margin-left:15px; margin-top:37px;”>