Create an InContext Editing repeating region

An InContext Editing repeating region is a pair of HTML tags that includes the ice:repeating attribute in the opening tag. The repeating region defines an area on the page that a user can “repeat” and add content to when editing in a browser. For example, if you have a heading and a paragraph of text that follows it, you can transform these elements into a repeating region that a user can then duplicate on a page.

Repeating regions as seen in an editable InContext Editing browser window. The lower region is selected and can be duplicated again, deleted, or moved up and down.

In addition to adding repeating regions based on the original region, you can also give the user the option to delete regions, add completely new regions (not based on the content of the original region), and to move the regions up or down.

When you create a repeating region, Dreamweaver wraps it in another container called a repeating regions group. This container—a div tag with the ice:repeatinggroup attribute added to the opening tag—acts as the container for all of the editable repeating regions that a user might add to the group. You cannot move repeating regions outside of their repeating regions group containers. Additionally, you should not manually add repeating regions group tags to your page. Dreamweaver adds them for you automatically when necessary.

If you are working on a page that already contains a repeating regions group, and you try to add a repeating region immediately after the existing group, Dreamweaver detects that a repeating regions group precedes the region you are trying to add, and gives you the option of adding the new region to the existing group. You can choose to add the new repeating region to the existing group, or create an entirely new repeating regions group.

To create a repeating region in Dreamweaver, follow these steps.

1. Do one of the following:

   • Select a tag that you want to transform into a repeating region. The list of possible tags is extensive: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, and var.

     Note: Only div tags can contain the editable region and repeating region attributes simultaneously.

   • Place the insertion point where you want to insert a new repeating region on the page.

   • Select exactly one repeating region in a Dreamweaver template (DWT file).

   • Select other content on your page that you want to make repeatable (for example, a heading and a block of text).

2. Choose Insert > InContext Editing > Create Repeating Region.

3. Your options vary, depending on your selection.

   • If you selected a transformable tag, Dreamweaver transforms the tag into a repeating region without any further steps.

   • If you’re inserting a new, blank repeating region, do one of the following:

     • Select Insert New Repeating Region at the Current Insertion Point and click OK.

     • Select Transform the Parent Tag Into a Repeating Region if you want Dreamweaver to make the parent tag of the selection the container element for the region. Only certain HTML tags are transformable: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, and var.

       Note: This second option is only available when the parent node meets the exact criteria for transformation. For example, it must be one of the listed transformable tags, and it must not be subject to any of the errors listed in InContext Editing Error messages.

   • If you selected a Dreamweaver template repeating region, click OK in the Create Repeating Region dialog box. Dreamweaver wraps the template repeating region with a div tag that acts as a container for the new InContext Editing repeating region.

   • If you selected other content that you want to make repeatable, do one of the following:

     • Select Wrap Current Selection With a DIV Tag and Then Transform It if you want to wrap whatever you selected with a div tag and turn it into a repeating region. The div tag with which Dreamweaver wraps the content acts as the container for the repeating region.

     • Select Transform the Parent Tag Into a Repeating Region if you want Dreamweaver to make the parent tag of the selection the container element for the repeating region. Only certain HTML tags are transformable: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, and var.

4. In Design view, click the blue tab of the repeating region to select it if it’s not already selected. Notice that Dreamweaver actually forces you to select the tab for the repeating regions group. This is because all repeating regions exist within a repeating regions group, and you must set options for repeating regions by setting options for the entire group.

5. Select or deselect options in the Repeating Regions Group Property inspector. Two options are available: Reorder and Add/Remove. When you select Reorder, users will be able to move repeating regions up or down when editing in a browser. When you select Add/Remove, users will be able to add or remove repeating regions when editing in a browser. Both options are selected by default, and you must always have at least one of them selected.

6. Save the page.

   If this is the first time you’re adding InContext Editing functionality to a page, Dreamweaver informs you that it is adding InContext Editing supporting files to your site: ice.conf.js, ice.js, and ide.html. Be sure to upload these files to the server when you upload your page, otherwise InContext Editing functionality will not work in a browser.