Rendering Relations

Related content items are made available in JSP templates as PresentationRelationArticle beans. The PresentationArticle bean has a relatedElements property that returns a map from relation type to PresentationElement beans representing all the content item's related items.

PresentationElement beans that represent summaries hold the extra information about the relationship as well as a method to obtain the PresentationArticle bean of the related object. Therefore, it is up to the template developer to choose between information particular to this relationship and information that applies to all relations with this content item.

The temp-dev publication's article/markup/news.jsp template contains the following code to display links to all related items:

<div class="stories">
  <h3>Related articles</h3>
  <ul>
    <c:forEach items="${article.relatedItems}" var="relationType">
      <c:forEach items="${relationType.value.items}" var="related">
        <li>
          <a href="${related.content.url}">${related.fields.title}</a>
        </li>
      </c:forEach>
    </c:forEach>
  </ul>
</div>

As it stands, however, this list may well include links to images dropped onto the content item's Pictures zone in Content Studio. Given the title "Related articles", this is probably not the intention - more than likely what is wanted is a list that only contains other news items that have been dropped into the Stories drop zone.

You can achieve this by using relation types - in other words the drop zone onto which the Content Studio user dropped it. To select only items that were dropped into the Stories zone, therefore, you can modify this code as follows:

<div class="stories">
  <h3>Related articles</h3>
  <ul>
    <c:forEach items="${article.relatedElements.stories.items}" var="related">
      <li>
        <a href="${related.content.url}">${related.fields.title}</a>
      </li>
    </c:forEach>
  </ul>
</div>

This, however, ignores the images dropped onto the Pictures zone. Remedy this as follows:

<div class="images">
  <h3>Related pictures</h3>
  <ul>
    <c:forEach items="${article.relatedElements.images.items}" var="related">
      <li>
        <a href="${related.content.url}">
          <img title="${related.fields.caption}" src="${related.content.fields.binary.value.thumbnail}" alt="${related.fields.alttext}"/>
        </a>
      </li>
    </c:forEach>
  </ul>
</div>

Note how the code mixes summary fields (related.fields.caption) with content item fields (related.content.fields.binary.value.thumbnail).