Log in Sign Up

Part III. Create New Pages with MagicRepeat

This is a continuation of the MagicEdit Dreamweaver tutorial series. The other tutorials in the series are:

Use MagicRepeat to create new pages using a single HTML file.

In this tutorial you will learn how to create a 'template' HTML page and use MagicRepeat to create new pages from that template. It's easier than you think!

Step 1: Create the navigation

Let's continue on from Part II and create web pages for each of the employees in our client's company. Just as before, our client wants to be able to add, remove, and edit the employees, so we'll use both MagicEdit and MagicRepeat in this exercise. First, create a new HTML document and call it "Employees.html". Then, make a simple list that will serve as a navigation menu (our menu will be left nav for ease of viewing, but you can put it anywhere you want):

<h3>Employees</h3>
<ul>
<li>
<a href="Employees.html">
Employee Name
</a>
</li>
</ul>

To make the Magic work on the navigation, we'll wrap the <li> in magicrepeat tags and the Employee Name placeholder text in magicedit tags. (Make sure you include me_name; we'll explain what that is in a bit.)

<h3>Employees</h3>
<ul>
<magicrepeat>
<li><a href="Employees.html">
<magicedit me_plain me_name="employee">Employee Name</magicedit>
</a></li>
</magicrepeat>
</ul>

You may have noticed that the navigation item we created points to its own page (Employees.html). MagicEdit will automatically create a new instance of the Employees.html page based on the existence of an <a> tag in a MagicRepeat. All we have left to do now is create an editable template for the Employees.html page and we're all set.

Step 2: Create the template page.

Let's assume the client wants each employee's page to include their name, a photo, and a short biography. In Dreamweaver's split view, it will look something like this:

This is all you need for the template page. We called MagicEdit three times in this example. The first time it is used as an attribute in the img tag. We used a square placeholder image, but you can specify any size you want. When the client replaces the image with one of their own, it will be resized (and cropped, if necessary) by MagicEdit to fit this exact size specification.

The other two instance of MagicEdit are text regions and both have the me_name attribute we mentioned before. Inside the h2 region, you'll notice the attribute me_name="employee", which is the same as the me_name we used in the sidebar. This feature enables the client to change both the h2 region and the nav menu item by editing only one of the two items. Since they share the same name and are tied to the same repeat, they will be replaced with the same value.

In general, it's a good idea to use me_name on every MagicEdit region, especially MagicRepeat regions. For more information on the me_name attribute, see the documentation on MagicEdit Tags and MagicRepeats.

Step 3:Hand It Over

Push your changes up to the server. Now your client can log in and add/edit/delete employees to his heart's content.

Next up: MagicEdit forms

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top