Picture

Overview

A Picture is a User Item that adds a picture to a Custom Page. The picture can include a caption, and the picture may be used as a link. The picture may be rendered as a thumbnail (smaller version), and if desired, the thumbnail can be used as a link to the full-size version.

You can see an example picture on the Second Site demonstration site.

When the site is built, the image file must reside in the Input (-i) Folder or a subfolder of the Input Folder. There are two ways to provide the image file for the Picture User Item:

Before you add the Picture User Item, copy the picture file to the Input (-i) folder, or ...
Use the [...] button in the Edit Picture dialog window to select an image file. If the image file is not in or beneath the Input Folder, Second Site will copy the file to the Input Folder.

If you manually copy the image file to the Input Folder, you can place the image file in a subfolder of the Input Folder. Second Site will copy the folder and its contents to the Output Folder.

If Second Site copies the image file to the Input Folder, it will always put the file directly in the Input Folder and not in a subfolder.

On the Custom Page, the picture is enclosed by a DIV element that by default includes a border that also surrounds the picture's caption. The specific style parameters may be adjusted via the Stylesheets.System.Picture Item section.

You can combine multiple Picture User Items to create a small album, or you can combine Picture User Items with other User Items as shown in the following example.

Example

Immigrants
- John Doe
- johndoe
- Short Bio of John Doe
- More Details on John
- Mary McGillicuddy
- marymcg
- Short Bio of Mary McG
- More Details on Mary

The diagram shows a Custom Page named "Immigrants" with eight nested User Items. A set of four User Items (Heading, Picture, Text and Person Link) are combined to describe each of two people, John Doe and Mary McGillicuddy.

Each description begins with a heading and is followed by a picture. The text follows the picture, flowing around the picture (as this text flows around the diagram) if the picture was aligned left or right. Each section ends with a Person Link User Item with the title "More Details on <name>".

Image Maps

The Picture User Item supports image maps specified via ".map" files. You can create a ".map" file for an image using the Edit Image Map feature in TMG Utility. Save the ".map" file in the same folder as the image file.

Second Site supports a special form of the HREF property in image maps. If you enter "p#" followed by the TMG ID of a person in the site, Second Site will transform the HREF into the proper value to open the person page entry for the given person. If you were creating the HTML by hand, it might look like this:

<MAP>
<AREA HREF="p#5452" ALT="Mary S. (Graham) Lawrence" SHAPE=rect
      COORDS="66,84,118,156"/>
<AREA HREF="p#5453" ALT="Solomon Lawrence" SHAPE=rect
      COORDS="263,13,351,111"/>
</MAP>

When processed by Second Site, the MAP element does not need a NAME= parameter. Second Site adds the proper NAME= parameter when it processes the HTML for the page.

Edit Picture

The Edit Picture window controls the properties associated with a Picture User Item.

Image

Choose the desired picture from the Image pull-down menu. The pull-down menu includes all the images that are part of the site including images you add to the Input (-i) folder as well as images that are part of the site's graphics.

Enabled

See Enabled on the User Items page.

Caption and
Use Image's Embedded Caption

The Use Image's Embedded Caption property determines whether the picture's caption is keyed in the Caption textbox or read directly from the image file.

If checked, Second Site will attempt to find an IPTC caption in the image file and use that text as the caption. If an IPTC caption is found, Second Site will show the caption in the Caption textbox, but the textbox background will be gray and the text will not be editable.

If unchecked, which is the default, Second Site will use the contents of the Caption textbox as the caption. The textbox background will be white and the text will be editable.

HTML Title

The HTML Title text determines the contents of the TITLE= parameter on the IMG element in the generated HTML.

Image Alignment

The Image Alignment pull-down menu controls whether the image floats left, is centered, or floats right. When floated left or right, any subsequent content will flow around the picture on the opposite side.

Top Margin

The Top Margin pull-down menu controls the margin assigned to the top of the image. "Standard", the default, adds a "1em" top margin via CSS. ("1em" is the height of one line of text.)

If you choose "None", the top margin is set to zero. This option is useful when the image is at the top of the content area and in other cases where the standard top margin causes a misalignment of the top of the picture and the top of the nearby text.

Clear

See Clear on the User Items page.

Image Thumbnail

If you want to embed a smaller version of the image in place of the actual image, modify the controls in the Image Thumbnail section.

Thumbnail Option

There are 4 options in the Thumbnail Option pull-down menu:

Choice	Explanation
None	The image is not resized. Whether the image is a link or not is controlled by the properties in the Image Link section.
Thumbnail only	The image is resized according to the size controls. Whether the thumbnail image is a link or not is controlled by the properties in the Image Link section.
Thumbnail link to image	The image is resized according to the size controls. Clicking the thumbnail image will open a browser page that shows the full size image only. The properties in the Image Link section are disabled.
Thumbnail link to page	The image is resized according to the size controls. Clicking the thumbnail image will open a browser page that shows the full size image, the image caption (if any), and the standard header and footer, etc. The properties in the Image Link section are disabled.

Choice

Explanation

None

The image is not resized. Whether the image is a link or not is controlled by the properties in the Image Link section.

Thumbnail only

The image is resized according to the size controls. Whether the thumbnail image is a link or not is controlled by the properties in the Image Link section.

Thumbnail link to image

The image is resized according to the size controls. Clicking the thumbnail image will open a browser page that shows the full size image only. The properties in the Image Link section are disabled.

Thumbnail link to page

The image is resized according to the size controls. Clicking the thumbnail image will open a browser page that shows the full size image, the image caption (if any), and the standard header and footer, etc. The properties in the Image Link section are disabled.

Use Site Thumbnail Size

When Use Site Thumbnail Size is checked, the thumbnail width and height are determined by the values set in the Stylesheets.System.Gallery Icons section.

Width and Height

When Use Site Thumbnail Size is not checked, the thumbnail width and height are determined by the Width and Height values.

Regardless of which properties determine the width and height values, the actual thumbnail width and height will be determined by scaling the image such that it maintains its current aspect ratio and is smaller than, or equal to, the specified width and height values.

Image Link

HRef

The HRef text may be used to make the picture a link to the indicated HRef.

Add Target=Top

Add Target=Top is enabled if the HRef textbox is not empty. The default value is unchecked.

If Add Target=Top is checked and Second Site is making a framed site, the link will include a target="_top" parameter so that the destination page will open in the browser's outer-most window rather than in the current frame. This is useful when linking to external sites.