00:00:13:06 - 00:00:14:14
In this tutorial we'll learn
00:00:14:14 - 00:00:18:23
how to use the repeater field type
within our custom content templates.
00:00:19:15 - 00:00:23:13
The repeats of field type
allows us to create easily duplicated code
00:00:23:13 - 00:00:26:18
and input fields
within the same content template.
00:00:27:14 - 00:00:31:15
For example, if we require several text
and image combinations,
00:00:31:23 - 00:00:35:14
so let's say they're in the same format
but with different content,
00:00:35:25 - 00:00:38:23
then we could easily accomplish
this using a repeater.
00:00:41:04 - 00:00:43:09
In this particular example,
00:00:43:09 - 00:00:46:08
we'll add a repeater
to our custom content template,
00:00:46:17 - 00:00:49:28
so we'll have the input of additional text
and image
00:00:49:28 - 00:00:52:11
data.
00:00:54:05 - 00:00:55:11
The first thing I'm going to do
00:00:55:11 - 00:00:58:15
here is add
some additional boilerplate code.
00:00:58:15 - 00:01:00:18
This is not a necessity,
00:01:00:25 - 00:01:04:06
but it will create
a completely new section on our page,
00:01:04:15 - 00:01:08:05
allowing us to keep this section
of the tutorial isolated just
00:01:08:05 - 00:01:09:08
for additional clarity.
00:01:10:09 - 00:01:12:23
So I've
got a copy of the additional code here,
00:01:12:23 - 00:01:16:00
which you will also find
on the accompanying
00:01:18:02 - 00:01:20:05
tango workflow.
00:01:20:15 - 00:01:22:19
And then with that separate section
inserted,
00:01:22:19 - 00:01:25:01
I'm just going to create
an additional field on here.
00:01:25:02 - 00:01:28:22
The same location
where we created the page title
00:01:28:22 - 00:01:32:23
and the description fields
in a separate tutorial.
00:01:35:15 - 00:01:37:29
I'm going to give this field a name
00:01:39:22 - 00:01:40:27
and then select the field
00:01:40:27 - 00:01:47:27
type of repeater.
00:01:47:27 - 00:01:49:29
Now, before going any further
with the repeater
00:01:49:29 - 00:01:51:12
itself, I'm just going to make sure
00:01:51:12 - 00:01:55:08
that the field is actually referenced
in our HTML markup code.
00:01:55:27 - 00:01:59:16
So I'm just going to make sure
that our placeholder
00:01:59:27 - 00:02:02:27
is in the correct location
00:02:06:07 - 00:02:07:22
and just click Save and continue.
00:02:07:22 - 00:02:11:07
Edit to confirm those details.
00:02:14:21 - 00:02:15:06
Now looking
00:02:15:06 - 00:02:19:03
at the additional data field
in more detail,
00:02:19:15 - 00:02:22:19
you'll see at the bottom of this,
we have another code editor.
00:02:24:09 - 00:02:26:10
We also have another field editor.
00:02:26:10 - 00:02:31:04
These are basically nested
within the actual repeater field itself.
00:02:31:14 - 00:02:33:22
So we can create isolated
sections of code.
00:02:35:10 - 00:02:39:03
The process is virtually identical
to the creation of HTML markup
00:02:39:12 - 00:02:43:10
and fields that we've done already.
00:02:43:15 - 00:02:47:26
The primary difference
is that the section is isolated.
00:02:47:28 - 00:02:52:14
I mean, we can easily duplicate
its contents within the content template.
00:02:53:10 - 00:02:54:10
So the same as before.
00:02:54:10 - 00:02:56:29
I'm just going to create
a couple of new fields in here.
00:02:57:27 - 00:03:02:16
Two new examples for this particular one,
we're going to have a text area
00:03:02:16 - 00:03:05:18
where we can write a paragraph of text
if we wanted to,
00:03:05:28 - 00:03:08:20
and an image field.
00:03:08:20 - 00:03:12:03
Well, just create those very quickly.
00:03:14:01 - 00:03:19:08
So text as a text area, an image
00:03:20:11 - 00:03:23:24
as an image field type.
00:03:29:05 - 00:03:30:05
Now we need to put some
00:03:30:05 - 00:03:33:25
boilerplate code
within our repeater itself
00:03:34:23 - 00:03:37:23
and then replace certain parts
of that boilerplate code
00:03:38:00 - 00:03:42:03
with our placeholders,
the same as we did with the top level
00:03:42:10 - 00:03:47:14
HTML markup.
00:04:02:14 - 00:04:03:09
With those two place
00:04:03:09 - 00:04:06:23
holders in place,
I can go save and continue.
00:04:06:23 - 00:04:08:27
Edit.
00:04:09:23 - 00:04:11:10
Now the same as we've done previously.
00:04:11:10 - 00:04:14:15
I'm now just going to go towards
the actual content page itself,
00:04:15:01 - 00:04:18:12
making sure that we're using
that same content template.
00:04:19:14 - 00:04:22:20
So I've already got it open on a separate
tab, so I'll just refresh that page.
00:04:23:18 - 00:04:26:03
Now what you'll see
is that our additional data section
00:04:26:03 - 00:04:30:14
that we've just made is now visible,
although it currently has no content.
00:04:31:08 - 00:04:35:11
So by default, repeater content
is excluded until specifically added.
00:04:35:24 - 00:04:39:15
So each click of the add new button
down on the bottom right here
00:04:40:26 - 00:04:42:11
will add a new instance of
00:04:42:11 - 00:04:45:24
our repeater HTML code
and its associated fields,
00:04:46:04 - 00:04:50:09
allowing different data
to be placed in each one.
00:04:50:14 - 00:04:53:18
So for example,
if I click Add New couple of times,
00:04:54:06 - 00:04:58:29
we get a repeated instance
of that additional data section,
00:04:59:09 - 00:05:02:27
but we can put different data in each one.
00:05:06:00 - 00:05:09:27
So I'll just populate this data
very quickly
00:05:13:01 - 00:05:13:19
and then I'll click
00:05:13:19 - 00:05:14:28
Save.
00:05:14:28 - 00:05:18:05
And what we should see now, if we actually
view that page on the frontend,
00:05:18:22 - 00:05:21:15
is that we'll have
a separate section of the page
00:05:23:14 - 00:05:25:15
where we've now got our repeated
00:05:26:26 - 00:05:27:24
code block.
00:05:27:24 - 00:05:31:11
So we've got additional text one
an image, an additional text two
00:05:31:11 - 00:05:33:12
and an image.
