Answers.Body: <p>You are asking about Twig's <a href="https://twig.symfony.com/doc/3.x/templates.html#expressions" rel="nofollow noreferrer">operator precedence</a>:</p>
  <blockquote>
  <p>The operator precedence is as follows, with the lowest-precedence operators listed first: <code>?:</code> (ternary operator), <code>b-and</code>, <code>b-xor</code>, <code>b-or</code>, <code>or</code>, <code>and</code>, <code>==</code>, <code>!=</code>, <code>&lt;=&gt;</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&gt;=</code>, <code>&lt;=</code>, <code>in</code>, <code>matches</code>, <code>starts with</code>, <code>ends with</code>, <code>..</code>, <code>+</code>, <code>-</code>, <code>~</code>, <code>*</code>, <code>/</code>, <code>//</code>, <code>%</code>, <code>is</code> (tests), <code>**</code>, <code>??</code>, <code>|</code> (filters), <code>[]</code>, and <code>.</code>:</p>
  </blockquote>
  <p><code>|</code> is higher precedence than <code>~</code>, so <code>'this' ~ 'that' | raw</code> will evaluate as <code>'this' ~ ('that' | raw)</code>. If you want <code>('this' ~ 'that') | raw</code> then <code>()</code> is the way to go.</p>
  <p>Personally, I would use <code>()</code> to disambiguate in both cases.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-07-09T19:01:09.680Z
Answers.LastActivityDate: 2020-07-09T19:01:09.680Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <p>How about doing something like this?</p>
  <pre><code>{% set style = entry.maxWidth|length ? entry.maxWidth ~ 'px' : 'unset' %}
  {{ style|raw }}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-07-09T17:53:29.043Z
Answers.LastActivityDate: 2020-07-09T17:53:29.043Z
Answers.UserDisplayName: Oto Hlincik
Answers.Body: <p><a href="https://craftcms.stackexchange.com/a/35767/1016">Marion's answer</a> beat me to this while I was writing but it's essentially very similar.</p>
  <p>Replace <code>raw</code> with, say, <code>upper</code> and you'll be able to visually see what's going on:</p>
  <pre><code>// {{ entry.maxWidth|length ? 'max-width: '|raw ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  MAX-WIDTH: 160PX;
  
  // {{ entry.maxWidth|length ? 'max-width: ' ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  max-width: 160PX;
  
  // {{ entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;'|raw }}
  max-width: 160px;
  </code></pre>
  <p>According to the Twig documentation:</p>
  <blockquote>
  <p>The operator precedence is as follows, with the lowest-precedence operators listed first: ?: (ternary operator), b-and, b-xor, b-or, or, and, ==, !=, &lt;=&gt;, &lt;, &gt;, &gt;=, &lt;=, in, matches, starts with, ends with, .., +, -, ~, *, /, //, %, is (tests), **, ??, | (filters), [], and .:</p>
  </blockquote>
  <p>Precedence = which gets evaluated first.</p>
  <p>So in your example, the <em>filters</em> will happen first followed then by the <em>concatenation (~)</em>. The <em>ternary operator (? :)</em> has very low precedence, which means it will get evaluated last.</p>
  <p>Just like in algebra, if you put parenthesis around things, that will change the precedence which is also an easy way to group the whole thing into something you can filter as a whole.</p>
  <p>So, if your goal is filter the entire output,  put the entire expression in parenthesis, followed by the filter, so there's no ambiguity as to what's going on:</p>
  <p><code>{{ ( entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;') | raw }}</code></p>
  <p><a href="https://craftcms.stackexchange.com/a/35766/1016">Otto's answer</a> is also a good way to clean up your expression.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-07-09T20:59:47.397Z
Answers.LastActivityDate: 2020-07-09T21:05:01.433Z
Answers.LastEditDate: 2020-07-09T21:05:01.433Z
Answers.UserDisplayName: RitterKnight
Body: <p>If I am outputting content like this:</p>
  <pre><code>{{ entry.maxWidth|length ? entry.maxWidth ~ 'px' : 'unset' }}
  </code></pre>
  <p>...and I want to apply the <code>|raw</code> filter to the output (nevermind if it makes sense in this case; it's just an example), where do I put it?</p>
  <p>Do I go overboard, applying the desired filter to each bit of string, like this?</p>
  <pre><code>{{ entry.maxWidth|length ? 'max-width: '|raw ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  </code></pre>
  <p>Is it applied <em>after</em> any string concatenation (<code>~</code>) is done?</p>
  <pre><code>{{ entry.maxWidth|length ? 'max-width: ' ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  </code></pre>
  <p>Or is once per set of double-brackets (<code>{{ ... }}</code>) sufficient?</p>
  <pre><code>{{ entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;'|raw }}
  </code></pre>
  
Tags: <templating><filter>
Title: How do Twig filters interact with concatenated strings and shorthand "if-else" ( `var ? true : false` ) strings?
ThreadText: # How do Twig filters interact with concatenated strings and shorthand "if-else" ( `var ? true : false` ) strings?
  
  (Asked by: username_0 on 2020-07-09)
  
  If I am outputting content like this:
  
  ```
  {{ entry.maxWidth|length ? entry.maxWidth ~ 'px' : 'unset' }}
  
  ```
  
  ...and I want to apply the `|raw` filter to the output (nevermind if it makes sense in this case; it's just an example), where do I put it?
  
  Do I go overboard, applying the desired filter to each bit of string, like this?
  
  ```
  {{ entry.maxWidth|length ? 'max-width: '|raw ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  
  ```
  
  Is it applied *after* any string concatenation (`~`) is done?
  
  ```
  {{ entry.maxWidth|length ? 'max-width: ' ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  
  ```
  
  Or is once per set of double-brackets (`{{ ... }}`) sufficient?
  
  ```
  {{ entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;'|raw }}
  
  ```
  
  **Tags:** templating, filter
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2020-07-09. Score: 3 | Accepted answer
  
  You are asking about Twig's [operator precedence](https://twig.symfony.com/doc/3.x/templates.html#expressions):
  
  > The operator precedence is as follows, with the lowest-precedence operators listed first: `?:` (ternary operator), `b-and`, `b-xor`, `b-or`, `or`, `and`, `==`, `!=`, `<=>`, `<`, `>`, `>=`, `<=`, `in`, `matches`, `starts with`, `ends with`, `..`, `+`, `-`, `~`, `*`, `/`, `//`, `%`, `is` (tests), `**`, `??`, `|` (filters), `[]`, and `.`:
  
  `|` is higher precedence than `~`, so `'this' ~ 'that' | raw` will evaluate as `'this' ~ ('that' | raw)`. If you want `('this' ~ 'that') | raw` then `()` is the way to go.
  
  Personally, I would use `()` to disambiguate in both cases.
  
  
  ---
  
  ### Answer by username_2 on 2020-07-09. Score: 2
  
  How about doing something like this?
  
  ```
  {% set style = entry.maxWidth|length ? entry.maxWidth ~ 'px' : 'unset' %}
  {{ style|raw }}
  
  ```
  
  
  ---
  
  ### Answer by username_3 on 2020-07-09. Score: 2
  
  [username_1's answer](https://craftcms.stackexchange.com/a/35767/1016) beat me to this while I was writing but it's essentially very similar.
  
  Replace `raw` with, say, `upper` and you'll be able to visually see what's going on:
  
  ```
  // {{ entry.maxWidth|length ? 'max-width: '|raw ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  MAX-WIDTH: 160PX;
  
  // {{ entry.maxWidth|length ? 'max-width: ' ~ entry.maxWidth ~ 'px;'|raw : 'max-width: unset;'|raw }}
  max-width: 160PX;
  
  // {{ entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;'|raw }}
  max-width: 160px;
  
  ```
  
  According to the Twig documentation:
  
  > The operator precedence is as follows, with the lowest-precedence operators listed first: ?: (ternary operator), b-and, b-xor, b-or, or, and, ==, !=, <=>, <, >, >=, <=, in, matches, starts with, ends with, .., +, -, ~, \*, /, //, %, is (tests), \*\*, ??, | (filters), [], and .:
  
  Precedence = which gets evaluated first.
  
  So in your example, the *filters* will happen first followed then by the *concatenation (~)*. The *ternary operator (? :)* has very low precedence, which means it will get evaluated last.
  
  Just like in algebra, if you put parenthesis around things, that will change the precedence which is also an easy way to group the whole thing into something you can filter as a whole.
  
  So, if your goal is filter the entire output, put the entire expression in parenthesis, followed by the filter, so there's no ambiguity as to what's going on:
  
  `{{ ( entry.maxWidth|length ? 'max-width: '~ entry.maxWidth ~ 'px;' : 'max-width: unset;') | raw }}`
  
  [Otto's answer](https://craftcms.stackexchange.com/a/35766/1016) is also a good way to clean up your expression.
  
  
  ---
  
  