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. The Picture User Item includes Lightbox controls if Javascript is enabled in the visitor's browser.

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:

  1. Before you add the Picture User Item, copy the picture file to the Input (-i) folder, or ...
  2. 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.Pictures.Container 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="" title="Mary S. (Graham) Lawrence" shape="rect" coords="66,84,118,156"/>
<area href="p#5453" alt="" title="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 four 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 image only. The properties in the Image Link section are disabled. The browser may resize the image to make it fit in the browser window, but if so, clicking the image will restore it to full size. That behavior is determined by the browser software and its settings.

The Enable Lightbox checkbox is enabled when you choose Thumbnail link to image.
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.

The Enable Lightbox checkbox is enabled when you choose Thumbnail link to page.

Use Site Thumbnail Size

When Use Site Thumbnail Size is checked, the thumbnail width and height are set to 100.

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.

Enable Lightbox

When Enable Lightbox is checked, Lightbox controls will be included if Javascript is enabled in the visitor's browser.

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.

HTML and CSS Information

The following information is intended for advanced users.

The Picture User Item creates HTML in the following form. The bold green text is replaced with values that are specific to the image, "W" for width (in pixels), "H" for height (in pixels), etc.

<div class="spi spileft" style="width:Wpx;";>
 <img src="relative-path" alt="" width="W" height="H">
 <div>caption</div>
</div>

Note that two CSS classes are assigned to the outer DIV, spi and spileft. The second class will vary according to the alignment chosen by the user. The CSS classes are as follows:

Class Description
spi The spi class is the first class assigned to the DIV element that encloses both the image and the caption, if any. The properties of the spi class are modified via the Stylesheets.System.Picture.Container section. The spi class is responsible for the properties that are shared by all images, regardless of alignment, including borders, padding, etc.
spileft The spileft class is assigned to the DIV element that encloses both the image and the caption for images that are floated left. The class includes float: left so that the image floats to the left, and it adds some spacing on the right and bottom to provide white space between the outer DIV and any surrounding text. There is no Stylesheet section for the spileft class, and there is typically no reason to modify it, but you can use it in the selector of a User Style, if desired.
spicenter The spicenter class is assigned to the DIV element that encloses both the image and the caption for images that are centered. The class includes margin settings to center the outer DIV. There is no Stylesheet section for the spicenter class, and there is typically no reason to modify it, but you can use it in the selector of a User Style, if desired.
spiright The spiright class is assigned to the DIV element that encloses both the image and the caption for images that are floated right. The class includes float: right so that the image floats to the right, and it adds some spacing on the left and bottom to provide white space between the outer DIV and any surrounding text. There is no Stylesheet section for the spiright class, and there is typically no reason to modify it, but you can use it in the selector of a User Style, if desired.
Copyright © 2022 by John Cardinal
This page last changed on 02 May 2018.
On This Page

See also: