CMS_INPUT_PICTURE

CMS_INPUT_PICTURE

The CMS_INPUT_PICTURE input component can be used to reference media from the Media Store. Optionally the template developer can insert options for entering a comment and additional text fields for entering the width and height of the picture or for changing the distance of the picture from the surrounding text on the left and right-hand side (hSpace) or from the text above and below the picture (vSpace). The border variable (see Figure: Text field: Border) can be used by the editor to fit a frame around the picture which is thicker the larger the value is. If the value 0 is given the medium is displayed without a frame.

Access-API example use case
The exemplary implementation PictureEditorValueExample shows some simple examples of use for the reading, writing and creating access to the data object (PictureEditorValue) and its inner data container (GraphicalMedium) of the input component by means of the FirstSpirit Access-API.

• Example of use: PictureEditorValueExample
• Data object: PictureEditorValue
• Container type: GraphicalMedium

Parameter

The following table gives the parameters of the PICTURE input component.

Overview

name

The attribute "name" is the variable name of an input component with which the the result object of the input component can be used in the templates - with the help of $CMS_VALUE()$ - or the content can be output.

Overview

allowEmpty

The "allowEmpty" parameter is used to specify whether a value has to be entered for an input value or not.

If allowEmpty="YES" input is not mandatory; however, it is if allowEmpty="NO".

Input components with allowEmpty="NO" are also called mandatory input components.

The default value for allowEmpty is YES.

Overview

allowLanguageDependentUpload

The allowLanguageDependentUpload parameter can be used to allow or prevent the uploading of language-dependent media into the remote or destination project.

The parameter is only used if the upload parameter has been given with the value YES .

• allowLanguageDependentUpload="NO" and upload="YES": only language-independent media can be created in the remote or destination project
• allowLanguageDependentUpload="YES" and upload="YES": both language-independent and language-dependent media can be created in the remote or destination project

Overview

convertEntities

The "convertEntities" attribute is used to convert special characters entered in the input components for output in HTML characters.

There are three forms:

• convertEntities="NONE" (standard)
• convertEntities="STANDARD"
• convertEntities="QUOTE"

With the NONE form, no conversion rules whatsoever are applied.

If STANDARD is given the conversion rules in the "convert" area of the selected conversion rule of the presentation channel are applied.

The form QUOTE explicitly includes STANDARD too. However, the "quote" area of the conversion rule is also applied.

Overview

hFill

An input component is always displayed with a pre-defined width.

However, if the input component is to use the full available display width the parameter hFill must be given with the value YES .

Overview

hidden

With the "hidden" parameter an input component can be hidden from the editor.

If hidden="YES" the input component is not visible for the editor, if hidden="NO" it is visible.

The default value for hidden is NO.

Overview

imagePreview

The imagePreview parameter can be used to display an image preview of a picture in the input component.

No image preview is displayed as a default.

To allow image preview it is necessary to specify the value YES (...imagePreview="YES"...) .

Overview

lean

The lean parameter can be used to specify which input fields of the input component are displayed and therefore changes the display behaviour.

As a default, all input fields are displayed.

If the value COMMON is specified, general fields only are displayed (media selection and comment), if MANDATORY is specified the mandatory fields only are displayed (media selection).

Overview

noBreak

The noBreak parameter can be used to suppress automatic line break after an input component.

The noBreak parameter must be given with value "YES" (noBreak="YES") to suppress the automatic line break.

Overview

preset

Using the preset attribute the handling of default values in an input component can defined (see also chapter Default values). If preset="default" is set, the retrieval value defined in the form is used. If this value in the form is changed later on, these changes will be affect all usages of this default value in the input components maintained by the editor, as long as a value will be set manually in the input component. This is the default setting. If preset="copy" is set, the value entered by the editor is copied directly into the input component. Subsequent changes to the default value in the form do not have any effect on the usages of this default value in the input components maintained by the editor.

Overview

upload

The upload parameter can be used by the template developer to enable the editor to upload a medium via the input component.

The editor can either enter the picture in the media store dialog-controlled using the relevant button or directly add it to the input component using drag & drop.

The function is deactivated as a default; it is activated by specifying the parameter with the value YES (...upload="YES"...) .

Overview

useLanguages

The useLanguages parameter can be used to specify whether or not an input component is to store different or deviating values for different languages (multi-lingual maintenance).

If the parameter is not given, deviating values are stored for the different languages as a default.

If NO (...useLanguages="NO") is specified, one value is stored for all languages.

Overview

LANGINFOS

Using the tag LANGINFOS language-dependent information can be defined for each input component, e.g. which title is to be used for the input component in the different project languages (parameter label), which tooltip is to be displayed (parameter description) etc. For reasons of clarity, definitions which are identical in multiple languages will be merged. For example,

<LANGINFOS> 
 <LANGINFO lang="*" label="Datum"/> 
 <LANGINFO lang="DE" label="Datum"/> 
 <LANGINFO lang="EN" label="Datum"/>
</LANGINFOS>

will be merged to

 <LANGINFOS> 
 <LANGINFO lang="*" label="Datum"/> 
</LANGINFOS>

after saving.

Up to and including FirstSpirit version 4.2R2 language definitions will be deleted only in the case if the values are identical in all languages (as in example above). Furthermore, only the parameters lang, description and label are taken into account when merging.

Since FirstSpirit version 4.2R4 all parameters are taken into account (e.g. format and length). Furthermore, language definitions are also merged within LANGINFOS tags, if they are identical in at least two languages. For example,

<LANGINFOS> 
 <LANGINFO lang="*" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="DE" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="EN" label="Date" format="MM/dd/yy"/>
</LANGINFOS>

will become

 <LANGINFOS> 
 <LANGINFO lang="*" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="EN" label="Date" format="MM/dd/yy"/>
</LANGINFOS>

after saving.

The definition for the fallback value (*) will not be deleted in any case. If there are two or more language definitions with identical values the first one will be maintained, the other will be deleted.

IMPORTANT: Up to and including FirstSpirit version 4.2R2 at least one definition for the fallback labelling ("*") must be given:

<LANGINFOS>
 <LANGINFO lang="*" label="TEXT"/>
</LANGINFOS>

From FirstSpirit version 4.2R4 the fallback definition can be omitted. In this case, the language which is defined first will be used automatically as fallback value. For example,

<LANGINFOS>
 <LANGINFO lang="EN" label="Date"/>
 <LANGINFO lang="DE" label="Datum"/> 
</LANGINFOS>

will become

 <LANGINFOS> 
 <LANGINFO lang="*" label="Date"/>
 <LANGINFO lang="DE" label="Datum"/> 
</LANGINFOS>

after saving.

LANGINFO

The LANGINFO tag is used to give values or attributes for a language as well for use as fallback values.

In order to state values or attributes for a language it is necessary to give the abbreviation of the project language in the lang parameter:

...
<LANGINFO lang="DE".../>
...

Fallback values are given with the special language abbreviation * ("for all languages"):

...
<LANGINFO lang="*".../>
...

The lang parameter is a mandatory parameter.

Overview

lang

The lang parameter is used to give the language abbreviation which is entered in the server properties see FirstSpirit Manual for Administrators, Chapter "Language templates") to specify for which project languages the definitions are to apply, e.g. DE for German, EN for English, FR for French etc. The following characters can be used as often as required: -, _, 0-9 and A-Z. Lower case letters are transformed automatically into upper case letters after having saved the template. In addition * can be used for fallback values.

Overview

description

The description parameter can be used to give a description which is used to display a tool tip (mouse-over).

Overview

label

The label parameter is used to give the surface labelling for input and visualisation components.

Overview

PROJECTS

The tag PROJECTS can be used to define the projects (local and/or remote) from which references are allowed to be selected.

Remote projects are specified usind the tag REMOTE, using the tag CATEGORY one or more remote category/categories can be defined. The actual project is specified by the tag LOCAL. Any number of projects can be defined here.

Moreover, for each project the tags SOURCES and FOLDER can be given. They define from which folders a reference is allowed to be selected.

The sorting of the project definitions has an impact on the order of projects in the selection and in the upload dialogue (the local project is excepted from this sorting).

For restrictions of using remote media in the WebEdit mode please see page Restrictions.

REMOTE

Using this tag one or more remote projects can be defined which is/are to be taken into account. For each remote project one REMOTE tag must be given.

A valid licence for the Remote media access is required to be able to use the REMOTE tag.

Overview

name

Using the parameter name the symbolic name of the remote project is specified.

Overview

autoReleaseAfterUpload

The parameter autoReleaseAfterUpload is used for defining if media which are uploaded by this input component are released directly (auto release).

If the project, in which a medium is to be uploaded, does not use automatic release (i.e. objects must always be released manually), this medium must be released (via workflow) by default. Using autoReleaseAfterUpload="YES" you can define that media, which are uploaded by this input component, will be released directly. If autoReleaseAfterUpload="NO" is given auto release will be disabled.

This parameter is only taken into accoung if the upload is enabled for this input component via upload="YES" and if a valid target folder is defined by the parameter uploadFolder.

Auto release can only be used if the user has got the necessary rights. If the user has no release rights in the project into which the object is to be uploaded, the object will be uploaded anyway, but not released.

Overview

uploadFolder

If the uploadFolder parameter is given with a valid folder name from the media store the picture entered by the editor via the input component is created or uploaded directly into the given folder.

If the parameter is not given the editor must manually select the destination folder from the media store before selecting the medium.

The parameter is only used if the upload parameter has been additioanlly specified with the value YES .

Overview

SOURCES

The SOURCES tag can be used to limit the selection or display to defined folders (including sub-folders).

SOURCES is a positive list, i.e. only the given folders are allowed.

To allow a folder, a FOLDER tag must be specified for each.

FOLDER

The FOLDER tag is used to specify a folder which is to be taken into account.

When specifying a FOLDER the name parameter must be given with a valid folder name of the Media Store.

Overview

name

A valid folder name must be given for the name parameter. To allow the complete store the value root is to be given:

<FOLDER name="root">

Overview

CATEGORY

Using CATEGORY one or more remote categorie/s can be defined. For each category one CATEGORY tag must be given.

If a remote category contains already defined remote projects these projects from the category will be ignored.

Moreover, for each project the tags SOURCES and FOLDER can be given. They define from which folders a reference is allowed to be selected. All folders from the projects of the given remote category defined via CATEGORY are taken into account, which have the name defined by name attribute in the FOLDER tag. I.e. if the folder name specified by the name attribute exists only in one project of the remote category, only this folder will be shown in the selection dialogue. If the folder name exists in several projects, the folders of all concerned projects are shown in the selection dialogue.

A valid licence for the Remote media access is required to be able to use the CATEGORY tag.

Overview

name

A valid name of a remote category must be given for the name parameter.

If two or more REMOTE or CATEGORY tags with the same name are given, only the first definition will be taken into account.

Overview

SOURCES

The SOURCES tag can be used to limit the selection or display to defined folders (including sub-folders).

SOURCES is a positive list, i.e. only the given folders are allowed.

To allow a folder, a FOLDER tag must be specified for each.

FOLDER

The FOLDER tag is used to specify a folder which is to be taken into account.

When specifying a FOLDER the name parameter must be given with a valid folder name as well as the store parameter with a valid name of the respective store.

Overview

name

A valid folder name must be given for the name parameter. To allow the complete store the value root is to be given:

<FOLDER name="root">

Overview

store

The name of the store must be specified by the parameter store. In this case only the Media Store can be used:

...store="mediastore"...

Overview

LOCAL

This tag must be used for specifying the local project if the Tag PROJECTS is given.

Overview

name

The parameter name must be used for defining the name of the local project. By default, a . (dot) must be used for this:

<LOCAL name=".">

Overview

uploadFolder

If the uploadFolder parameter is given with a valid folder name from the media store the picture entered by the editor via the input component is created or uploaded directly into the given folder.

If the parameter is not given the editor must manually select the destination folder from the media store before selecting the medium.

The parameter is only used if the upload parameter has been additioanlly specified with the value YES .

Overview

SOURCES

The SOURCES tag can be used to limit the selection or display to defined folders (including sub-folders).

SOURCES is a positive list, i.e. only the given folders are allowed.

To allow a folder, a FOLDER tag must be specified for each.

FOLDER

The FOLDER tag is used to specify a folder which is to be taken into account.

When specifying a FOLDER the name parameter must be given with a valid folder name of the Media Store.

Overview

name

A valid folder name must be given for the name parameter. To allow the complete store the value root is to be given:

<FOLDER name="root">

Overview

LanguageAbbreviation	Language abbreviation, e.g. DE, EN, FR or * for return values
YesNo	Switch to apply an attribute or not NO Do not apply attribute YES Apply attribute
FormDisplayMode	Switch to influence the display behaviour of the input component ALL Display all fields COMMON Display general fields only MANDATORY Display mandatory fields only
String	A random character string
Preset	Define the general preset modes. Default Retrieve default from definition, if no value is set. Copy Copy default from definition and save automatically.
ConvertEntity	Switch with which to define the conversion rule NONE Do not use any conversion rules STANDARD Use the conversion rules of the "convert" area QUOTE Use the conversion rules of the "convert" and "quote" area
Designator	Unique identifier of variable length; must start with a letter or underscore and may only contain the characters "A-Z", "a-z", "0-9" and "_", e.g. "fr_st_varName"

Example

An example of the input component PICTURE:

<CMS_INPUT_PICTURE useLanguages="YES" name="IDENTIFIER" lean="MANDATORY">
  <LANGINFOS>
    <LANGINFO lang="*" label="TEXT" description="TEXT"/>
    <LANGINFO lang="DE" label="TEXT" description="TEXT"/>
    <LANGINFO lang="EN" label="TEXT" description="TEXT"/>
  </LANGINFOS>
</CMS_INPUT_PICTURE>

Example of use in the template syntax

An example of the output of a picture st_picture which was filled by means of the PICTURE input component.

<img src="$CMS_VALUE(ref(st_picture))$" 
        alt="$CMS_VALUE(st_picture.comment)$" 
        width="$CMS_VALUE(st_picture.medium.width)$" 
        height="$CMS_VALUE(st_picture.medium.height)$" 
        border="$CMS_VALUE(st_picture.border)$" 
        vspace="$CMS_VALUE(st_picture.vspace)$" 
        hspace="$CMS_VALUE(st_picture.hspace)$"/>

The output in HTML code is as follows.

<img src="/fs4preview_7904/preview/7904/media/DE/current/8126/ORIGINAL"
         alt="Comment"
         width="192"
         height="42"
         vspace="10"
         hspace="10"/>

If the width and height selected by the editor is to be read out from the input component instead of the width and height of the medium, this could look like this.

Width set by form: $CMS_VALUE(st_picture.width)$
Height set by form: $CMS_VALUE(st_picture.height)$

If the "thumbnail50x50" resolution is to be output instead of the original resolution the selected resolution of the ref() function per parameter "res:" is passed. To read out the width and height the resolution is passed to the "width()" and "height()" functions as a string.

<img src="$CMS_VALUE(ref(st_picture,res:"thumbnail50x50"))$"         
        alt="$CMS_VALUE(st_picture.comment)$" 
        width="$CMS_VALUE(st_picture.medium.width("thumbnail50x50"))$" 
        height="$CMS_VALUE(st_picture.medium.height("thumbnail50x50"))$" 
        border="$CMS_VALUE(st_picture.border)$" 
        vspace="$CMS_VALUE(st_picture.vspace)$" 
        hspace="$CMS_VALUE(st_picture.hspace)$"/>