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.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.
- John Doe
- Short Bio of John Doe
- More Details on John
- Mary McGillicuddy
- 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>".
The thumbnail will also include a "go to" icon to open the page associated with the image if one of the link options is enabled.
See the Image Gallery page for an explanation of the icons used with the lightbox feature.
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.
The Edit Picture window controls the properties associated with a Picture User Item.
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.
See Enabled on the User Items page.
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.
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.
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.
See Clear on the User Items page.
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.
There are four options in the Thumbnail Option pull-down menu:
|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.
The HRef text may be used to make the picture a link to the indicated HRef.
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:
|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.|
This page last changed on 12 Apr 2013.