Creating Photo Galleries
Contents
- 1 Creating Photo Galleries
- 2 About Photo Galleries
- 3 Adding a Photo Gallery
- 4 Working with Photos
- 5 Opening the Photo Gallery Properties Editor
- 6 Adding and Editing Photo Titles and Captions on the Photo Page
- 6.1 Formatting Photo Titles
- 6.2 Formatting All Photo Titles
- 6.3 Formatting an Individual Photo Title
- 6.4 Formatting Photo Captions
- 6.5 Formatting All Photo Captions
- 6.6 Formatting an Individual Photo Caption
- 6.7 Formatting Photo Thumbnail Titles
- 6.8 Formatting All Thumbnail Titles
- 6.9 Formatting an Individual Thumbnail Title
- 7 Controlling Download Time
- 7.1 Saving Output Settings
- 7.2 Adding Alt Tags
- 7.3 Formatting the Thumbnail Page
- 7.4 Creating a Text Link to a Photo Gallery
- 7.5 Selecting a Thumbnail Template
- 7.6 Formatting the Photo Pages
- 7.7 Displaying Photo Pages as Pop-Up Windows
- 7.8 Selecting a Photo Page Layout
- 7.9 Selecting a Photo Frame Template
- 7.10 Navigating Between Photo Pages
- 7.11 Setting Up Navigation for Site Visitors
- 8 Saving a Photo Gallery Profile
- 9 Removing a Photo Gallery
Creating Photo Galleries
Using the Photo Gallery tool, you can quickly create sophisticated Web photo albums. You assemble your digital images, add captions and descriptions, and choose from an assortment of high-quality thumbnail and photo frames. Your images look great on the Web and download quickly.
About Photo Galleries
Each photo gallery you add to your site includes two types of pages a thumbnail page and photo pages.
- The thumbnail page shows a small image of each photo in the gallery displayed in a template that you select. Site visitors click a thumbnail image to see the photo page.
- Each photo page displays a large version of the image. You can add and format a title and description for the photo.
When you add a photo gallery object to the thumbnail page, NetObjects Fusion automatically adds the photo page for you. On the Site Navigation panel, the photo page is as a single icon that contains multiple pages.
Adding a Photo Gallery
You can create a new photo gallery or add an existing photo gallery to your site. You can duplicate an existing gallery or add galleries that you removed from the site. See Removing a Photo Gallery.
You add the photo gallery object to the page where you want to display thumbnail images of the photos in the gallery. You can add a new page or use an existing page.
Creating a New Photo Gallery
- In Page view, display the page where you want to place the photo gallery object.
This is the page where the thumbnail images appear.
- Choose the Photo Gallery tool from the Advanced Toolbox and click in the upper left corner of the Layout area.
Start in the upper left corner to allow as much space as possible for the thumbnail images.
The Add Photo Gallery dialog appears.
Current photo galleries and photo galleries that were added to the site and then removed are listed in the Insert an existing Photo Gallery section at the bottom of the dialog. If no other galleries were created, you do not see this list.
- Type a name for the new photo gallery.
NetObjects Fusion uses the name you enter as the name of the photo page. This name appears in the banner at the top of each photo page. You can rename the page in Site view just as you rename any other page, or you can display the photo title in the banner or edit the text on the Banner Properties panel. Renaming Pages, Selecting a Photo Page Layout, or Changing the Banner Text.
You cannot use the name of an existing photo gallery.
- Choose a Profile
NetObjects Fusion allows you to reuse settings each time you add a new photo gallery. You may choose a profile containing all information associated with an existing photo gallery, or choose Default to create a new profile. See Saving a Photo Gallery Profile
Current profiles and profiles of photo galleries that were added to the site and then removed are included in the Create a new Photo Gallery section at the topof the dialog. If no other profiles were created, you can only choose Default. - Click OK.
- Display the designated thumbnail page in Page view.
- Choose the Photo Gallery tool from the Advanced Toolbox and click in the upper left corner of the Layout area.
- Select Insert an existing Photo Gallery.
- Select the gallery you want to insert and click OK.
- Open the Photo Gallery Properties Editor. You can:
- Add a photo gallery by following the steps in Adding a Photo Gallery .
- Double-click a photo on a thumbnail page or a photo page.
- Click Add.
- Navigate to the folder containing the photos you want to add to the gallery.
- Select the photos for the gallery. You can:
- Click a single photo to select it.
- Press Shift+Click or Ctrl+Click to select multiple photos.
- Press Ctrl+A to select all photos in the folder.
- Select "Use file name for title" to automatically populate the title field in the properties editor. If you select to use the file name for the title option, the image extension will be excluded from the title.
- Click Add.
- Click the image you want to replace to open the Photo Gallery Properties Editor.
- Click Modify.
- In the Open dialog, navigate to the image you want to use.
- Click Add to close the dialog box and update the image.
- Display the thumbnail page in Page view.
- Click the image you want to move and drag it to a new position.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Images tab.
- In the File Name column:
- Select a photo and drag it into a new position in the list.
- An indicator displays as you move the photo.
- Select a photo and click Move Up or Move Down to shift it into the proper position.
- In Page view, display the thumbnail page or the photo page of the gallery you want to work with.
- Click an image.
- Resize the image.
- To change the image size by dragging, select the image and drag the small white box until the image is the size you want.
- To change the image size by dragging the slider on the properties panel:
- To change the image size by entering the width directly in the Thumbnail Properties panel, type a number in the Width field.
- Apply the change.
- If you are on the thumbnail page, click Apply to all to resize all thumbnail images.
- If you are on a photo page, click Apply to resize only the current photo or Apply to all to resize all photos in the gallery.
- In Page view, display the thumbnail page of the gallery.
- Select the image you want to remove and press Delete.
- In Page view, display the photo page containing the photo you want to remove from the gallery.
- Click the Delete button on the views bar.
- Click Yes to confirm deletion.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Images tab.
- In the File Name column, select a photo and click Remove.
- If you double-click a photo on a thumbnail page or photo page, the editor opens showing the Images tab with the photo you clicked selected.
- If you double-click a thumbnail frame, the editor opens showing the Thumbnail Page tab.
- If you double-click a photo frame, the editor opens showing the Photo Page tab.
- If you click the Configure button on the Photo Gallery Properties panel on the thumbnail page, the editor opens to the Thumbnail Page tab.
- If you click the Configure button on the Photo Gallery Properties panel on a photo page, the editor opens to the Photo Page tab.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Images tab.
- Select a photo in the File Name column.
- Click in the Title text field and type the title for the photo.
- Click in the Caption field and type text that describes the photo. If you do not want to add a caption, skip this step.
- Click another photo in the File Name list to continue adding titles and captions, or click Done to close the editor.
- In Page view, display the thumbnail page of the gallery you want to work with.
- Click in the blue border at the bottom of the thumbnail image and type the title text.
- In Page view, display the photo page you want to work with.
- Click in the blue bordered title text field and type the title text.
- Click in the blue bordered caption text field and type the caption text.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Photo Page tab.
- Click Format Title.
- Set the text format. See Formatting Text.
- In Page view, display a photo page.
- Click the Next button on the views bar until the photo you want to work on appears.
- Select all or part of the title text.
- Use the options on the Format tab of the Title Properties panel to format the text. See Formatting Text.
- In Page view, display a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Photo Page tab.
- Click Format Caption.
- Set the text format. See Formatting Text.
- In Page view, display a photo page.
- Click the Next button on the views bar until the photo you want to work on appears.
- Select all or part of the caption text.
- Use the options on the Format tab of the Captions Properties panel to format the text. See Formatting Text.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Thumbnail Page tab.
- Click Format Title.
- Set the text format. See Formatting Text.
- In Page view, display the thumbnail page you want to work with.
- Click in a title text field.
- Use the options on the Format tab of the Title Properties panel to format the text. See Formatting Text.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Images tab.
- Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
- Select the File type.
- Set the Quality and Percent.
- Set the Quality field first. Each setting corresponds to a range of percents. Low corresponds to 0-39%, Medium to 40-75%, High to 76-99%, and Maximum to 100%.
- Use the Percent field to fine-tune the quality setting.
- Select a download speed.
- To apply these settings to all the photos in the gallery, click Apply to All.
- Set image rotation. This setting affects only the selected image.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Galleries Property Editor.
- Display the Images tab.
- Click the Photo Images tab at the bottom of the Images tab. This option is not available for thumbnail images.
- Choose Use Original Image from the Output Settings menu.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Select a thumbnail or photo image.
- Resize the image. See Resizing Photos .
As you resize, the Properties panel shows the effect on the file size. - In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Images tab. The output settings for the thumbnail images and the photo images are separate.
- Click the thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
- Click on the Output Settings menu and choose Save Setting. Note that a change must be made to the default settings in order to create a new setting.
- Type a name for the new output setting.
- Edit File Type, Quality and Percent, if necessary.
- Click OK.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Galley Properties Editor.
- Display the Images tab.
- Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
- In the Alt tag field, type in the text you would like your site visitors to see.
- A text link that visitors click to see the first photo.
- Thumbnail size renderings of each photo in the gallery so site visitors have access to individual photos.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Thumbnail Page tab.
- In the Format section of the tab, select Text link.
- In the text field, type the text you want to link. The default is the gallery name. The text link appears on the thumbnail page in the format set by the SiteStyle for linked text. See Editing the Text Elements of SiteStyles. If you use a text link, you can place additional objects on the thumbnail page.
- Click the Photo Page tab to continue formatting, or click Done to close the editor.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Thumbnail Page tab.
- In the Format section of the tab, select Thumbnails.
- Select a template from the drop-down list.
- Set the template options.
- Specify the number of columns you want to include on the thumbnail page.
- Continue formatting or click Done to close the editor.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Photo Page tab.
- Click the "Open in a Pop-Up Window" check box.
- Select a Pop-Up Window target from the Name drop-down list or click Add to create a new Pop-Up Window target. See Setting Pop-up Window Targets.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Photo Page tab.
- In the Layout section of the tab, select a layout.
- To replace the banner text on each page with the title of the photo, select Display title in browser.
- Continue formatting or click Done to close the editor.
- In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Display the Photo Page tab.
- In the Photo Frame section of the tab, select a template from the drop-down list.
- Set the frame options.
- Continue formatting or click Done to close the editor.
- In Page view, display the photo page of the gallery you want to work with.
- Use the Previous and Next buttons on the views bar to move from photo to photo.
- Photo image output.
- Thumbnail image output.
- Thumbnail page settings (including format, template, style and columns).
- Photo page settings (including layout, text attributes. title in banner, template and style.
- In Page view, display the thumbnail page or photo page of the gallery you want to work with.
- Open the Photo Gallery Properties Editor.
- Click Save Profile.
- Type a name for the new profile.
- Click OK.
- In Page view, display the thumbnail page of the gallery you want to remove.
- Select the photo gallery object and delete it.
- Go to Site view.
- Delete the photo page associated with the gallery.
- Go to Assets view.
- Select the Data Objects tab.
- Select the photo gallery you want to delete.
- Press Delete.
Inserting an Existing Photo Gallery
Start in the upper left corner to allow as much space as possible for the thumbnail images.
The Add Photo Gallery dialog appears.
Available photo galleries are listed in the Insert an existing Photo Gallery section at the bottom of the dialog.
Working with Photos
NetObjects Fusion creates two copies of each image file one for the thumbnail page and one for the photo page. These copies are published when you publish the site; the files are generally much smaller than the original image file. NetObjects Fusion does not change your original image file.
The photo gallery is designed to work best with digital photos. However, you can use scanned photos as well. When scanning, make sure you make the scan larger than necessary.
Adding Photos
You add photos on the Images tab of the Photo Gallery Properties Editor. If you have just added a photo gallery, the Photo Gallery Editor will appear and you may skip step 1.
The Photo Gallery Properties Editor appears, displaying the Images tab.
The Open dialog appears.
The photos you select are listed in the File Name column on the Images tab.
Replacing Photos
You can easily update a photo gallery by quickly replacing images in the Photo Gallery Properties editor.
Arranging Photos
Photos are listed in the File Name column on the Images tab of the Photo Gallery Properties Editor in the order in which you add them to the gallery. This is also the order in which they appear on the photo pages. If you select several files from a folder, they appear in alphabetical order. This is probably not the order in which you want to display the photos, so you must rearrange them.
You can rearrange the photos on the Images tab of the Photo Gallery Properties Editor, or directly on the thumbnail page. If you do this on the thumbnail page, you can see the images as you arrange them. This is useful if your photos do not have meaningful file names, for example 01.jpg, 02.jpg.
Dragging Photos on the Thumbnail Page
A red indicator shows where the image will be placed.
If your gallery has many photos, they will be easier to organize if you can see all the images in Page view without scrolling. To see as many images as possible, reduce the size of the thumbnail, select a template that has a thin frame (for example, Simple border), and increase the number of columns. When the images are organized as you want them, select the template you want to use, change the number of columns, and then resize the thumbnails. See Resizing Photos and Formatting the Thumbnail Page.
Moving Photos on the Images Tab
Resizing Photos
You can increase or decrease the size of the thumbnail images or the size of an individual photo page image or all the photo page images. NetObjects Fusion retains the image's proportions when you resize.
Some templates do not allow the photos to be resized. If you want to resize photos, you must select another template.
To resize photos:
The Photo Properties panel appears.
You can change the image size by dragging the slider on the properties panel, by entering the width directly in the properties panel, or by dragging the image.
When you release the mouse button, the image is resized. If you are on the thumbnail page, all images are resized.
Drag the slider on the properties panel to the right to increase the image size, or to the left to decrease the size. A dotted line rectangle increases or decreases proportionally as you drag and the size of the image is displayed in a Screen Tip.
When the image is the size you want, release the mouse button.
Removing Photos
You can remove photos from the gallery on the thumbnail page, on the photo page, or on the Images tab of the Photo Gallery Properties Editor.
Removing a Thumbnail
Removing a Photo Page
Removing Photos from the Images Tab
Click Remove All to remove all photos from the gallery.
Opening the Photo Gallery Properties Editor
The tab you see when you open the Photo Gallery Properties Editor depends on how you open it.
Adding and Editing Photo Titles and Captions
A title and descriptive caption help site visitors enjoy your photos. You can add this text on the Images tab of the Photo Gallery Properties Editor or directly on the page that features the photo. If the selected thumbnail template shows the photo title, you can add it on the thumbnail page.
Adding and Editing Photo Titles and Captions on the Images Tab
Try to make your title descriptive, but brief.
Text you type here appears on the photo page and at the bottom of the thumbnail image if the selected template includes the photo title.
Text you type here appears on the photo page.
To edit existing text, click in the text field and make changes. Be aware that if you formatted some or all of the text on the photo page, the formatting will be lost if you modify the text on the Images tab of the Photo Gallery Properties Editor.
For information about formatting the title and caption text, see Formatting Photo Titles and Formatting Photo Captions.
Adding and Editing Photo Titles on the Thumbnail Page
If the selected thumbnail template accommodates a photo title, you can enter it directly on the thumbnail page.
To edit existing text, click in the text field and make changes.
For information about formatting the title text, see Formatting Photo Titles and Formatting Photo Captions.
Adding and Editing Photo Titles and Captions on the Photo Page
To edit existing text, click in the text field and make changes.
For information about formatting the title and caption text, see Formatting Photo Titles and Formatting Photo Captions.
Formatting Photo Titles
You can format all the titles at once from the Photo Page tab of the Photo Gallery Properties Editor, or format individual titles on the individual photo pages.
If you specify formats and they do not appear in the text, it could be caused by the text style definitions, usually the definition of the Body and Normal(P) tags in the SiteStyle. For example, if the Body tag defines the font size, that definition overrides any font size you specify in the Object Format dialog. You can get around this by choosing a SiteStyle that does not define the property you want to set, or by formatting the individual photo titles. See Formatting an Individual Photo Title. Any individual text you format overrides the SiteStyle definitions.
Formatting All Photo Titles
The Object Format dialog appears.
Formatting an Individual Photo Title
You can apply formatting to all or part of the title text. For example, you can make a single word bold for emphasis. Formatting you apply here is also reflected in the title text on the thumbnail page.
Formatting Photo Captions
You can format all the captions at once from the Photo Page tab of the Photo Gallery Properties Editor, or format individual captions on the individual photo pages.
If you specify formats and they do not appear in the text, it could be caused by the text style definitions, usually the definition of the Body and Normal(P) tags in the SiteStyle. For example, if the Body tag defines the font size, that definition overrides any font size you specify in the Object Format dialog. You can get around this by choosing a SiteStyle that does not define the property you want to set, or by formatting the individual photo titles. See Formatting an Individual Photo Caption. Any individual text you format overrides the SiteStyle definitions.
Formatting All Photo Captions
The Object format dialog appears.
Formatting an Individual Photo Caption
You can apply formatting to all or part of the caption text. For example, you can make a single word bold for emphasis.
Formatting Photo Thumbnail Titles
If the selected thumbnail template includes a photo title, you can format the title of all the photos at once from the Thumbnail Page tab of the Photo Gallery Properties Editor, or you can format individual titles from the thumbnail page.
If you specify formats and they do not appear in the text, it could be caused by the text style definitions, usually the definition of the Body and Normal(P) tags in the SiteStyle. For example, if the Body tag defines the font size, that definition overrides any font size you specify in the Object Format dialog. You can get around this by choosing a SiteStyle that does not define the property you want to set, or by formatting the individual photo titles. See Formatting an Individual Thumbnail Title. Any individual text you format overrides the SiteStyle definitions.
Formatting All Thumbnail Titles
Formatting an Individual Thumbnail Title
You can apply formatting to all or part of the title text. For example, you can make a single word bold for emphasis. Formatting you apply here is also reflected in the title text on the photo page.
Controlling Download Time
When you configure a photo gallery, be considerate of site visitors by minimizing the time it takes for the images to download. Image quality and size both affect download time. You can use the output settings in the Photo Gallery Properties Editor and the file size information on the properties panel to keep track of and adjust download time while maintaining image quality.
To control the image format:
The output settings for thumbnail images and the photo images are separate.
On these tabs you set the quality of the thumbnail and photo images for the selected file. As you make changes, NetObjects Fusion displays the approximate download time for the file.
You may choose to save and apply previously defined settings. See Saving Output Settings.
Most photos will be JPEG format.
These fields both affect image quality. 100% is the highest quality, 0% the lowest quality.
As you adjust the settings, the image in the Preview field changes. If the Preview image is scaled down, you can close the editor and check image quality in Page Design view.
The most common download time is 56.6.
This affects all thumbnail images or all photo images, depending on the selected tab.
To display images in their original form
You may not edit output settings if Original Image Settings are chosen. If you select Original Image on the photos tab, frames that have fixed width cannot be used. You may change the Photo Frame to one that does not have a fixed width (ex. Simple Border) or choose to revert to the previous image setting.
To control the image sizes:
Notice the image size on the properties panel.
If you selected a thumbnail image, you can choose to see the size of the current image or of all thumbnail images.
Saving Output Settings
To save your output settings:
Adding Alt Tags
Adding Alt tags is an easy way to give text descriptions to your photos and help visitors that do not have images loaded or are browsing using text-based browsers. Also, using Alt tags is a great way to make sure search engines recognize all content on your site. You can add Alt tags on both the Thumbnail Image and Photo Image tabs.
To add Alt tags:
Formatting the Thumbnail Page
On the thumbnail page, you determine how site visitors enter the photo gallery. You can set up:
Creating a Text Link to a Photo Gallery
You can set up a single text link that site visitors click to enter the photo gallery. This takes visitors to the first photo in the gallery. They then use the gallery navigation buttons to move between pages in the gallery.
Selecting a Thumbnail Template
To give site visitors direct access to each photo in the gallery, you can display a small version of each photo on the thumbnail page. NetObjects Fusion provides a variety of thumbnail templates that you can use to format these images; for example, one template looks like a film strip and another like 35mm slides.
Options associated with the selected template appear. For example, the slide template includes Style and Cell spacing, as well as the option to include and format photo titles.
Information about the template and when to use it appear next to the preview window.
For example, if you have 7 photos in the gallery and set Columns to 4, your thumbnail page will have two rows of four pictures each.
Formatting the Photo Pages
NetObjects Fusion makes it easy for you to give the photo gallery professional polish. You can choose from a variety of layouts for the photo and its descriptive text and select a frame that complements your SiteStyle. The format options you select apply to all photo pages.
Displaying Photo Pages as Pop-Up Windows
You can display the Photo Pages in browser windows or as pop-up windows.
To display the Photo Pages as pop-ups:
The Pop-Up Window link fields will become active.
If you edit an existing Pop-Up Window, all links using that Pop-Up Window will be affected. To create Pop-Up Windows for Photo Pages only, click Add to create new Pop-Up Window targets.
Selecting a Photo Page Layout
In the samples, the boxes with an X represent the photo, the bold line is the title text, and the text block is the caption.
If you select this option, be sure to select a layout that does not have a title.
Selecting a Photo Frame Template
Options associated with the selected template appear. Information about the template and when to use it appear next to the preview window.
The first photo in the gallery appears.
NetObjects Fusion automatically inserts navigation buttons with smart links on the photo pages. Site visitors can use these buttons to go to the next and previous photo pages and to return to the thumbnail page.
The images used for these buttons SPNavLeft.gif, SPNavRight.gif, and SPNavUp.gif are in the NetObjects\NetObjects Fusion\NetObjects System folder.
If you do not want to use these buttons, you can delete them and set up your own smart links between pages. See Adding Navigation Buttons to Stacked Pages.
Saving a Photo Gallery Profile
NetObjects Fusion allows you to save the settings associated with your newly created photo gallery so it can be the basis for the next photo gallery created.
When you save a profile, you save the:
To save a profile:
Note that the output settings displayed at the time you save your profile will be stored in your profile will be stored in your profile. These output settings will apply to all images created with this profile in the new gallery.
If you choose the name of an existing profile, it will replace the existing profile.
Not all settings are saved in your profile. Rotation, records associated with photos (such as path, caption and title) and Thumbnail page text links are not included in a saved profile.
Removing a Photo Gallery
When you add a new photo gallery, the name of the gallery you just removed still appears in the Insert an existing Photo Gallery list in the Add Photo Gallery dialog.
To delete a photo gallery completely from your site: