CODEWITHSUNDEEP
phpcsssymfonytwig
user2241859
user2241859

Reputation: 165

Add CSS in Symfony2 twig express

In Twig HTML file here is a very normal line:

{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }}

How to add a <strong></strong> tag to wrap username?

Upvotes: 3

Views: 254

Answers (2)

Martin Lie
Martin Lie

Reputation: 1187

~ is Twig's string concatenation operator. From Twig's docs:

~: Converts all operands into strings and concatenates them.
{{ "Hello " ~ name ~ "!" }} would return Hello John! (assuming name is 'John').

 

In your case, this should translate to something like:

{{ 'layout.logged_in_as'|trans({'%username%': '<b>'~app.user.username~'</b>'}, 'FOSUserBundle') }}

 

Or perhaps:

{% set boldUsername = '<strong>' ~ app.user.username ~ '</strong>' %}
{{ 'layout.logged_in_as'|trans({'%username%': boldUsername}, 'FOSUserBundle') }}

 

If autoescaping of the html is a problem, you may need to apply the raw filter:

{% set boldUsername = '<strong>' ~ app.user.username ~ '</strong>' %}
{{ 'layout.logged_in_as'|trans({'%username%': boldUsername}, 'FOSUserBundle')|raw }}

 

Finally, if you prefer making styling in css (who doesn't), add a <span> with a class instead of <strong>:

{% set usernameMarkup = '<span class="username">' ~ app.user.username ~ '</span>' %}
{{ 'layout.logged_in_as'|trans({'%username%': usernameMarkup}, 'FOSUserBundle')|raw }}

And in a css file:

.username { font-weight: bold; }

Upvotes: 4

Sehael
Sehael

Reputation: 3736

<strong>{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }}</strong>

Everything between the {{ }} twig parenthesis will be evaluated to a string, so this would be equivalent to:

<strong>Username</strong>

Upvotes: 1

Related Questions