Docs > Examples > Reorderable picture trails
The template created in this example is used to list manually selected pages with a paragraph of text and a picture illustrating each page. These "picture trails" can be drag-reordered. The pictures and summary paragraph are pulled in automatically, but can be manually overridden.
This is the code that displays the trails:
Notice the names of the content tags in the <content:repeat>, namely "thumbnail", "title" and "summary". This kind of code will work best if you use a naming convention on the website to identify common elements like this.
For example, let's suppose a typical page template on the site looks like this:
The user can then amend the automatically filled values as they like, as well as drag-reordering them. This technique is really useful for streamlining content production.
<content:repeat max="5">The CSS looks like this:
<div class="picture-trail">
<content:picture name="thumbnail" width="120" height="90"/>
<content:text name="title" schema="hyperlink"/>
<content:text name="summary" class="trail-summary"
schema="plain" height="30"/>
</div>
</content:repeat>
.picture-trail { width:300px; }
.picture-trail img { float:left; margin-right:10px; }
.picture-trail a { float:left; width:260px; font-weight:bold; }
.trail-summary { float:left; width:260px; color:#333; }Using naming conventionsNotice the names of the content tags in the <content:repeat>, namely "thumbnail", "title" and "summary". This kind of code will work best if you use a naming convention on the website to identify common elements like this.
For example, let's suppose a typical page template on the site looks like this:
<html>When a user links in a page like this to one of the picture trails defined above, then that page's thumbnail picture, title and summary text will all be automatically pulled in. Although there are two "title" content boxes defined in this template, only the first of them has "title" as its id—so that is the value that will be pulled in.
<head>
<!-- Pictures defined in the <head> are metadata -->
<content:picture id="thumbnail"/>
...
</head>
<body>
<!-- Content placeholders that have an id are considered to be
"properties" of this page -->
<h1><content:text id="title"/></h1>
<content:text id="summary" schema="plain" height="100"/>
<content:text id="body" schema="styled" height="300"/>
...
<h3>Related link</h3>
<!-- This placeholder does not have an id -->
<content:text name="title"/>
</body>
</html>
The user can then amend the automatically filled values as they like, as well as drag-reordering them. This technique is really useful for streamlining content production.
