Basic Dynamic Data Modifiers

Dynamic data can be customized by applying modifiers directly to the data path. For example: item.modifier()

This allows you to format or transform values before they are displayed.

Available Modifiers

Modifier	Description	Example
.dateFormat()	Formats a date into a user-friendly string. Refer to the PHP DateTime::format documentation for available formatting options. More Details	{this.date.dateFormat("F j, Y")} → July 25, 2025
.numberFormat()	Formats a number with grouped thousands and optional decimals. Arguments decimals: default 0 decimalPoint: default "." thousandsSeparator: default "," More Details	value = 123456.78 {item.value.numberFormat(2, '.', ',')} → 123,456.78
.toUpperCase()	Converts all characters to uppercase (strings only).	value = "John" {item.value.toUpperCase()} → JOHN
.toLowerCase()	Converts all characters to lowercase (strings only).	value = "John" {item.value.toLowerCase()} → john
.toString()	Converts to a string. Arrays/objects become JSON when encodable. More Details	value = true {item.value.toString()} → "true"
.toInt()	Converts numeric values (incl. numeric strings) to an integer. Leaves others unchanged. More Details	value = "123.9" {item.value.toInt()} → 123
.toSlug()	Generates a URL-friendly slug from a string. More Details	value = "Über Theme" {item.value.toSlug()} → "uber-theme"
.toBool()	Converts common truthy/falsey inputs to a boolean (true/false). More Details	value = "yes" {item.value.toBool()} → true
.trim()	Removes whitespace (including line breaks) at the beginning or end of a string.	value = " hello " {item.value.trim()} → "hello"
.ltrim()	Removes whitespace from the start of a string.	value = " hello" {item.value.ltrim()} → "hello"
.rtrim()	Removes whitespace from the end of a string.	value = "hello " {item.value.rtrim()} → "hello"
.stripTags()	Removes HTML tags from a string.	value = "<a href="#">Link</a>" {item.value.stripTags()} → "Link"
.urlEncode()	Encodes a string for usage inside a URL.	value = "Hello World!" {item.value.urlEncode()} → "Hello%20World!"
.urlDecode()	Decodes a URL-encoded string.	value = "Hello%20World!" {item.value.urlDecode()} → "Hello World!"
.truncateChars()	Truncates and returns the string after count characters. Arguments count: maximum number of characters to keep ellipsis: string to append if truncation occurs. default: "..."	title = "The quick brown fox jumps over the lazy dog" {title.truncateChars(15)} → The quick brown...
.truncateWords()	Truncates and returns the string after count words. Arguments count: maximum number of words to keep ellipsis: string to append if truncation occurs. default: "..."	title = "The quick brown fox jumps over the lazy dog" {title.truncateWords(2)} → The quick...
.round()	Rounds a number to the nearest integer or to a given precision. Arguments precision: int, default 0	value = "3.14159" {item.value.round(2)} → 3.14
.ceil()	Rounds a number up to the nearest integer.	value = "1.2" {item.value.ceil()} → 2
.floor()	Rounds a number down to the nearest integer.	value = "1.9" {item.value.floor()} → 1
.concat()	Concatenates all the given strings to the source string. Any number of strings can be passed as arguments.	value = "Hello" {item.value.concat(" ", "World", "!")} → "Hello World!"
.length()	Returns the length of a string OR an array.	value = ["Foo", "bar"] {item.value.length()} → 2
.reverse()	Reverses the order of a string OR an array.	value = [1, 2, 3] {item.value.reverse()} → [3, 2, 1]
.at()	Returns the element at the given array index. Arguments index: index of the value you want to get More Details	user.names = ["John", "David", "Sarah"] {user.names.at(1)} → "David"
.slice()	Returns a portion of the array from start to end index. Arguments start: index of the start value end: index of the end value (not included) More Details	animals = ["ant", "bison", "camel", "duck", "elephant"] {item.animals.slice(2)} → ["camel", "duck", "elephant"]
.indexOf()	Returns the index of a substring within a string, or the index of a value within an array. Returns the index if found, or -1 if not found.	user.userRoles = ["author", "editor"] {user.userRoles.indexOf('editor')} → 1
.pluck()	Extracts a property from each object in an array and returns the values as a new array. More Details Since: 1.0.0-alpha-8	this.categories = [{ name: "ABCs", slug: "abcs" }, { name: "XYZs", slug: "xyzs" }] {this.categories.pluck("name")} → ["ABCs", "XYZs"]
.split()	Splits a string by the given separator and returns the result as an array. Arguments separator: default ","	value = "Jan,Feb,Mar,Apr" {item.value.split(",")} → ["Jan", "Feb", "Mar", "Apr"]
.join()	Combines array elements into a string with a separator.	user.userRoles = ["author", "editor"] {user.userRoles.join(", ")} → "author, editor"
.applyData()	Reapplies available dynamic data to the given value. More Details	item.text = "Hello {user.name}" {item.text.applyData()} → "Hello John"
.unserializePhp()	Takes a serialized PHP string and converts it back to a usable value More Details Since: 1.0.0-beta-1	item.text = "a:3:{i:0;s:5:"apple";i:1;s:6:"banana";i:2;s:6:"cherry";}" {item.text.unserializePhp()} → ["apple", "banana", "cherry"]

Detailed Modifier Reference

Below are some of the more complex modifiers and more detailed information about their usage.

.dateFormat()

Returns: string (formatted date)

The .dateFormat() method formats Unix timestamps (seconds) or valid PHP date strings (e.g., Y-m-d H:i:s, m/d/Y, F j, Y g:i a). The arguments are passed as quoted strings (e.g., .dateFormat("Y-m-d")). Please refer to the PHP datetime format documentation for more information. Invalid inputs are returned unchanged.

Examples:

• {this.date.dateFormat("Y-m-d")} → "2024-02-01"
• {item.startDate.dateFormat("m/d/Y")} → "02/01/2024"

⚠️ Deprecated: .format() exists as a deprecated alias of .dateFormat(). Prefer .dateFormat() going forward.

---

.numberFormat()

Returns: string (formatted number) or original value

The .numberFormat() method formats a numeric value with grouped thousands and configurable decimal precision/separators. It only applies to numeric inputs; non‑numeric values are returned unchanged. Arguments are passed as quoted strings (e.g., numberFormat(2, ".", ",")).

Argument	Type	Default	Description
decimals	int	0	Number of decimal digits
decimalPoint	string	"."	Decimal separator character
thousandsSeparator	string	","	Thousands separator character

Examples:

• value1 = 123456
  
  • {item.value1.numberFormat(2, ".", ",")} → "123,456.00"
• value2 = 1234567.123
  
  • {item.value2.numberFormat(1, ",", ".")} → "1.234.567,1"

---

.toString()

Returns: string or original value

The .toString() method converts any value into its string representation. Booleans become the strings "true" or "false", scalar values are cast directly to strings, and arrays or objects are JSON-encoded when possible to provide a readable format.

Examples:

• value1 = 3.14
  
  • {item.value1.toString()} → "3.14"
• value2 = true
  
  • {item.value2.toString()} → "true"
• value3 = false
  
  • {item.value3.toString()} → "false"
• value4 = null
  
  • {item.value4.toString()} → "" (empty string)

---

.toInt()

Returns: int or original value

The .toInt() method converts numeric values to an integer by truncating any fractional part. If the value is already an integer it is returned as-is; if it’s numeric (including numeric strings like "123" or "123.45") it is cast to (int). Non-numeric values are returned unchanged.

Examples:

• value1 = "123"
  
  • {item.value1.toInt()} → 123
• value2 = "123.9"
  
  • {item.value2.toInt()} → 123
• value3 = "abc"
  
  • {item.value3.toInt()} → "abc" (unchanged)

---

.toSlug()

Returns: string (slug) or original value

The .toSlug() method generates a URL‑friendly slug from a string: it lowercases the text, transliterates to ASCII, replaces non [a–z][0–9] characters with -, and trims leading/trailing hyphens. Only string inputs are transformed; other types are returned unchanged.

Examples:

• value = "Über Theme"
  
  • {item.value.toSlug()} → "uber-theme"

Example use case: Generate CSS class names from values

• <article class="post-{post.title.toSlug()}">...</article>
• <span class="role-{user.userRoles.toSlug()}">...</span>

---

.toBool()

Returns: boolean (true/false)

The .toBool() method normalizes common truthy/falsey inputs into a strict boolean. It is case-insensitive and supports strings ("true"/"false", "yes"/"no", "on"/"off"), numeric strings ("1"/"0"), and numeric values (1/0). null becomes false.

Example inputs that will convert to booleans:

• 1, "1", "true", "yes", "on" → true
• 0, "0", "false", "no", "off" → false
• null → false

---

.pluck()

Returns: array

The .pluck() method extracts the value at a given property path from each element in an array of objects and returns those values as a new array. Similar to array_column() in PHP or pluck() in Laravel.

• Pluck paths can be nested using dot notation (e.g., "author.name") to get a nested property's values, so .pluck("author.name") on an array like [ {"author": { "name": "John" } } ] will return ["John"].
• If the property does not exist for an element, null is used for that element.
• If called on a non-array value, an empty array ([]) is returned.

Example arrays

Plucking the term name from a Category array of term objects

"categories": [
  { name: "ABCs", slug: "abcs" },
  { name: "XYZs", slug: "xyzs" }
]

Results: {this.categories.pluck("name")} → ["ABCs", "XYZs"]

Attempting to pluck a missing value

"missingExample": [
  { title: "A" },
  { title: "B" }
]

Result: {this.missingExample.pluck("slug")} → [null, null]

Attempting to pluck a value from a non-array

"value": "foo"

Result: {this.value.pluck("anything")} → []

Example use case: Conditional logic to check if a post has a specific category

You can of course combine pluck with other modifiers to create more complex conditions. For example, you can use it with the .includes() method to check if a specific value exists in the array.

Before .pluck(), you would have to do a loop with a condition inside it:

{#loop this.categories as category}
  {#if category.name === "ABCs"}
    true
  {/if}
{/loop}`

Now with .pluck(), you can now do it in a single condition:

{#if this.categories.pluck("name").includes("ABCs")}
  true
{/if}

---

.at()

Returns: any (element at the given index)

The .at() method takes an integer value and returns the item at that index in the array, allowing for positive and negative integers. Negative integers count back from the last item in the array.

Argument	Type	Default	Description
index	int	—	Zero-based index of the array element to be returned

Examples:

"value": [5, 12, 8, 130, 44]

• {item.value.at(2)} → 8
• {item.value.at(-2)} → 130

---

.slice()

Returns: array

Similar behaviour to JS Array.prototype.slice()
The .slice() returns a portion of the array, selected from start to end (end not included) where start and end represent the index of items in that array. Extraction happens up to but not including end.

Argument	Type	Default	Description
start	int	—	Zero-based index at which to start extraction
end	int	array length	Zero-based index at which to end extraction

Examples:

"value": ["ant", "bison", "camel", "duck", "elephant"]

• {item.value.slice(2)} → ["camel", "duck", "elephant"]
• {item.value.slice(2, 4)} → ["camel", "duck"]
• {item.value.slice(-2)} → ["duck", "elephant"]

---

.applyData()

Returns: Returns the original value with dynamic data reapplied.

The applyData() method is an advanced feature that can be used to reapply dynamic data to an already resolved value.

Examples:

You might have a custom field that includes dynamic data, for example: this.etch.header = "Welcome to {this.title}!"
If you output {this.etch.header} directly, it will render as:
"Welcome to {this.title}!" — without replacing {this.title}.

To resolve the dynamic data, call .applyData() on the value: {this.etch.header.applyData()}
This first retrieves the original string, then reapplies the dynamic data, resulting in:
"Welcome to Etch! (or whatever value {this.title} resolves to).

---

.unserializePhp()

Returns: Returns the unserialized value, or the original value if the input is not a valid serialized string or null if you attempt to unserialize an actual PHP object.

The unserializePhp() method is an advanced feature that can be used to convert serialized PHP strings back into usable values.

Examples:

You might have a plugin that saves serialized PHP strings in a CPT field, for example it could save an array as a string like this on a post: a:3:{i:0;s:5:"apple";i:1;s:6:"banana";i:2;s:6:"cherry";}
If you output {post.specialField} directly, it will render as:
a:3:{i:0;s:5:"apple";i:1;s:6:"banana";i:2;s:6:"cherry";} — without converting it back to an array.

To use this value correctly, call .unserializePhp() on the value: {post.specialField.unserializePhp()}
This first retrieves the original string, then converts it back to a usable value, resulting in an actual array:
["apple", "banana", "cherry"]. Which you could then loop over or use other modifiers on.

Or a:2:{s:3:"foo";s:3:"bar";s:3:"baz";i:42;} would become {"foo": "bar", "baz": 42} which then could be accessed like normal dynamic data: {post.specialField.unserializePhp().foo} → bar.

It also works with other serialized PHP data types, like integers or booleans. If you attempt to unserialize an actual PHP object however, it will return null for safety reasons.

---

Additional Notes

• Combining: You can combine/stack modifiers. They are applied in the order they are written. For example, you could use {user.fullName.toSlug().toUpperCase()} to transform a user named "Thomas Müller" to "THOMAS-MULLER".
• Unknown modifiers: If a modifier name isn’t recognized, the internal call returns null, which results in an empty string.