Creating Photo Galleries

From Documentation
Revision as of 19:51, 3 October 2014 by Adam (Talk | contribs) (Controlling Download Time)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

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

  1. In Page view, display the page where you want to place the photo gallery object.

This is the page where the thumbnail images appear.

  1. 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.

  1. 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.

  1. 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.
  2. Click OK.
  3. Inserting an Existing Photo Gallery

    1. Display the designated thumbnail page in Page view.
    2. 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.

    Available photo galleries are listed in the Insert an existing Photo Gallery section at the bottom of the dialog.

    1. Select Insert an existing Photo Gallery.
    2. Select the gallery you want to insert and click OK.

    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.

    1. 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.

    The Photo Gallery Properties Editor appears, displaying the Images tab.

    1. Click Add.

    The Open dialog appears.

    1. Navigate to the folder containing the photos you want to add to the gallery.
    2. 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.
    1. Click Add.

    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.

    1. Click the image you want to replace to open the Photo Gallery Properties Editor.
    2. Click Modify.
    3. In the Open dialog, navigate to the image you want to use.
    4. Click Add to close the dialog box and update the image.

    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

    1. Display the thumbnail page in Page view.
    2. Click the image you want to move and drag it to a new position.

    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

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Images tab.
    4. 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.

    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:

    1. In Page view, display the thumbnail page or the photo page of the gallery you want to work with.
    2. Click an image.

    The Photo Properties panel appears.

    1. Resize the image.

    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.

    • To change the image size by dragging, select the image and drag the small white box until the image is the size you want.

    When you release the mouse button, the image is resized. If you are on the thumbnail page, all images are resized.

    • To change the image size by dragging the slider on the properties panel:

    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.

    • To change the image size by entering the width directly in the Thumbnail Properties panel, type a number in the Width field.
    1. 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.

    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

    1. In Page view, display the thumbnail page of the gallery.
    2. Select the image you want to remove and press Delete.

    Removing a Photo Page

    1. In Page view, display the photo page containing the photo you want to remove from the gallery.
    2. Click the Delete button on the views bar.
    3. Click Yes to confirm deletion.

    Removing Photos from the Images Tab

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Images tab.
    4. In the File Name column, select a photo and click Remove.

    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.

    • 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.

    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

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Images tab.
    4. Select a photo in the File Name column.
    5. Click in the Title text field and type the title for the photo.

    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.

    1. Click in the Caption field and type text that describes the photo. If you do not want to add a caption, skip this step.

    Text you type here appears on the photo page.

    1. Click another photo in the File Name list to continue adding titles and captions, or click Done to close the editor.

    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.

    1. In Page view, display the thumbnail page of the gallery you want to work with.
    2. Click in the blue border at the bottom of the thumbnail image and type the title text.

    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

    1. In Page view, display the photo page you want to work with.
    2. Click in the blue bordered title text field and type the title text.
    3. Click in the blue bordered caption text field and type the caption text.

    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

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Photo Page tab.
    4. Click Format Title.

    The Object Format dialog appears.

    1. Set the text format. See Formatting Text.

    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.

    1. In Page view, display a photo page.
    2. Click the Next button on the views bar until the photo you want to work on appears.
    3. Select all or part of the title text.
    4. Use the options on the Format tab of the Title Properties panel to format the text. See Formatting Text.

    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

    1. In Page view, display a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Photo Page tab.
    4. Click Format Caption.

    The Object format dialog appears.

    1. Set the text format. See Formatting Text.

    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.

    1. In Page view, display a photo page.
    2. Click the Next button on the views bar until the photo you want to work on appears.
    3. Select all or part of the caption text.
    4. Use the options on the Format tab of the Captions Properties panel to format the text. See Formatting Text.

    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

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Thumbnail Page tab.
    4. Click Format Title.
    5. Set the text format. See Formatting Text.

    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.

    1. In Page view, display the thumbnail page you want to work with.
    2. Click in a title text field.
    3. Use the options on the Format tab of the Title Properties panel to format the text. See Formatting Text.

    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:

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Images tab.

    The output settings for thumbnail images and the photo images are separate.

    1. Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images tab.

    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.

    1. Select the File type.

    Most photos will be JPEG format.

    1. Set the Quality and Percent.

    These fields both affect image quality. 100% is the highest quality, 0% the lowest quality.

    • 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.

    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.

    1. Select a download speed.

    The most common download time is 56.6.

    1. To apply these settings to all the photos in the gallery, click Apply to All.

    This affects all thumbnail images or all photo images, depending on the selected tab.

    1. Set image rotation. This setting affects only the selected image.

    To display images in their original form

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Galleries Property Editor.
    3. Display the Images tab.
    4. Click the Photo Images tab at the bottom of the Images tab. This option is not available for thumbnail images.
    5. Choose Use Original Image from the Output Settings menu.

    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:

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Select a thumbnail or photo image.

    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.

    1. Resize the image. See Resizing Photos .
      As you resize, the Properties panel shows the effect on the file size.

    Saving Output Settings

    To save your output settings:

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Images tab. The output settings for the thumbnail images and the photo images are separate.
    4. Click the thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
    5. 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.
    6. Type a name for the new output setting.
    7. Edit File Type, Quality and Percent, if necessary.
    8. Click OK.

    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:

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Galley Properties Editor.
    3. Display the Images tab.
    4. Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
    5. In the Alt tag field, type in the text you would like your site visitors to see.

    Formatting the Thumbnail Page

    On the thumbnail page, you determine how site visitors enter the photo gallery. You can set up:

    • 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.

    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.

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Thumbnail Page tab.
    4. In the Format section of the tab, select Text link.
    5. 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.
    6. Click the Photo Page tab to continue formatting, or click Done to close the editor.

    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.

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Thumbnail Page tab.
    4. In the Format section of the tab, select Thumbnails.
    5. Select a template from the drop-down list.

    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.

    1. Set the template options.
    2. Specify the number of columns you want to include on the thumbnail page.

    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.

    1. Continue formatting or click Done to close the editor.

    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:

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Photo Page tab.
    4. Click the "Open in a Pop-Up Window" check box.

    The Pop-Up Window link fields will become active.

    1. 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.

    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

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Photo Page tab.
    4. In the Layout section of the tab, select a 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.

    1. To replace the banner text on each page with the title of the photo, select Display title in browser.

    If you select this option, be sure to select a layout that does not have a title.

    1. Continue formatting or click Done to close the editor.

    Selecting a Photo Frame Template

    1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Display the Photo Page tab.
    4. In the Photo Frame section of the tab, select a template from the drop-down list.

    Options associated with the selected template appear. Information about the template and when to use it appear next to the preview window.

    1. Set the frame options.
    2. Continue formatting or click Done to close the editor.

    Navigating Between Photo Pages

    1. In Page view, display the photo page of the gallery you want to work with.

    The first photo in the gallery appears.

    1. Use the Previous and Next buttons on the views bar to move from photo to photo.

    Setting Up Navigation for Site Visitors

    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:

    • 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.

    To save a profile:

    1. In Page view, display the thumbnail page or photo page of the gallery you want to work with.
    2. Open the Photo Gallery Properties Editor.
    3. Click Save 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.

    1. Type a name for the new profile.

    If you choose the name of an existing profile, it will replace the existing profile.

    1. Click OK.

    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

    1. In Page view, display the thumbnail page of the gallery you want to remove.
    2. Select the photo gallery object and delete it.
    3. Go to Site view.
    4. Delete the photo page associated with the 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:

    1. Go to Assets view.
    2. Select the Data Objects tab.
    3. Select the photo gallery you want to delete.
    4. Press Delete.
    You can delete a photo gallery only if you have first removed it from your site as described above.