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
).