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