diff --git a/en/building-sites/elements/template-variables/input-types/autotag.png b/en/building-sites/elements/template-variables/input-types/autotag.png deleted file mode 100644 index 67ef4daff..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/autotag.png and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/checkboxes.jpg b/en/building-sites/elements/template-variables/input-types/checkboxes.jpg deleted file mode 100644 index a6c388094..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/checkboxes.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/date.jpg b/en/building-sites/elements/template-variables/input-types/date.jpg deleted file mode 100644 index 95d987cf3..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/date.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/dropdown.jpg b/en/building-sites/elements/template-variables/input-types/dropdown.jpg deleted file mode 100644 index d549a3704..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/dropdown.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/email.jpg b/en/building-sites/elements/template-variables/input-types/email.jpg deleted file mode 100644 index cc6d15092..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/email.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/html_area.jpg b/en/building-sites/elements/template-variables/input-types/html_area.jpg deleted file mode 100644 index f4d7f496d..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/html_area.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/index.md b/en/building-sites/elements/template-variables/input-types/index.md index e68cfb104..425263748 100644 --- a/en/building-sites/elements/template-variables/input-types/index.md +++ b/en/building-sites/elements/template-variables/input-types/index.md @@ -4,100 +4,151 @@ _old_id: "489" _old_uri: "2.x/making-sites-with-modx/customizing-content/template-variables/template-variable-input-types" --- -There are a number of built-in template variable (TV) types. +There are a number of built-in template variable (TV) types. Be aware that: -Some input types are deprecated depending on your MODX version. - -Note that for TV types containing user-defined, selectable lists (listbox, checkbox, radio, etc.), it's best to enter multiple Input Option values on a single line with no carriage returns. +- Built-in input types not found on this page are deprecated or have been removed and may not work in the current version of MODX. +- For TV types containing user-defined, selectable lists (listbox, checkbox, radio, etc.), it's best to enter list definitions having multiple values on a single line with no carriage returns. ## Input Types ### Auto-Tag (autotag) -Auto-Tag is a convenient template variable for using tags when blogging, have multiple categories a resource can belong to, or anytime you need a list of tags that have been used before. Every time you edit or create a resource with access to an auto-tag template variable, you will see the tags that were used before. You can easily click on priorly used tags to chose them in the list. +
+ JSON Input Options Template + +```json +{ + "allowBlank": "true", + "parent_resources": "" +} +``` + +
+ + +This TV type is a compound field with a text field for tag entry and rows of clickable pre-existing tags. It can be useful for blog content, Resources that can belong to multiple categories, or anytime you need a list of tags that have been used before. Every time you edit or create a Resource with access to an Auto-Tag TV, you will see rows of tags that have been used before. You can easily click on these tags to assign them to the current Resource. + +To make Auto-Tag TVs useful in the front end, you will need to set the [output type](building-sites/elements/template-variables/output-types) to “Delimiter” and specify a delimiter of your choice, and/or use an output filter to present them in the way you prefer. + +#### Linking Tags to Resources -To make auto-tag tvs useful in the front end, you will need to set the output type to "Delimiter" and specify a delimiter of your choice, and/or use an output filter to present it in the way you prefer. ![](autotag.png) -To output the tags in such a way that each tag links to a certain resource and passes the tag in a GET parameter, you can use an output filter (snippet) as follows: +To output tags so each one links to a certain Resource and passes the tag in the URL (as a GET parameter), you can use an output filter (Snippet). For example: ```php -if ($input == '') { return 'Error'; } // In case the TV is empty -$tags = explode(', ',$input); // Based on a delimiter of ", " this will split each one up in an array -foreach ($tags as $key => $value) { // Loop through the tags - $output[] = ''.$value.''; // Add it to an output array, with a link to resource 9 and the get parameter. + $value) { + $url = $modx->makeurl(9, '', ['tag' => $value]); + $output[] = <<{$value} + LINK; } -return implode(', ',$output); // Merge the output array and output + +// Convert the output array to a string +return implode(', ', $output); + ``` -#### JSON Input Options Template +### Check Box (checkbox) + +
+ JSON Input Options Template ```json { "allowBlank": "true", - "maxLength": "", - "minLength": "", - "regex": "", - "regexText": "" + "displayAsSwitch": "false", + "columns": "1", + "columnDirection": "vertical", + "columnWidth": "medium", + "columnWidth": "false" } ``` -### Check Box (checkbox) +
+ -#### Simple Usage +This TV type renders one or more checkbox fields based on a list of options you define. -The basic usage of this is to simply define the field as a checkbox. You can control whether or not the box is checked by default or not by manipulating the "Input Option Values" and "Default Value" fields. +#### Single Checkbox -##### Checked by Default +The most basic usage of this type of field is a single checkbox, often used for confirmation of some condition. Use the following sample configuration to control the checkbox’s initial state: -- Input Option Values: `My Option==1` -- Default Value: 1 +| Config Field | Value
(default checked) | Value
(default unchecked) | +| ---- | ---- | ---- | +| Checkbox Options | `My Option==1` | `My Option==1` | +| Default Option(s) | `1` | `0` | +||| -##### Unchecked by Default -- Input Option Values: `My Option==1` -- Default Value: 0 +Although the values of `1` and `0` are a natural choice for this type of field, any values can be used. As long as the value following the `==` matches the *Default Option(s)* value, the checkbox will be checked. -The box will be checked by default as long as the value following the "==" matches the default value. If you want to set default of a check box template variable to multiple values, you have to separate the values with the "||" delimiter. +#### Multiple Checkboxes + +If you want to set default of a check box template variable to multiple values, you have to separate the values with the "||" delimiter. + +##### Basic Definition + +In their simplest form, lists are defined using labels separated by double-pipes. In this format, the label is also the value. Using the following sample configuration, three checkboxes would be rendered with “Option B” checked by default. + +| Config Field | Value | +| ---- | ---- | +| Checkbox Options | `Option A\|\|Option B\|\|Option C` | +| Default Option(s) | `Option B` | +||| + +##### Label==Value Definition (with multiple default selections) + +You can distinguish between labels and values using double-equals (`==`) and between each option using double-pipes (`||`). Using the following sample configuration, three checkboxes would be rendered with both “Option A” and “Option C” checked by default. + +| Config Field | Value | +| ---- | ---- | +| Checkbox Options | `Option A==1\|\|Option B==2\|\|Option C==3` | +| Default Option(s) | `1\|\|3` | +||| + +##### Dynamic Definition (using mySQL query) + +| Config Field | Value | +| ---- | ---- | +| Checkbox Options | `@SELECT pagetitle, id FROM modx_site_content WHERE parent=35` | +| Default Option(s) | `(empty)` (no default) | +||| + +##### Manually-Defined Options -#### Advanced Usage -You can distinguish between separate keys and values using double-equals and double-pipes: ```php option1==value1||option2==value2 ``` -#### More Advanced Usage +##### Dynamically-Defined Options -The Check Box input type allows multiple checkboxes to be displayed with a single TV. Set input option values in the `option1==value1||option2==value2` format. To declare default checked checkboxes, supply the default value field with the option names, delimited by two pipes (||). You can use a [@SELECT](building-sites/elements/template-variables/bindings/select-binding "SELECT Binding") to select items from your database, e.g. **Input option values:** +The Check Box input type allows multiple checkboxes to be displayed with a single TV. Set input option values in the `option1==value1||option2==value2` format. To declare default checked checkboxes, supply the default value field with the option names, delimited by two pipes (||). You can enter a [@SELECT](building-sites/elements/template-variables/bindings/select-binding "SELECT Binding") statement for your **Checkbox Options** to generate items from your database, for example: ```sql @SELECT pagetitle, id FROM modx_site_content WHERE parent=35 ``` -![](checkboxes.jpg) +If you are using multiple checkboxes like this, you will probably need to set the **Output Type** to "Delimiter" (*e.g.*, a comma) so you can distinguish the values contained in each checkbox. -If you are using multiple checkboxes like this, you will probably need to set the **Output Type** to "Delimiter" (e.g. a comma) so you can distinguish the values contained in each checkbox. ### Date (date) -This allows you to set both a date and a time. - -![](date.jpg) - -If you like to have a default set date you can put one of the following keywords inside the default value field (without quotes!). The "strange" logic behind the -X/+X values (which intuitively would be - for back and + for future) comes probably from a subtraction in the code somewhere, eg. now() - value, so if value is +72 this means now() - (+72), but - and + is -, so a positive value gets subtracted while with now() - (-72), - and - equals +, a negative value is added. - -| Default value | Function | -| ------------- | ---------------------------------------------------------------------------------------- | -| `yesterday` | Displays the day before todays date, time 12:00pm | -| `today` | Displays todays date, time 12:00pm | -| `now` | Displays todays date, current time | -| `tomorrow` | Displays the day after todays date, time 12:00pm | -| `+X` | X is an amount of hours BACK from the current time, eg. +72 means "3 days back from now" | -| `-X` | X is an amount of hours IN THE FUTURE from the current time, eg. -72 means "in 3 days" | - -You use the [Date TV Output Type](making-sites-with-modx/customizing-content/template-variables/template-variable-output-types/date-tv-output-type "Date TV Output Type") to change the format of the Date returned. - -#### JSON Input Options Template +
+ JSON Input Options Template ```json { @@ -108,43 +159,69 @@ You use the [Date TV Output Type](making-sites-with-modx/customizing-content/tem "minTimeValue": "", "maxDateValue": "", "maxTimeValue": "", - "startDay": "", - "timeIncrement": "", + "startDay": "0", + "timeIncrement": "15", "hideTime": "false" } ``` -### DropDown List Menu +
+ -NOTE: this TV Input type has been deprecated since Revo 2.1.x Please see [Listbox](<#listbox-single-select-listbox>) input types below. +This TV type provides a picker widget, allowing you to set a date and/or a time. -Set input option values in the `option1==value1||option2==value2||option3==value3` format. Make sure to choose an output type of delimited (or other of your liking) to be able to present this to the front-end in a certain manner. You can also use a [@SELECT](building-sites/elements/template-variables/bindings/select-binding "SELECT Binding") binding to select 2 columns, e.g. +If you’d like your TV to have a specific date selected by default, you can choose from MODX’s preset options or enter a custom option in the *Default Date and Time* field. -```sql -@SELECT name, value FROM your_table +
+ +#### Preset Relative Date Options + +| Keyword | Result | +| ------------- | ---------------------------------------------------------------------------------------- | +| `yesterday` | Displays the day before todays date, time 12:00pm | +| `today` | Displays todays date, time 12:00pm | +| `now` | Displays todays date, current time | +| `tomorrow` | Displays the day after todays date, time 12:00pm | + +
+ +#### Sample Custom Date Options + +| Value | Result | +| ------------- | ---------------------------------------------------------------------------------------- | +| `+X` | X-hours BACK from the current time
(*e.g.*, `+72` means 3 days ago) | +| `-X` | X-hours IN THE FUTURE from the current time
(*e.g.*, `-72` means 3 days from now) | +| `YYYY-MM-DD HH:MM` | Using this exact format, selects a specific date and time
(*e.g.*, `2026-07-01 14:00` selects July 1, 2026 at 2 pm) | + +
+
+ +Be careful when using the `+X` and `-X` patterns: While intuitively “-” would represent going back in time and “+” going forward, this is not the case. This is due to the date/time value being calulated using this basic fixed mathematical expression: + +``` +Base Time (now) - Differential Value (X) ``` -Also see Resource List TV type. +So using basic math, to add 72 hours to the *Base Time* you need to plug a negative *Differential Value* into the equation, *i.e.*: -![](dropdown.jpg) +``` +Base Time - (-72) +``` -#### JSON Input Options Template +Conversely, to subtract 72 hours from the *Base Time* you need to plug a positive *Differential Value* into the equation, *i.e.*: -```json -{ - "allowBlank": "true", - "listWidth": "", - "listHeight": "" -} +``` +Base Time - (+72) ``` -### Email +#### Formatting the Rendered Value -This is a text field that comes with its own validation: only text that's in a valid email format will be accepted. +You use the [Date TV Output Type](making-sites-with-modx/customizing-content/template-variables/template-variable-output-types/date-tv-output-type "Date TV Output Type") to change the format of the Date returned. -![](email.jpg) +### Email -#### JSON Input Options Template +
+ JSON Input Options Template ```json { @@ -154,77 +231,121 @@ This is a text field that comes with its own validation: only text that's in a v } ``` -### File +
+ -Creates a file input form to browse the server for a file. Files can be uploaded through the MODX File Manager. You can declare a default value file by specifying the path to the file. +This TV type is a text field that automatically validates its value against a preset email address pattern. To validate against your own custom pattern, create a Text TV instead and enter your pattern in the *Regular Expression Validator* field. -Take extra note of relative file paths when using friendly url paths. +### File -#### JSON Input Options Template +
+ JSON Input Options Template -(None) +```json +{ + "allowBlank": "true" +} +``` -### Hidden +
+ -A hidden field does not show up in the manager, so it's rare that you'd use this option. You can set a default value that can be retrieved on all pages using this variable. Another possibility is to store a Snippet that takes a page's ID as input. +This TV type creates a file input field to browse the server for a file. Files can be uploaded through the MODX File Manager. A TV’s optional *Default File* is also selectable using the File Manager. -### HTML Area (richtext) +### Hidden -This gives you a small WSYIWYG editor for the field. It looks exactly like the Richtext fields. +A hidden field does not show up in the manager, so it's rare that you'd use this option. Some example usages include: -![](html_area.jpg) +- Making a default value available to all pages +- Storing a Snippet that takes a page’s ID as input +- Storing a calculated value based on other fields’ values ### Image -![](tv-image-new.png) +
+ JSON Input Options Template -Creates an image input form to browse the server for a file. Files can be uploaded through the MODX File Manager then. +```json +{ + "allowBlank": "true" +} +``` -In MODX 2.2+ there are no input options for Image TVs anymore. Instead, head over to the "Media Sources" tab and choose a media source to assign to this TV for every context. You can configure base paths and the like in the [Media Source](building-sites/media-sources "Media Sources"). +
+ +

Photo courtesy of Victor Serban, Unsplash

-![](tv-image-input-options.png) +This TV type creates a file input field to browse the server for an image. Images can be uploaded through the MODX File Manager. A TV’s optional *Default Image* is also selectable using the File Manager. -1. You can declare a default value file by specifying the path to the image. +To associate this TV with a Media Source other than the default one, you can do so by visiting the “Media Sources” tab while in the TV editor view. This tab lists all Contexts this TV is available to and presents a dropdown menu to assign a specific Media Source to each (double-click a Source name in the grid to access its menu). -2. If you want to limit the images used for this TV to a specific folder, you can specify (since Revolution 2.1) a base-path and base-url. You can also set relative or absolute paths. Take extra note of relative file paths when using friendly url paths. For correct display of images in frontend and backend be sure to have correct settings in `base_url` and `base_path` settings! +To learn about the various Media Source settings that influence where this TV’s files are located and determine their validity (*i.e.*, file storage paths, allowed file types/extensions, upload limits, etc.), *see* the [Media Sources](building-sites/media-sources "Media Sources") documentation page. -3. You can prepend URL if filepath doesn't begin with a trailing slash. +By default, this input type returns the link (to be used as `src` attribute) to the image. As an alternative to constructing the `` tag for this TV in your front-end template, you can select [“Image”](making-sites-with-modx/customizing-content/template-variables/template-variable-output-types/image-tv-output-type) in *Output Options*; this will return a full image tag that includes the attributes you specify, *e.g.*: -4. You can specify file extensions that can be selected. +```html +For presentation only +``` -This input type returns the link (to be used as src attribute) to the image. You can also set the whole [html-img-tag as a output-type](making-sites-with-modx/customizing-content/template-variables/template-variable-output-types/image-tv-output-type "Image TV Output Type"). +To be clear, `src` is included in the example code above for completeness and is not a part of the editable *Output Options*. -### [Image+](extras/image) (imageplus) +### Listbox (Single-Select) (listbox) -#### JSON Input Options Template +
+ JSON Input Options Template ```json { - "targetWidth": "", - "targetHeight": "", - "targetRatio": "", - "thumbnailWidth": "", - "allowAltTag": "true", - "allowCaption": "false", - "allowCredits": "false" + "allowBlank": "true", + "title": "", + "typeAhead": "false", + "typeAheadDelay": "250", + "forceSelection": "false", + "listEmptyText": "" } ``` -### Listbox (Single-Select) (listbox) +
+ -This has the same options available to it as the Listbox (Multi-Select) – see below. +This TV type produces a select field where only a single option can be selected. The methods of defining its options are shown in the Listbox (Multi-Select) section below. ### Listbox (Multi-Select) (listbox-multiple) -This behaves similar to the checkbox fields: you can select multiple items, and this field can be powered by a @SELECT binding in its "Input Option Values" parameter. Like checkboxes, you probably want to set the "Output Type" to delimiter so you can distinguish between values. +
+ JSON Input Options Template -![](listbox_multi.jpg) +```json +{ + "allowBlank": "true", + "stackItems": "false", + "preserveSelectionOrder": "false", + "title": "", + "typeAhead": "false", + "typeAheadDelay": "250", + "forceSelection": "false", + "listEmptyText": "" + +} +``` + +
+ + +This TV type produces a custom select field where one or more options can be selected. Selections are presented as a row of dismissable options. As with the other chooser-type TVs, this field can be powered by using a `@SELECT` binding in its “Dropdown List Options” field. Its *Output Options* "Output Type" should almost always be set to Delimiter to distinguish between values. #### Simple Usage Just like with the Checkbox options, you can simply specify a list of values separated by double-pipes: -```php +``` Man||Bear||Pig ``` @@ -232,98 +353,118 @@ Man||Bear||Pig Often it's nice to have a more readable label. You can display something nice and still store a different value using the double-equals and double-pipes format used by checkboxes: -```php +``` Option 1==value1||Option 2==value2 ``` -#### JSON Input Options Template +### Number + +
+ JSON Input Options Template ```json { "allowBlank": "true", - "listWidth": "", - "title": "", - "typeAhead": "false", - "typeAheadDelay": "250", - "listEmptyText": "", - "stackItems": "false" + "minValue": "", + "maxValue": "", + "allowDecimals": "false", + "decimalPrecision": "2", + "strictDecimalPrecision": "false", + "decimalSeparator": "." } ``` -### Number +
+ + +This TV type simulates a real number field using a special text field with pre-defined and user-defined constraints: Only the digits 0 to 9, a minus sign (-), and a period (*i.e.*, decimal point) are accepted. -This is another text field with some pre-emptive validation. You literally cannot type anything but the digits 0 to 9, the minus sign (-) , and a period (i.e. a decimal point). A validation error is triggered if you enter more than one decimal point or minus sign. Complex numbers (e.g. using radicals "^" or "e" are **not** supported). +#### Usage Notes -Note that trailing zeros are truncated, e.g. 4.50 gets trimmed to 4.5; this may make this input type unsuitable for currency fields. +- If you want trailing zeros to be preserved (*i.e.*, 4.50 doesn’t get trimmed to 4.5), set “Strict Decimal Precision” to “Yes.” This can be helpful for currency fields. +- To prevent negative values, set the TV’s “Min Value” to 0 (or greater) -#### JSON Input Options Template +#### Unsupported Values and Features + +- Complex numbers (*e.g.*, radicals “2^10,” scientific notation “2.8e6,” etc.) +- Number-specific special controls like `step` and the ability to change the entered value via the up and down arrow keys + +### Radio Options (radio) + +
+ JSON Input Options Template ```json { "allowBlank": "true", - "allowDecimals": "Yes", - "allowNegative": "Yes", - "decimalPrecision": "2", - "decimalSeparator": ".", - "maxValue": "", - "minValue": "" + "columns": "1" } ``` -### Radio Options (option) - -#### Simple Usage +
+ -The basic usage of this is to provide a list of radio option. You can control the default option by manipulating the "Input Option Values" and "Default Value" fields. +This TV type displays a list of radio button options. Unlike Check Box TVs, only a single selection can be made when using a Radio Options TV. -##### Selected by Default +#### Simple Usage -- Input Option Values: My Option==1 -- Default Value: 1 +Using the configuration below, this TV would initially display as shown in the image above. -The option will be selected by default as long as the value following the "==" matches the default value. +| Input Option | Value | +| ---- | ---- | +| Radio Button Options | `Red==1\|\|Green==2\|\|Blue==3` | +| Default Option | `2` | +||| #### Advanced Usage -The radio option can be used to output more than simple numerical values. One such example is using the radio option to determine the chunk used for a sidebar. - -Set your input option values using the format **Title==value** format, but use the chunk placeholders as your values. To declare multiple options use two pipes (||) after the value, before the next options title. - -##### Sidebar Example Revolution +Radio Options values are not restricted to just hard-coded text and numbers; you can incorporate Chunks and/or TVs that output more complex content as a value (without the aid of an Extra or custom Snippet). For example, to build a sidebar selector: -- Input Option Values: `[[$my_related_chunk]]||Content==[[*sidebar-txt]]||Twitter==[[$my_twitter_chunk]]` -- Default Value: `[[$my_related_chunk]]` +| Input Option | Value | +| ---- | ---- | +| Radio Button Options | `[[$my_related_chunk]]\|\|Content==[[*sidebar-txt]]\|\|Twitter==[[$my_twitter_chunk]]` | +| Default Option | `[[$my_related_chunk]]` | +||| -In the above examples, you can output a chunk or another Template Variable without the aid of an extra. +### Resource List (resourcelist) -#### JSON Input Options Template +
+ JSON Input Options Template ```json { - "allowBlank": "true", - "columns": "1" + "allowBlank": "1", + "showNone": "1", + "parents": "", + "depth": "10", + "includeParent": "1", + "limitRelatedContext": "0", + "where": "[{\"isfolder: = \":\"1\"},{\"hidemenu\":\"0\",\"OR:hidemenu:=\":\"1\"}]", + "limit": "0" } ``` -### Resource List (resourcelist) - -Supply the definition with a resource ID, and you'll end up with a drop down list of all pages/resources that are children of that resource. The value stored after you've made a selection is the ID of the single selected resource. +
+ -![](resource_list.jpg) +This TV type is a specialized single-select field that displays a dropdown list of child Resources of a given Resource ID. The value stored will be the ID of the selected child Resource. -This is similar to using a [@SELECT](building-sites/elements/template-variables/bindings/select-binding "SELECT Binding") binding in a DropDown list menu, but the Resource List will traverse the entire resource browser, whereas with a @SELECT binding, you'd have to update your query to list children of each parent. +This is similar to using a [@SELECT](building-sites/elements/template-variables/bindings/select-binding "SELECT Binding") binding in a Listbox, but the Resource List will traverse the entire resource browser, whereas with a @SELECT binding, you'd have to update your query to list children of each parent. -This input type also accepts WHERE conditions to filter by: +This input type also accepts Where Conditions to filter the list. Two example values are shown below: -![](screen-shot.png) - -Another example: +```php +[{"template:=":"4"}] +``` ```php [{"pagetitle:!=":"Home"}] ``` -#### JSON Input Options Template +### RichText + +
+ JSON Input Options Template ```json { @@ -338,15 +479,15 @@ Another example: } ``` -### Rich Text +
+ -See [_HTML Area_](building-sites/elements/template-variables/input-types#html-area-richtext). +When a Rich Text editor (*e.g.*, TinyMCE Rich Text Editor, CKEditor, Redactor, etc.) is installed, this TV type becomes available and produces a small WSYIWYG field for creating html-formatted text. ### Tag -Multiple tags separated by || characters will be separated and output individually when used with the [HTMLTag output type](building-sites/elements/template-variables/output-types/html) for formatting. - -#### JSON Input Options Template +
+ JSON Input Options Template ```json { @@ -354,19 +495,17 @@ Multiple tags separated by || characters will be separated and output individual } ``` -### Text - -This is a vanilla text field. +
+ -As of MODX 2.1, there are three input options you can set for this TV: +This TV type present rows of clickable tags whose initial values are pre-defined in the TV’s **Tag Options**. Like the Auto-Tag TV, this compound field allows the addition of new comma-separated tags in the text input. However, these additions are only available in the Resource in which they are made. (Note that this TV type’s configuration is very similar to that of Check Box TVs.) -- Allow Blank: yes/no, when "no" the resource cannot be saved without it being filled in. -- Max length: a number representing the number of characters that can be filled in in this field. -- Min Length: a number representing the minimum number of characters needed to be filled in. May want to use this with the allow blank option to "no". +To make Tag TVs useful in the front end, you will need to set the [output type](building-sites/elements/template-variables/output-types) to “Delimiter” and specify a delimiter of your choice, and/or use an output filter to present them in the way you prefer. -![](tvinput.png) +### Text -#### JSON Input Options Template +
+ JSON Input Options Template ```json { @@ -378,31 +517,49 @@ As of MODX 2.1, there are three input options you can set for this TV: } ``` -### Textarea +
+ -This is a standard _textarea_ field, with a height of 15 rows. It's the same size as the HTML Area fields, but without the WYSIWYG editor. +This TV type produces a standard text field. -#### JSON Input Options Template +### Textarea + +
+ JSON Input Options Template ```json { - "allowBlank": "true" + "allowBlank": "true", + "inputHeight": "140", + "textareaGrow": "false", + "textareaResizable": "false" } ``` -### Textarea (Mini) (deprecated) +
+ -This is a smaller _textarea_ field, with a height of only 5 rows. +This TV type produces a standard *textarea* field, with a height of 15 rows. It's the same size as the HTML Area fields, but without a WYSIWYG editor. -### Textbox +### URL -This appears to be exactly the same as the vanilla Text field. +
+ JSON Input Options Template -### URL +```json +{ + "allowBlank": "true" +} +``` + +
+ + +This TV type produces a composite field with a dropdown option to select the protocol—(none), , , , or —and a text field for the remainder of the URL. Note that there is no preset validation for this field. To create a field that ensures the correctness of the URL entered, use a Text TV with a *Regular Expression Validator* rule. -This is a guided text field, which a dropdown option to select the protocol: none, , , or [](mailto:). No validation is performed to ensure the correctness of the URL structure. +#### Usage Note -![](url.jpg) +You may paste full URLs into the text part of this field; the protocol will automatically be separated out and selected in the dropdown when the object this TV is a part of, usually a Resource, is saved. ## Dynamically-Defined Input Options diff --git a/en/building-sites/elements/template-variables/input-types/listbox_multi.jpg b/en/building-sites/elements/template-variables/input-types/listbox_multi.jpg deleted file mode 100644 index bd99bd3c4..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/listbox_multi.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/resource_list.jpg b/en/building-sites/elements/template-variables/input-types/resource_list.jpg deleted file mode 100644 index c3dbcff57..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/resource_list.jpg and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/screen-shot.png b/en/building-sites/elements/template-variables/input-types/screen-shot.png deleted file mode 100644 index 86b16e17b..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/screen-shot.png and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/tv-image-input-options.png b/en/building-sites/elements/template-variables/input-types/tv-image-input-options.png deleted file mode 100644 index c19ef5fc9..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/tv-image-input-options.png and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/tv-image-new.png b/en/building-sites/elements/template-variables/input-types/tv-image-new.png deleted file mode 100644 index fc5383118..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/tv-image-new.png and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/tvinput.png b/en/building-sites/elements/template-variables/input-types/tvinput.png deleted file mode 100644 index af472e6fd..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/tvinput.png and /dev/null differ diff --git a/en/building-sites/elements/template-variables/input-types/type-autotag.svg b/en/building-sites/elements/template-variables/input-types/type-autotag.svg new file mode 100644 index 000000000..e7c102dc2 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-autotag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-checkbox.svg b/en/building-sites/elements/template-variables/input-types/type-checkbox.svg new file mode 100644 index 000000000..ba56decf5 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-checkbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-date.svg b/en/building-sites/elements/template-variables/input-types/type-date.svg new file mode 100644 index 000000000..9237538c4 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-date.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-email.svg b/en/building-sites/elements/template-variables/input-types/type-email.svg new file mode 100644 index 000000000..8330b8fac --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-file.svg b/en/building-sites/elements/template-variables/input-types/type-file.svg new file mode 100644 index 000000000..f661e1d45 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-image.svg b/en/building-sites/elements/template-variables/input-types/type-image.svg new file mode 100644 index 000000000..1ed7d6dab --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-listbox-multi.svg b/en/building-sites/elements/template-variables/input-types/type-listbox-multi.svg new file mode 100644 index 000000000..1c34fb876 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-listbox-multi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-listbox.svg b/en/building-sites/elements/template-variables/input-types/type-listbox.svg new file mode 100644 index 000000000..b582715a1 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-listbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-number.svg b/en/building-sites/elements/template-variables/input-types/type-number.svg new file mode 100644 index 000000000..c87649c47 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-number.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-radio.svg b/en/building-sites/elements/template-variables/input-types/type-radio.svg new file mode 100644 index 000000000..c772eb5b0 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-radio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-resourcelist.svg b/en/building-sites/elements/template-variables/input-types/type-resourcelist.svg new file mode 100644 index 000000000..c0aaf915e --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-resourcelist.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-richtext.svg b/en/building-sites/elements/template-variables/input-types/type-richtext.svg new file mode 100644 index 000000000..33ea9195e --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-richtext.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-tag.svg b/en/building-sites/elements/template-variables/input-types/type-tag.svg new file mode 100644 index 000000000..ab123bacc --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-tag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-text.svg b/en/building-sites/elements/template-variables/input-types/type-text.svg new file mode 100644 index 000000000..36675c364 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-textarea.svg b/en/building-sites/elements/template-variables/input-types/type-textarea.svg new file mode 100644 index 000000000..212b8bae7 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-textarea.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/type-url.svg b/en/building-sites/elements/template-variables/input-types/type-url.svg new file mode 100644 index 000000000..b85bbe7f4 --- /dev/null +++ b/en/building-sites/elements/template-variables/input-types/type-url.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/en/building-sites/elements/template-variables/input-types/url.jpg b/en/building-sites/elements/template-variables/input-types/url.jpg deleted file mode 100644 index f7c5b7e25..000000000 Binary files a/en/building-sites/elements/template-variables/input-types/url.jpg and /dev/null differ