Tutorial #6: Layouts

This tutorial puts it all together and shows you how to lay out a basic home page.

About Layouts

Layouts are basically templates that you can plug content into. You have noticed that when you create your own pages, you have used the “secondary page” layout.

Layouts have page parts associated with them. On your test page, you edited the “body” page part. However, a page can have as many page parts as you would like. The layout then places the content in the page parts in each area on the page, in an area specific to that layout.

For example, this page you are looking at uses the “Left Sidebar” layout. The “body” page part is what you are reading right now. There is another page part called “sidebar”. The sidebar contains the tutorial links on the left of this page. Because the sidebar is the same on each page in the tutorial, we use a reusable snippet that contains those links.

This tutorial puts everything you have learned together to create a page that has a left sidebar, like this one, and a photo in the upper right. You can use this as a template for your own home page.

Getting ready

Before we lay out the page, do the following:

• Create a new page for yourself. If you are a student, put it under “students”. If you are “faculty” put it under faculty. Name the page something unique. Don’t forget to:
  • Set the Filter to “Textile”
  • Set the status to “Published”
• Add some content to the page
• Create a new snippet called “my-name-sidebar”, replacing my-name with your name, separated by dashes. Add a bulleted list to the snippet with a list of pages you might create someday. (See the Textile tutorial if you need a reminder)
  • Don’t forget to set the Filter to “Textile”
• Upload a photo of yourself to put on the page. The photo should be no wider than about 300 pixels. (See the images tutorial if you need a reminder)

Laying out the page

1. Navigate to your page in the CMS and edit it.
2. Click on the green ”+” to the upper right of the content area. This will prompt you to create a new page part.
3. Call the page part “sidebar”
4. Repeat the previous, adding another page part called “photo”
5. Click on the “sidebar” tab.
6. Set the filter to “Textile”
7. Enter the following into the sidebar content area, replacing my-name-sidebar with the name of the sidebar you created: <snippet name=”my-name-sidebar”/>
8. Click on the “photo” tab.
9. Add the photo to the “photo” tab content area. If you need to navigate away from your page, be sure to save it first! (See the photo tutorial if you need a reminder on adding the photo)
10. Select “Page with photo on right” for the page layout.
11. Save and Continue Editing
12. View the page in your browser. You should now have a page with some content in the sidebar on the left, as well as your photo in the upper right.

Creating your own layouts

Creating your own layouts requires some knowledge of HTML. Or, if you’re brave you can look at the content in some of the existing layouts, copy it into your new layout, and modify it.

The key thing to know about creating layouts is how to put page parts into them. This is done with the following tag:

<content part=”part-name”/>

The part-name is the name of the page part that goes into that section of the layout. Whatever content is entered into that page part gets inserted where the content tag is. Look at some of the existing layouts for examples of these.