Skip to content

Select Box Link

This example demonstrates how to link data from three different sections using the “Select Box Link” field and display it on a single page. The example is an article that may contain an attached gallery with images—without an additional extension.

For this, we need

  • three sections
  • three data sources

Create sections

Create a new section (“Blueprints“ -> “Sections“ -> “Create New“).

  • Name -> “Gallery“
  • Navigation Group -> “Gallery“

Next, we add the following fields to the section:

  • a field “Text Input“ named “Title“ and required
  • a field “Checkbox“ named “online“
  • a field “Date“ named “Published on“

The second section we need, is the section for the images.

Create a new section:

  • Name -> “Images“
  • Navigation Group -> “Gallery“

Add the following fields to the section:

  • a field “Text Input“ named “Title“ and required
  • a field “Upload: Unique File“ named “Image“
  • a field “Text Input“ named “Alt text“
  • a field “Select Box Link“ named “Gallery“ and Values “Gallery > Title“
  • a field “Checkbox“ named “online“
  • a field “Date“ named “Published on“

Section 3 Articles

Since this example is only intended to illustrate how the data is linked, this section has been shortened.

  • Name -> “Articles“
  • Navigation Group -> “Articles“

Add the following fields to the section:

  • a field “Text Input“ named “Title“ and required
  • a field “Select Box Link“ named “Include gallery“ and Values “Gallery > Title“
  • a field “Checkbox“ named “online“
  • a field “Date“ named “Published on“

Tip for sections

It is recommend to use the fields checkbox as “online“ and date as “Published on“ in every section. This allows individual entries to be quickly taken online/offline. The date field can also be used to prepare content in advance (date is in the future), which is not possible with the system date.

Create data sources

DS 1 for article

To display a single article on the page, we need a data source.

Create a new data source (“Blueprints“ → “Data Sources“ → “Create New“).

  1. Choose as source the section “Articles”.
  2. Name the data source “Article”.
  3. This time we need a “Required Parameter” → $title.
  4. Under “Error Conditions,” we set a redirect to the 404 error page if “No results are found”.
  5. To display this one article, we need three additional filters:
    • “Online (Checkbox)” → yes
    • “Published on (Date)” → equal to or earlier than now
    • “Title (Text Input)” → {$title}
  6. Under “Included Elements” select the following fields:
    • Title
    • Date
  7. Under “Parameter“, select the Select Box Link field and enter it in the Params Pool as → $ds-articles.include-gallery
  8. Attach the data source the a page.
  9. Create the data source by clicking the button “Create Data Source“.

Info on parameters

The name of the parameters is always structured as follows: $ds-[name-of-the-data-source-itself].[name-of-the-field].

The second data source retrieves the corresponding gallery using the parameter from the params pool.

Create a new data source.

  1. Choose as source the section “Gallery“.
  2. Name the data source “Articles: Gallery“.
  3. Set as “Required Parameter“ → $ds-articles.include-gallery
  4. Set the following Filters:
    • “Online (Checkbox)“ → yes
    • “Published on (Date)“ → equal to or earlier than now
    • “System ID“ → {$ds-articles.include-gallery}
  5. Under “Included Elements“ select the field “title”.
  6. Under “Parameters“, select the ID of the gallery and enter it in the Params Pool as → $ds-articles-gallery.system-id
  7. Attach the data source to a page.
  8. Create the data source by clicking the button “Create Data Source“.

DS 3 for images

The images belonging to a gallery are retrieved using this third data source.

Create a new data source.

  1. Choose as source the section “Images“.
  2. Name the data source “Articles: Gallery Images“.
  3. Set as “Required Parameter“ → $ds-articles-gallery.system-id.
  4. Set the following Filters:
    • “Online (Checkbox)“ → yes
    • “Published on (Date)“ → equal to or earlier than now
    • “Gallery (Select Box Link)“ → {$ds-articles-gallery.system-id}
  5. Under “Included Elements“ select the following fields:
    • Title,
    • Image,
    • Alt-text
  6. Attach the data source to a page.
  7. Create the data source by clicking the button “Create Data Source“.

Note on required parameter

In this DS, the parameter $ds-articles.include-gallery from the first DS can also be used as the “Required Parameter.” However, since no further checks are performed on the gallery in the first DS (“online” → yes|no, etc.), the images from this DS would always be loaded.

Generated XML

When the content is now created in the three sections, the generated XML looks something like this:

              
<data>
    <params>
        ...
        <ds-articles>
            <item handle="119">119</item>
        </ds-articles>
        <ds-articles.include-gallery>
            <item handle="119">119</item>
        </ds-articles.include-gallery>
        <ds-articles-gallery.system-id>
            <item handle="119">119</item>
        </ds-articles-gallery.system-id>
        <ds-articles-gallery>
            <item handle="119">119</item>
        </ds-articles-gallery>
    </params>
    <events />
    <articles>
        <section id="6" handle="articles">Articles</section>
        <entry id="121">
            <title handle="an-article-with-a-gallery">An article with a gallery</title>
            <published-on iso="2025-05-06T12:26:00+02:00" timestamp="1746527210" time="12:26" weekday="2" offset="+0200">2025-05-06</published-on>
            <include-gallery>
                <item id="119" handle="adventures-of-a-duck" section-handle="gallery" section-name="Gallery">Adventures of a duck</item>
            </include-gallery>
        </entry>
    </articles>
    <articles-gallery>
        <section id="4" handle="gallery">Gallery</section>
        <entry id="119">
            <title handle="adventures-of-a-duck">Adventures of a duck</title>
        </entry>
    </articles-gallery>
    <articles-gallery-images>
        <section id="5" handle="images">Images</section>
        <entry id="120">
            <title handle="duck-1">Duck 1</title>
            <image size="183 KB" bytes="188360" path="/workspace/media/img" type="image/jpeg">
                <filename>12_adventure_duck-68bc0b8edbd22.jpg</filename>
                <meta creation="2025-05-06T12:23:10+02:00" width="1131" height="848" />
                <clean-filename>12_adventure_duck.jpg</clean-filename>
            </image>
            <alt-text handle="duck-sitting-on-top-of-a-castle-wall">Duck sitting on top of a castle wall</alt-text>
        </entry>
    </articles-gallery-images>
</data>

If the gallery is set to “online“ → no, or if no gallery is specified for the article, the generated XML looks as follows.

Note also the <error> nodes in the last two DS:

  • No records found. and
  • Data source not executed, required parameter is missing.
              
<data>
    <params>
    ...
    </params>
    <events />
    <articles>
        <section id="6" handle="articles">Articles</section>
        <entry id="121">
            <title handle="an-article-with-a-gallery">An article with a gallery</title>
            <published-on iso="2025-05-06T12:26:00+02:00" timestamp="1746527210" time="12:26" weekday="2" offset="+0200">2025-05-06</published-on>
            <include-gallery>
                <item id="119" handle="adventures-of-a-duck" section-handle="gallery" section-name="Gallery">Adventures of a duck</item>
            </include-gallery>
        </entry>
    </articles>
    <articles-gallery>
        <section id="4" handle="gallery">Gallery</section>
        <error>No records found.</error>
    </articles-gallery>
    <articles-gallery-images>
        <section id="5" handle="images">Images</section>
        <error required-param="$ds-articles-gallery.system-id">Data source not executed, required parameter is missing.</error>
    </articles-gallery-images>
</data>

Template

In the template for the entry of the single article, you can check whether the nodes articles-gallery and articles-gallery-images each have an entry.

Then you pass the nodes to the respective matching template:

              
<xsl:template match="entry" mode="single-article">
  <article>
    <h1>
      <xsl:value-of select="title" />
    </h1>
    <xsl:copy-of select="teaser/*" />
    <xsl:copy-of select="content/*" />
    <xsl:if test="normalize-space(/data/articles-gallery/entry) and normalize-space(/data/articles-gallery-images/entry)">
      <hr />
      <xsl:apply-templates select="/data/articles-gallery/entry" mode="gallery-title" />
      <ul class="gallery">
        <xsl:apply-templates select="/data/articles-gallery-images/entry" mode="gallery-image" />
      </ul>
      <hr />
    </xsl:if>
  </article>
</xsl:template>

<xsl:template match="entry" mode="gallery-title">
  <h2 class="gallery-title">
    <xsl:value-of select="title" />
  </h2>
</xsl:template>

<xsl:template match="entry" mode="gallery-image">
  <xsl:variable name="thumbnail-height" select="'250'" />
  <xsl:variable name="thumbnail-width" select="'250'" />
  <li class="gallery-item">
    <a href="{concat($root,  '/', image/@path, '/', image/filename)}" data-height="{image/meta/@height}" data-width="{image/meta/@width}">
      <img src="{concat($root, '/images/2/', $thumbnail-width, '/', $thumbnail-height, '/5', image/@path, '/', image/filename)}" height="{$thumbnail-height}" width="{$thumbnail-width}" alt="{alt-text}" class="gallery-img" loading="lazy" />
    </a>
  </li>
</xsl:template>

Note on the image URL for the thumbnail

The final image URL for the thumbnail looks like: 

              https://example.net/image/2/250/250/5/workspace/media/img/12_adventure_duck-68bc0b8edbd22.jpg

The image is automatically cropped to 250 x 250 pixels using the extension JIT image manipulation. It generates resized and cropped images on demand via URL parameters. This allows you to keep original assets in /workspace/media/ while serving optimized variants for different layouts.