Fields/custom text show translated label for field

Question

I am building a bilingual site with Drupal 10 and I am using views to show content items listings. In my views I am using field: Custom text to format the teasers of each item the way I want.

I have translated all the fields of my content types and my issue is how to show in the custom text each field's label.

Here is how my view's configuration looks like:

Here is an example of such a custom text:

<div class="col-sm-12 teaser-wrapper">
    <div class="teaser-image">{{ field_image }}</div>
    <div class="teaser-header">{{ title }}</div>
    <div class="teaser-text">{{ body }}</div>
    <div class="row teaser-field">
        <div class="col-xs-12 col-sm-12 teaser-field">
                <span class="lbl">Location: </span>
                <span class="val">{{ field_region }}</span>
        </div>
        <div class="col-xs-12 col-sm-12 teaser-field">
                <span class="lbl">Path Length: </span>
                <span class="val">{{ field_path_length }}</span>
        </div>
        <div class="col-xs-12 col-sm-12 teaser-field">
                <span class="lbl">Activities: </span>
                <span class="val">{{ field_nature_activities }}</span>
        </div>
    </div>
</div>

As you can see at the moment I am just using hardcoded values for the labels.

How can I print their translated values?

Answer 1

You can use

<span class="lbl">{% trans %}Location{% endtrans %}: </span>