How to format the address in TWIG? - html

I have a Drupal site and I want to format the address in TWIG.
How do I delete spaces before and after the address?
How to replace the tags "<br>" by " - " ?
Here is the TWIG code :
<strong>Adresse postale :</strong> {{ store.address }}
Here is the rendering :
<pre class="text-left"><strong>Raison sociale :</strong> Poupette & Cacahuète.
<strong>Adresse postale :</strong>
<div class="field field--name-address field--type-address field--label-hidden field--item"><p class="address" translate="no"><span class="address-line1">rue du vermont</span><br>
<span class="postal-code">14600</span> <span class="locality">Honfleur</span><br>
<span class="country">France</span></p></div>
<strong>Téléphone :</strong> .
<strong>Adresse électronique :</strong> poupette.cacahuete14#gmail.com
<strong>Boutique :</strong> https://www.s1biose.com/fr/boutique/poupette-cacahuete
Immatriculé au de sous le numéro .
</pre>

If you would like complete control over the render of this, you can access the individual address 'pieces' by using store.address.my_value. So for instance, your address as you described it in a comment would look like:
<span class="my-class">
{{ store.address.address_line1 }} - {{ store.address.postal_code }} {{ store.address.locality }} - {{ store.address.country }}
</span>
If this is the way you always want this to appear, consider adding a theme override for the address-plain.html.twig template to render this as you would like consistently. You can start by copying the module's template from docroot/modules/contrib/address/templates/address-plain.html.twig and altering it within your theme to be as you like.

You can use replace and trim functions like this:
{{ store.address|trim|replace({'<br>': '-'})|raw }}

Related

NVDA not reading v-html tags

NVDA Screen reader is reading following:
<span class="sr-only"><spring:theme code="checkout.doctor.name" /> {{ doctor.firstName.toLowerCase() }} {{ doctor.lastName.toLowerCase() }}</span>
But not reading the following with v-html content in it:
<span class="sr-only" v-html="phoneNumber(doctor.doctorContactsDetails)">{{ doctor.firstName.toLowerCase() }} {{ doctor.lastName.toLowerCase() }}</span>
Tried adding spring theme in it, still no luck:
<span class="sr-only" v-html="formatAddress(doctor.doctorAddress)"><spring:theme code="checkout.doctor.address" /></span>
Try adding the spring:theme content before the data that you want your screen reader to read:
Here is the order: (span class for sr-only) spring:theme (data to read)
((span class="sr-only" ) (spring:theme code="checkout.doctor.address" ) (span v-html="formatAddress(doctor.doctorAddress)"))
Close span tags accordingly

Display only particular toggle on multiple cards when clicked in VUEJS

I am working on this feature where i have multiple cards with a toggle inside it.
I am getting the values for the card from the api, and using the
When i am trying to click on the toggle, the toggle on the cards opens where by i want to display the particular card toggle.
Here is the code for it:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle.collapse>
{{ value.name }}
</b-link>
<b-collapse id="collapse">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
Please assist
The problem is with the same id attribute of the collapse. You need to change the id assignment. Try the code below:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle="`collapse-${values.id}`">
{{ value.name }}
</b-link>
<b-collapse :id="`collapse-${values.id}`">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>

Span tag in another span generates new line

Could you tell me how to avoid new line if value.second is present in file with .tpl extension? Or maybe use another tag?
<span v-style font-color="secondary" font-type="caption-2"> {{ value.first | number }}
<span v-if="value.second "> - {{ value.second | number}}</span> m</span>
For now, if it's present I get new line
white-space:nowrap; might be helpful. It will prevent inline break
<span v-style font-color="secondary" font-type="caption-2"> {{ value.first | number }}
<span v-if="value.second " style="white-space:nowrap"> - {{ value.second | number}}</span> m</span>

Symfony twig div

I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!

Django - Shorten text content retrieved in html template

I would like to know how to shorten text content retrieved to get a preview instead of getting a block of text in the html template
From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
To:
aaaaaaaaaaaaaaaaaaaaaaaaaaa....
The code that is used to retrieve the contents is :
<a class="list_content" href="/qna/view" onclick="document.forms['q_title_{{ q.id }}'].submit(); return false" title="{{ q.content }}">{{ q.content }} </a><br/>
Many thanks!
If you are using Django 1.4, truncatechars filter will be the best way to go:
{{ q.content|truncatechars:25 }}
Assuming that "q.content" is a string you could use the slice command:
{{ q.content|slice:":255" }}
truncatechars template filter for django 1.4