7.2. Using the Photo Gallery Web Component
The photo gallery Web component in SharePoint Designer is a simplified way to design galleries or albums for sharing pictures on Web sites. It offers a wizard-based approach to create photo galleries with captions and other features and provides four layouts that you can use to arrange pictures. To create a photo gallery by using SharePoint Designer, follow these steps:
In the Design view, open the Web page where you want to insert a photo gallery.
Choose Photo Gallery in the list of components and then choose a layout option. You can choose to insert a horizontal, montage, or vertical layout or you can insert a slide show of pictures.
Click Finish. The Photo Gallery Properties dialog box opens, as shown in Figure 7.9. You use this dialog box to choose pictures to be added to the gallery and change the chosen layout for the gallery.
Figure 7.9. The Photo Gallery Properties dialog box
Click the Add button to add pictures from a file location, a scanner, or a camera. You can choose multiple images to be added to the gallery.
If you want to edit the pictures that you just added to the gallery, select a picture and then click the Edit button. This opens the selected picture in the Edit dialog box, where you can resize, crop, or change the direction of the picture.
Choose a picture in the list of pictures in the gallery. Using the Thumbnail size options, specify the size of the thumbnail to be generated for the picture.
Type the caption and description for the picture in the respective boxes. You can also apply font formatting to the caption and description text by using the options provided.
Click the Layout tab to change the layout of the photo gallery. The Layout tab also provides a preview of the layout and allows you to specify the number of picture to be shown in a row.
Like many of the legacy FrontPage components, the photo gallery component is shown in the Code view of the Web page as an HTML comment, which SharePoint Designer uses as a placeholder for rendering the component in the Design view:
<!--Webbot bot="PhotoAlbum" U-Include="photogallery/photo00031001/ real.htm" clientside="" TAG="BODY" -->
However, if you open the same Web page in Notepad, the actual code that's used to implement the photo gallery Web component appears. Here is the sample code of the slide show photo gallery layout as viewed in Notepad by using the Open With 
Notepad option in the SharePoint Designer Folder List task pane:
<!--Webbot bot="PhotoAlbum" U-Include="photogallery/photo00031001/ real.htm" clientside="" TAG="BODY" startspan --> <picture file-href="photogallery/photo00031001/real_p.htm" /> <picture file-href="photogallery/photo00031001/real_x.htm" /> <div align="center"> <center> <layer visibility="hide"> <div style="display:none;" id="fpGalleryCaptions_5306"> <div></div><div></div></div> <div style="display:none;" id="fpGalleryDescriptions_5306"> <div></div><div></div></div> </layer>
<script language="javascript" src="photogallery/photo00031001/
sldshow.js">
<!---->
</script>
<table border="0" cellspacing="0" cellpadding="5" width="700"
dir="ltr">
<tr>
<td nowrap="" align="center">
<layer visibility="hide">
<img border="0" align="middle" src="photogallery/photo00031001/
prevdis.gif" lowsrc="photogallery/photo00031001/prev.gif"
id="fpGalleryLeftBtn_5306" onclick="JavaScript:fp_
ScrollLeft(5306)" width="25" height="29" />
</layer>
<script language="JavaScript1.1">
<!--
if (fp_ie4()) {
document.write("<span align='center' style='width:23
5;overflow:hidden' id='fpGalleryListCell_5306'>");
}
if (fp_ns6()) {
document.getElementById("fpGalleryLeftBtn_5306").
style.visibility="hidden"
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_2349'
],'430','567','5306',0);"><img hspace="10" vspace="5" border="0"
src="photogallery/photo00031001/Figure15.2.JPG" id="fpphoto_2349"
name="fpphoto_2349" lowsrc="Figure15.2.JPG" width="75"
height="100" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3821'
],'17','16','5306',1);"><img hspace="10" vspace="5" border="0"
src="photogallery/photo00031001/test.JPG" id="fpphoto_3821"
name="fpphoto_3821" lowsrc="test.JPG" width="100" height="94"
title="" align="absmiddle" /></a>
<span style="width:0;height:100;visibility:hidden">.</span>
<script language="JavaScript1.1">
<!--
if (fp_ie4()) {
document.write("</span>");
}
-->
</script>
<layer visibility="hide">
<img border="0" align="middle" src="photogallery/photo00031001/
nextdis.gif" lowsrc="photogallery/photo00031001/next.gif"
id="fpGalleryRightBtn_5306" onclick="JavaScript:fp_
ScrollRight(5306)" width="25" height="29"><script language="JavaScript1.1">
if (fp_ns6()) {
document.getElementById("fpGall
eryRightBtn_5306").style.visibility="hidden"
}
</script>
</img>
</layer>
<hr width="95%" size="1" color="#000000" />
</td>
</tr>
</table>
<img id="fpGalleryMainImg_5306" name="fpGalleryMainImg_5306"
width="430" height="567" src="Figure15.2.JPG" title="" />
<layer visibility="hide">
<div id="fpGalleryCaptionCell_5306">
</div>
<div id="fpGalleryDescCell_5306">
</div>
</layer>
</center>
</div>
<!--Webbot bot="PhotoAlbum" i-checksum="3109" endspan -->While you really don't need to understand this code, keep in mind that you shouldn't modify the code by using any other HTML editor or you might be at risk of losing the photo gallery Web component. Also highlighted are the files that form the backbone of the photo gallery component. These files may change depending on the layout that you chose when creating the gallery.
7.2.1. Exploring associated folders and files
After you insert the photo gallery component on the Web page, SharePoint Designer creates a photogallery folder to keep all associated files of the gallery together. Every gallery has a unique folder within this folder. These folders remain even after you delete the gallery from a Web page. Depending on the layout selected for the gallery, the following files are created when you insert a photo gallery on a Web page:
Real_p.htm: Contains the tabular structure that defines the initial look and design of the Web page
Real_x.htm: Contains references to the list of pictures added to the photo gallery component along with the properties (captions, descriptions, etc.) specified for the pictures
Real.htm: Combines the real_p.htm and real_x.htm pages to form the actual layout of the photo gallery component
Sldshow.js: This file has the JavaScript implementation of the slideshow layout of the photo gallery Web component
7.2.2. Modifying the photo gallery properties
After the photo gallery is inserted on a Web page, you can simply right-click on the component and then choose Photo Gallery from the popup menu to open the Photo Gallery Properties dialog box. You can then modify the properties associated with the pictures inside the gallery by using the steps discussed in the previous sections.