Skip to main content

Configuration

Defining Image Lists​

In order to use FSI Showcase, you can either use old configuration files used for FSI Showcase Flash, or create a new configuration file where all the images are defined. The basics of a general configuration can be found in the chapter Using XML Configuration files.

This is an example of how a Showcase XML Configuration file could look like:

Example:
<?xml version="1.0" encoding="UTF-8"?>
<fsi_parameter>
  <Viewer>
    <skin value="white" />
    <noNav value="true" />
  </Viewer>

  <ThumbBar>
    <paddingTop value="15" />
  </ThumbBar>

  <Options>
    <imageListParameterFilterPositive value="initialView, thumbLabel" />
    <Language value="english"/>
  </Options>

  <!-- Showcase Images to display below -->
  <Images>
    <Image>
      <images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
      <Options>
        <thumbLabel value="360 View" />
      </Options>
    </Image>

    <Image label="Premium Touchpad">
      <images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
      <Options>
        <InitialView value="1,1,0.419097,0.609245,0.580208,0.776693,0" />
        <thumbLabel value="Premium Touchpad" />
      </Options>
    </Image>

    <Image label="USB, Mini VGA and Slim Kensington case-lock ">
      <images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
      <Options>
        <thumbLabel value="USB, Mini VGA and Slim Kensington case-lock" />
        <InitialView value="1,7,0.488666,0.625423,0.703314,0.848514,0" />
      </Options>
    </Image>
  </Images>
</fsi_parameter>

When defining the image list, you can still use the old configuration way:

Example:
<images3d prefix="/images/foo_" suffix=".jpg">
  <image src="01" />
  <image src="02" />
  [...]
  <image src="20" />
<images3d>

In order to simplify the configuration, we have now added the possibility to define a range of images rather than listing all images:

Example:
<images3d prefix="/images/samples/foo_" suffix=".jpg" from="01" to="20" />

Both definitions create a list of: <image src="/images/samples/foo_01.jpg" /> to <image src="/images/samples/foo_20.jpg" />.

Filtering Image Lists​

As seen in the example XML above, you can filter the image lists for certain parameters.

imageListParameterFilterPositive​

string

positive image list parameter filter
since 18.07

Define, which parameters in a sub configuration of an image list will pass the filter. You can define multiple parameter names seperated by comma. E.g. fpxSrc, thumbLabel will ignore all parameters except fpxSrc and thumbLabel.

imageListParameterFilterNegative​

string

negative image list parameter filter
since 18.07

Define, which parameters in a sub configuration of an image list will not pass the filter. You can define multiple parameter names seperated by comma. E.g. fpxSrc, thumbLabel will accept all parameters except fpxSrc and thumbLabel.

Using Labels in FSI ThumbBar​

Defining labels​

You have two options to define labels:

  1. adding the label to an <image> tag as attribute. This is the way old configuration (Flash) files used to add the label:
Example:
<images>
  <image label="foo">
    [...]
  </image>
  <image label="bar">
    [...]
  </image>
</images>
  1. adding a "thumbLabel" Parameter to your configuration. You can define this as a general parameter in the main configuration or in a sub configuration of the image list.
Example:
<options>
  <thumbLabel value="###thumb.fileName###" />
</options>

This makes sense if you either want to have the same label for every thumbnail or if you want to create them dynamically (see below).

Example:
<images>
  <image>
    <options>
      <thumbLabel value="Thumbnail Name" />
    </options>
  </image>
</images>

Label Values​

The label value will be url-decoded. Therefore, e.g. %20 will be transformed into space.

If you want to use image information inside the label, you can use space holders:

###thumb.fileName### - the file name of the image ###thumb.filePath### - the file path of the image ###thumb.index### - the numeric index of the image [0,1,2,3...]

In addition, you can use any information from an images info request. The available metadata depends on the image and the image info template (parameter imageInfoTemplate).

By default, the value of imageInfoTemplate is info.json and reveals the following information:

###width### - width of the source image in pixel ###height### - height of the source image in pixel ###size### - file size of the source image in byte ###src### - file path of the image ###alpha### - image contains an alpha channel (true) or not (false)

You can create more custom info templates, that reveal more data, like IPTC or EXIF data. The template in the label must match the name of the metadata exactly. If the result of the info template (JSON) contains objects, please use the dot notation like in Javascript:

###general.icc### ###iptc.Date Created### ###exif.Exposure time###

Using own template values or modifying template values​

You can use the onReplaceLabelTemplate callback to modify the template value or to set the value of a custom template name of your own.

Example 1: custom template values:

Example:
var onReplaceLabelTemplate = function(strTemplateName, strValue, oItem, oInfo){
  // this replaces "###custom.foo###" in the label with "bar"
  if (strTemplateName === "custom.foo")	return "bar";
}

Example 2: modify template values:

Example:
var onReplaceLabelTemplate = function(strTemplateName, strValue, oItem, oInfo){
  if (strValue === undefined) return;

	// this adds " px" to "###width###" and "###height###" in the label
	if (strTemplateName === "width" || strTemplateName === "height")
	return strValue + " px";
}

{"strTemplateName, strValue, oItem, oInfo", r:"strNewValue"}

Using Labels in FSI ImageGrid​

FSI ImageGrid can also be used with labels defined in a config file:

Example:
<fsi-imagegrid-template class="fsi-image-grid-template" style="display:none">
  <div class="myImageGridImage">
    <img class="fsi-image-grid-image" />
  </div>
  <div class="myImageGridText">
    <span>
      ###config.imagelabel###
    </span>
  </div>
</fsi-imagegrid-template>