--- title: "Item and field extensions" slug: "item-and-field-extensions" abstract: "Learn more about SXA's item extensions." --- # Item and field extensions This topic describes the SXA item extensions that make it easier to access fields, item properties, and field properties.

Item properties

 ### i_item.children Returns the children of the item as an `Item` list. #### Example Render the children of an item as a list of links: ```html {{ for i_child in i_datasource.children }} {{ i_child.Title }}
{{ end }} ``` ### i_item.display_name Returns the `Display Name` of the item. #### Example Render a link to the component data source using the `Display name` of the data source item as the text of the link: ```html {{ i_datasource.display_name }} ``` ### i_item.id Returns the ID of the item. #### Example Output the ID of the item: ```html {{ i_item.id }} ``` ### i_item.has_children Returns `true` if the item has children. #### Example If the current page has children, render links to these children: ```html {{ if i_page.has_children for i_child in i_page.children }}{{ i_child.display_name }}
{{ end end }} ``` ### i_item.has_layout Returns `true` if the item has layout information. #### Example Render the children of a page that has children: ```html {{ for i_child in i_page.children if i_child.has_layout }}{{ i_child.display_name }}
{{ end end }} ``` ### i_item.language Returns the language code of the item. #### Example If the item is rendered in English, output text stating the fact: ```html {{ if i_page.language == 'en' }} This page is rendered in English
{{ end }} ``` ### i_item.media_url Returns the media URL to the item. #### Example Render a download link to the `Promo` component image: ```html {{ i_datasource.PromoIcon.name }} ``` ### i_item.name Returns the `Name` of the item. #### Example Render a link to the component Data Source using the `Name` of the data source item as the text of the link: ```html {{ i_datasource.name }} ``` ### i_item.path Returns the path of the item. #### Example Render link to an item only if it is located under */sitecore/content*: ```html {{ if string.starts_with i_item.path "/sitecore/content" }} {{ i_item.Title }}
{{ end }} ``` ### i_item.parent Returns parent of the item. #### Example Render a link to the parent of the data source item: ```html {{ i_item.parent.Title }}
{{ end }} ``` ### i_item.template_id Returns the ID of the item template as a `string`. #### Example Output the ID of the item: ```html {{ i_item.template_id }} ``` ### i_item.template_name Returns the name of the item template as a `string`. #### Example Return the item template name: ```html {{ if i_item.template_name == "Gallery Image" }} ... render HTML for Gallery image {{end}} ``` ### i_item.url Returns the URL to the item using the site `LinkProvider`. #### Example Render a link to the component Data Source using the `Display name` of the data source item as the text of the link: ```html {{ i_datasource.display_name }} ``` ### i_item.version Returns the version number of the item. #### Example Output the version number of the item: ```html {{ i_item.version }} ```

Retrieve and render item fields

 ### i_item.FieldName Renders the field within your template. #### Example Render the field within your template by appending the `FieldName` to the item object: ```html {{ i_item.Title }} ``` > [!note] > `i_item.FieldName` does not allow following links for fields that contain special characters, such as periods ("."), commas (","), white spaces, and so on. It does not support data attributes or field fallback either. In these cases, use the `sc_field` function. ### sc_responsive Pulls media from the Media Library or Content Hub and makes its size scale according to the selected screen size. #### Example Retrieve media from Content Hub and render it according to screen size, depending on the provided values. ```text {{ sc_responsive i_item"image" "(min-width: 40em) 80vw, 100vw" "800, 1000, 1500" "1000" }}{{ sc_responsive i_item"image""(min-width: 40em) 80vw, 100vw" "800, 1000, 1500" "1000"}} ```

Field extension properties

 ### i_item.Field.raw Returns the raw value of a field. For example, to render an ID to an item that you use in your JavaScript or for buttons that are not editable. #### Example Render the text on a button: ```html ``` ### i_item.Field.target Returns an item selected in a field that can store links to items. If the field can contain links to multiple items, the first item in the list is returned. If the field is empty, the function returns a null value. > [!note] > `i_item.Field.target` does not allow following links for fields that contain special characters, such as periods ("."), commas (","), white spaces, and so on. In these cases, use the `sc_follow` function. #### Example Render more information about a product linked from a Promo component: ```html {{ i_linkedpage = i_item.PromoLink.target }}

{{ i_linkedpage.Title }}

Content:{{ i_linkedpage.Content }} ``` ### i_page.Field.targets Returns an array of items selected in a field that can store links to items. If the field is empty, the function returns an empty list. > [!note] > `i_page.Field.target` does not allow following links for fields that contain special characters, such as periods ("."), commas (","), white spaces, and so on. In these cases, use the `sc_followmany` function. #### Example Render the products related to the current product: ```html {{ for i_product in i_page.RelatedProducts.targets }}

{{ i_product.Title }}

Content:{{ i_product.Content }} {{ end }} ```

Working with field cascading and fallback

 When you use a field in a fluent notation, you can use field cascading and fallback to simplify more complex scenarios. You can cascade link fields in a fluent notation to reach out to items without having to call the `.target` helper. For example: `i_item.FieldLinkingToItem.HelperOrFieldToRender`. For example, to render a field on an article page named `FirstName` that is part of a field named `Author Info` that is part of a field named `Author`: ```html Article by: {{ i_page.Author.FirstName }} ``` You can create templates that support multiple data templates by cascading the field names in a fluent notation. The templating engine attempts to resolve and render fields left-to-right and renders the first field that it finds on an item. For example, if the page does not have an `Author` field, the templating engine attempts to render the `FirstName` field directly from the `i_page`.
## Using field metadata in Scriban templates You can access and re-use the values from field metadata for existing images and links directly via your Scriban template. Use this to build templates with pre-existing content, without having or use pre-defined rendering variants. This works for both files hosted in the Media Library and in Content Hub. To access and use the field metadata, type one of the following metadata properties for your context item, for example an `i_item`, into your Scriban template in the Content Editor. Metadata for links: - `_alt` - `_anchor` - `_description` - `_query` - `_class` - `_target` - `_isinternal` - `_ismedialink` - `_targetid` - `_text` - `_title` - `_linktype` - `_url` Metadata for images: - `_alt` - `_class` - `_height` - `_hspace` - `_vspace` - `_width` > [!note] > If the rendering variat returns an empty string, you might have used an incorrect field type or a property that does not exist.