Application Launcher

Site Studio

Using multi-value Drupal fields in templates

Site Studio

Using multi-value Drupal fields in templates

You're viewing version 7.2 of this page. .

You can use Drupal's multi-value fields within your templates using the Field element and the Field item element. Together, these allow you to control how a multi-value field is rendered within your template.

The Field element defines the field to be rendered and loops over the number of values available. The Field item defines where the output of the field will be rendered and allows you to wrap the field output in other elements. See the example below.

Example: Creating an image slider from a multi-value image field

The example below shows how you can use the Field element and the Field item element along with other elements to create an image slider. This approach can be used with other elements to make use of Drupal multi-value fields.

To create an image slider:

Step 1

Add an Image field to a Content type and set the "Allowed number of values" to Unlimited
Create a new node using the Content type and add a number of images to the multi-value image field
Set the node to use the Content template you will add the Multi-value field to (Step 2 below)

Step 2

Within your Site Studio content template, add a Slider container to the Layout canvas
Edit its settings to show and scroll 1 slide. Also, set the navigation to visible and select a style for it so that you will be able to use the slider
Then add a Field element within the Slider container and double click on it to edit its settings

You're viewing version 7.2 of this page. .

Example: Creating an image slider from a multi-value image field

To create an image slider:

Step 1

Add an Image field to a Content type and set the "Allowed number of values" to Unlimited
Create a new node using the Content type and add a number of images to the multi-value image field
Set the node to use the Content template you will add the Multi-value field to (Step 2 below)

Step 2

Within your Site Studio content template, add a Slider container to the Layout canvas
Edit its settings to show and scroll 1 slide. Also, set the navigation to visible and select a style for it so that you will be able to use the slider
Then add a Field element within the Slider container and double click on it to edit its settings

You're viewing version 7.2 of this page. .

Example: Creating an image slider from a multi-value image field

To create an image slider:

Step 1

Add an Image field to a Content type and set the "Allowed number of values" to Unlimited
Create a new node using the Content type and add a number of images to the multi-value image field
Set the node to use the Content template you will add the Multi-value field to (Step 2 below)

Step 2

Within your Site Studio content template, add a Slider container to the Layout canvas
Edit its settings to show and scroll 1 slide. Also, set the navigation to visible and select a style for it so that you will be able to use the slider
Then add a Field element within the Slider container and double click on it to edit its settings
Within the Drupal field drop-down, select the you added to your content type

Then expand the Field element and drag an Advanced slide element within it

Finally, drag a Field item element within your Advanced slide element

The template structure should look like this:

View your node which uses the Multi-value image field and includes the template above. You will see that each image is rendered as a slide within your slider.

Further information for developers

The field element will render the output as defined by the Field formatter. For example, if rendering an image field, the Field element will render whatever is set within Drupal's Display settings for the field.

If you require something specific, you can define this within the Field formatter. Or if you simply want to affect the rendered output, you can target the output of your field with CSS styles. These can be added to a parent element as Custom styles.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Within the Drupal field drop-down, select the Image field you added to your content type

Then expand the Field element and drag an Advanced slide element within it

Finally, drag a Field item element within your Advanced slide element

The template structure should look like this:

View your node which uses the Multi-value image field and includes the template above. You will see that each image is rendered as a slide within your slider.

Further information for developers

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Example: Creating an image slider from a multi-value image field

Step 1

Step 2

Example: Creating an image slider from a multi-value image field

Step 1

Step 2

Example: Creating an image slider from a multi-value image field

Step 1

Step 2

Step 3

Further information for developers

Did not find what you were looking for?

Step 3

Further information for developers

Did not find what you were looking for?