Page Layout & Edit Layout Image Commands

This tutorial provides examples of the various ways the IMAGE command and the HTMLEDIT command  may be used with WebSite Director's Page-Layout templates and Edit-Layout templates.

Note: You should not use the uploaddir="<directory-name>" extended attribute unless your System Administrator or Template Developer allow for image uploading from the content contributors workstation. Instead, only allow your content contributors to select from a list of available images on the server.

The following examples are provided in this tutorial:

  1. Choosing an image for a Document Body background
  2. Choosing an image for a Table background
  3. Choosing an image for a specific location in a template
  4. Allow local image uploading while choosing an image for a specific location in a template
  5. Providing an "Upload Image" button on an Edit-Layout template
  6. Providing a "Preview Image" button on an Edit-Layout template
  7. Uploading multiple images via "Drag-and-Drop" on an Edit-Layout template
  8. Choosing an image with the ability to insert "Caption Text" for a specific location in an Edit-Layout template
  9. Allow local image uploading while choosing an image and inserting "Caption Text" for a specific location in a template

This tutorial also provides  the following information regarding use and possible values of the imagedir= and uploaddir= Extended Command Attriibutes:

Example 1: Choosing an image for a Document Body background  
 
 <!-- The following IMAGE control allows the user to select from a list of
     available background images  -->
<!--[type=IMAGE
     name="background"
     prompt="Select a Background Image:<br>"
     prefix="background"
     image dir="/images/background"]-->
<body background= "">
<!--[END]-->
? body HTML code ?

Example 2: Choosing an image for a Table background

<!-- The following IMAGE control allows the user to select from a list of
     available background images  -->
<!--[type=IMAGE
     name="background"
     prompt="Select a Background Image:<br>"
     prefix="background"
     image dir="/wsd-samples/images/background"]-->
<table width=?80%? border=0  background="">
<!--[END]-->
<tr>?..

Example 3: Choosing an image for a specific location in a template

<!-- The following IMAGE control allows the user to select from a list of
     available images for insertion into a typical HTML <img tag on a hypothetical car dealer web page  -->
<!--[type=IMAGE
        name="Picture"
        prompt="Select a Picture of a car: " 
        prefix="IMG"
       imagedir= "/images/cars/uploaded-images,/wsd-samples/images/cars"]-->
      <IMG src="" border=2>
      <!--[END]-->

Example 4: Allow local image uploading while choosing an image for a specific location in a template:

<!-- The following IMAGE control allows the user to upload images to the server and select from a list of
     available images for insertion into a typical HTML <img tag on a hypothetical car dealer web page  -->
<!--[type=IMAGE
        name= "Picture" 
       prompt="Select a Picture of a car: " 
        prefix="< /FONT>IMG"
        imagedir="/images/cars/uploaded-images,/wsd-samples/images/cars"
       uploaddir= "/images/cars/uploaded-images"]-->
     <IMG src="" border=2>
      <!--[END]-->

Example 5: Providing an "Upload Image" button on an Edit-Layout template
This example shows how to place an Upload Image button into an Edit Layout template associated with an IMAGE field named "Picture" (see Example 4 above). The Javascript necessary for this functionality is included with WSD in the location specified in this example code. Warning: Because this example code creates a button, it should be used ONLY in an Edit-Layout template.

Note: You only need to include the <$include.....> command one time, no matter how many upload buttons you place in your template.

<$include {$docroot/wsd-samples/uploadimage.js}>
<input onClick="return upload_image('<$prop:$Picture$_uploaddir$>',document.EditOnline.$Picture$)"
            type=button value="Upload Image" name= UploadImage>< /FONT>

Click Here to review the javascript code included from the WSD Samples directory.

Example 6: Providing a "Preview Image" button on an Edit-Layout template
This example shows how to place a Preview Image button into an Edit Layout template associated with an IMAGE field named "Picture"  (see Example 4 above). The Javascript necessary for this functionality is listed below and must be placed in the body of the template preceding the HTML code that places the button into the template at a specific location. Warning: Because this example code creates a button, it should be used ONLY in an Edit-Layout template.

Javascript
<script language="JavaScript">
<!--
functionpreview$Picture$(){<BR>  varwindow_opts='toolbar=no,location=no,directories=no,status=no,width=420,height=300,'+'menubar=no,scrollbars=yes,resizable=yes';
   var icon_field = document.EditOnline.$Picture$;
   if (icon_field.selectedIndex == 0) {
      alert('You must select a Picture');
      return;
      }
   var icon = icon_field.options[icon_field.selectedIndex].value;
   var url='http://<$prop:hostname$>' + icon;
   win = window.open(url,'preview_Icon',window_opts);
   win.focus();
}
//-->
</SCRIPT>

HTML for Button
<INPUT type=button value= "ShowPicture" name= "preView$Picture$" onclick= "return preview$Picture$()">< /FONT> < /FONT>  

Example 7: Uploading multiple images via "Drag-and-Drop" on an Edit-Layout template (Add-in required) 
This example shows how to place an Upload Images button that provides a "Drag-and-Drop" interface for uploading one or more images into an Edit Layout template associated with an IMAGE field named "Picture" (see Example 4 above). The Javascript necessary for this functionality is included with WSD in the location specified in this example code. Warning: Because this example code creates a button, it should be used ONLY in an Edit-Layout template.

Warning: To use this feature in your Edit-layout template, you must purchase The XFileSE Client side active-x control required for WebSite Director to support this feature. You may purchase this online directly from XFile (http://fileup.softartisans.com/fileup-231.aspx).

Note: You only need to include the <$include.....> command one time, no matter how many upload buttons you place in your template.

<$include {$docroot/wsd-samples/uploadimages.js}>
<input onClick="return upload_images('<$prop:$Picture$_uploaddir$>',document.EditOnline.$Picture$)"
            type=button value="Upload Images" name= UploadImages>< /FONT>

Click Here to review the javascript code included from the WSD Samples directory.

Example 8: Choosing an image with the ability to insert "Caption Text" for a specific location in an Edit-Layout template

<!-- The following HTMLEDIT (WYSIWYG editor) control allows the user to select from a list of
     available images for insertion into a typical HTML table cell inluding (optional) Caption text before or after the image -->
<TD> <!-- Constrains the image and caption text into the same location -->
 <FONT face="Arial,Helvetica" color="#ff0000"><B>
      <!--[type=HTMLEDIT name="Picture2" prompt="Select a Picture of a car: "
        width=PREFWIDTH
       height=25
        pixelwidth=70%
        pixelheight=200
        wrap=SOFT
        imagedir="/wsd-samples/images/cars/uploaded-images,/wsd-samples/images/cars"
        uploaddir="/wsd-samples/images/cars/uploaded-images"]--><!--[END]-->
        </B></FONT></TD> <!-- end of constrained area -->

Example 9: Allow local image uploading, choose an image, and insert "Caption Text" for a specific location in a template

<!-- The following HTMLEDIT (WYSIWYG editor) control allows the user to select from a list of
     available images for insertion into a typical HTML table cell inluding (optional) Caption text before or after the image -->
<TD> <!-- Constrains the image and caption text into the same location -->
 <FONT face="Arial,Helvetica" color="#ff0000"><B>
      <!--[type=HTMLEDIT name="Picture2" prompt="Select a Picture of a car: "
        width=PREFWIDTH
       height=25
        pixelwidth=70%
        pixelheight=200
        wrap=SOFT
        imagedir="/wsd-samples/images/cars/uploaded-images,/wsd-samples/images/cars"
        uploaddir="/wsd-samples/images/cars/uploaded-images"]--><!--[END]-->
        </B></FONT></TD> <!-- end of constrained area -->

The remainder of this tutorial provides additional information regarding use and possible values of the imagedir= and uploaddir= Extended Command Attriibutes.
 

Selecting Images from one or more directories on the server
The ability to specify the location(s) from which the content contributor can select images is controlled by the imagedir= "<directory-list>" Extended Command Attribute. The following special references can be used within <directory-list>:

  • $dirprop or
    $imagedirprop -- Refers to the "Edit Online Image Directory" location(s) assigned to the sub-directory where the page using the Page Layout Template will be published. (The sub-directory is assigned by the System Administrator using WSD's "Maintain Website" function.)      
  • $uploaddirprop -- Refers to the  "Upload Image Directory" location assigned to the sub-directory (by the System Administrator using WSD's "Maintain Website" function)  where the page using this Page Layout Template will be published
  • $sysdir or
    $imagesysdir -- Refers to the "Edit Online Image Directory" location(s) assigned on the System Configuration screen by the System Administrator as the system default image location
  • $uploadsysdir -- Refers to the  "Upload Image Directory"  location assigned on the System Configuration screen by the System Administrator as the system default upload image location
  • $workingdir -- When  users have been constrained to specific working directories, or when WSD has been installed for only one segment of a site instead of the entire document root, this command provides the document root prefix required for content references.

Any combination of the following examples may be used individually or combined in a comma-delimited string within "<directory-list>" to specify one or more locations on the server from which images will be displayed to the content contributor by WSD:

  • List images in the "Edit Online Image Directory" assigned to CURRENT directory in "Directory Properties"
    imagedir="$dirprop" or
    imagedir="$imagedirprop" 
  • List images in the "Upload Image Directory" assigned to CURRENT directory in "Directory Properties"
    imagedir="$uploaddirprop" 
  • List images in the "Edit Online Image Directory" assigned on the System Configuration screen
    imagedir="$sysdir" or
    imagedir= "$imagesysdir"
  • List images in the "Upload Image Directory" assigned on the System Configuration screen
    imagedir= "$uploadsysdir"
  • List images in the CURRENT directory
    imagedir= "." 
  • List images in the PARENT directory
    imagedir= ".." 
  • List images in a SPECIFIC directory
    imagedir="/folder_path/directory_name"

The following example displays all of the named directories in the content contributor's selection list in the order in they are listed in the command: 

  • imagedir="$uploaddirprop,.,/products/new,accessories,$imagedirprop" 

Uploading Images from the PC into a directory on the server
The ability to specify the location on the server into which the content contributor can upload images is controlled by the uploaddir= "<directory-name>" Extended Command Attribute. The following examples show how to specify a location on the server into which images will be uploaded by WSD:

  • Upload images to the "Edit Online Image Directory" assigned to CURRENT directory in "Directory Properties" 
    uploaddir="$imagedirprop" 
    Warning: the $imagedirprop field used must contain only one directory name
  • Upload images to the "Upload Image Directory" assigned to CURRENT directory in "Directory Properties"
    uploaddir="$dirprop" or
    uploaddir="$uploaddirprop" 
  • Upload images to the "Edit Online Image Directory" assigned on the System Configuration screen
    uploaddir= "$imagesysdir"
    Warning: the $imagesysdir field used must contain only one directory name
  • Upload images to the "Upload Image Directory" assigned on the System Configuration screen
    uploaddir="$sysdir" or
    uploaddir= "$uploadsysdir"
  • Upload images to the CURRENT directory
    uploaddir= "." 
  • Upload images to the PARENT directory
    uploaddir= ".." 
  • Upload images to a SPECIFIC directory
    uploaddir="/folder_path/directory_name"

Including uploaded images when selecting Images from one or more directories on the server
 The ability to specify the location(s) from which the content contributor can select images is controlled by the imagedir="<directory-list>" Extended Command Attribute. Placing the value used for <directory-name> in the uploaddir="<directory-name>" as the first value in the <directory-list> will cause WSD to list uploaded images before listing any other images.  The following examples show the most frequently used values:

  • imagedir="$uploadsysdir,$imagesysdir"
    will list images in the "Upload Image Directory" assigned on the System Configuration screen followed by content in the "Edit Online Image Directory" assigned on the System Configuration screen
  • imagedir="$uploaddirprop,$imagedirprop"
    will list images in the "Upload Image Directory" assigned to CURRENT directory followed by content in the "Edit Online Image Directory" assigned to to the CURRENT directory.

Copyright 2000-2005 CyberTeams, Inc., http://www.cyberteams.com All rights reserved.
CyberTeams and WebSite Director are registered trademarks of CyberTeams, Inc. All other marks are the property of their respective owners.