Conditional Link Output

Understanding how to handle links correctly is crucial for maintaining a consistent and user-friendly website. While it is straightforward to output links in your Content layouts, we need to account for different scenarios where users might provide internal links, external links, or both. 

This guide will walk you through the templating logic needed to determine which type of link should be displayed and how to handle cases where multiple link types are present. By implementing this logic correctly, you'll ensure your content remains organized and your visitors always get directed to the right destination.

Using Conditional Elements

Terminalfour 8.4.0 introduced the Conditional Elements feature. This feature allows you to show/hide content elements from your content editors based on conditions you control. A very common use-case for this feature is to allow users to select from a “Radio group” whether they want to output an Internal or an External link. Depending on what the user selects we can show them the fields for the appropriate link type.

However, it’s important that we add this same logic to when we’re outputting these links in our Content Layouts.

Assuming a content type with the following elements

 We can use Handlebars to control the output of the links like so:

{{#eq (selectedNames element="Link type") "Internal"}}
  {{publish element="Internal Link"}}
{{/eq}}


{{#eq (selectedNames element="Link type") "External"}}
  <a href="{{publish element="External Link URL"}}" target="_blank" rel="noopener noreferrer">{{publish element="External Link Text"}}</a>
{{/eq}}

What this does

The code example above uses the eq Helper to verify whether the element “Link type” has a selected value equal to “Internal”. If it does, then we output the Internal link.

Similarly, if the element “Link type” has a selected value equal to “External” we output the external link.

This means we’re using the value selected in the “Link type” element to control which link element(s) get output.

NOT Using Conditional Elements

If you’re not using Conditional Elements you may need to make a decision on how you’d like your layout to behave if a user has selected both an Internal and an External Link.

Default to only output the Internal Link

This can be achieved like:

{{#ifSet element="Internal Link"}}
  {{publish element="Internal Link"}}
{{else}}
  {{#and (ifSet element="External Link URL") (ifSet element="External Link Text")}}
    <a href="{{publish element="External Link URL"}}" target="_blank" rel="noopener noreferrer">{{publish element="External Link Text"}}</a>
  {{/and}}
{{/ifSet}}

The above code will:

• Output the Internal Link if it exists
• If it doesn’t:
  • It will check if the External Link URL and External Link Text are set.
  • If they both are, it will output the external link instead
• If neither are set, nothing is output

Default to only output the External Link

This can be achieved like:

{{#and (ifSet element="External Link URL") (ifSet element="External Link Text")}}
  <a href="{{publish element="External Link URL"}}" target="_blank" rel="noopener noreferrer">{{publish element="External Link Text"}}</a>
{{else}}
  {{#ifSet element="Internal Link"}}
    {{publish element="Internal Link"}}
  {{/ifSet}}
{{/and}}

The above code will:

• Check if the External Link URL and External Link Text are set. If they both are, it will output the external link
• If either the External Link URL or the External Link Text are not set
  • then it will check if the Internal link is set.
  • If it is, it will output the Internal Link
• If neither are set, nothing is output

Default to output both the Internal and External Link

This is the most straightforward approach and can be achieved like:

{{#and (ifSet element="External Link URL") (ifSet element="External Link Text")}}
  <a href="{{publish element="External Link URL"}}" target="_blank" rel="noopener noreferrer">{{publish element="External Link Text"}}</a>
{{/and}}
{{publish element="Internal Link"}}

The above code will:

• Check if both the External Link URL and External Link Text are set
  • If they are, it will output the External Link
• Outputs the Internal Link if it exists