I have a the following checkbox field (1)
and I would like to add an image to the checkbox.
I added it in twig file in the following way (2) but it is bad placed.
I would like to place it in the following way (3)
// (1)
->add('remove_avatar', 'checkbox', array(
'label' => 'user.label.current_avatar',
'required' => false,
'mapped' => false,
))
// (2)
{{ form_widget(form) }}
<span class="user">
<img src="{{ get_avatar(user) }}" class="user-avatar">
</span>
// (3)
<div class="controls">
<img src="some_like">
<input type="checkbox" id="profile_remove_avatar" name="profile[remove_avatar]" value="1">
<label class="control-label" for="profile_remove_avatar">Remove the current avatar</label>
</div>
What is the best way to do it?
Instead of rendering the total form with only form_widget(form) you can do more if you render each field for itself. Like this:
<div class="controls">
<img src="some_like">
{{ form_widget(form.remove_avatar) }}
{{ form_label(form.remove_avatar) }}
</div>
If you got more fields in your form render them the same way OR place them all at the end with form_rest(form).
This is how you customize a symfony2 form from inside a twig template. So i think this is the best and easiest way.
Related
I have this layout. What I want to do is, when a button Join is clicked, hide that button and show an input field in its place like this, and if another button is clicked the first one returns to its normal state and another input field is displayed like this.
I'm working with Angular 13. Here is a code snippet of the concerned div.
<div *ngIf='show === "default"' class="list">
<div class="form-listItem" *ngFor="let room of roomList">
{{ room }}
<button class="formBtn" (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
</div>
</div>
In the Ts file you initialize two variable with boolean type true and false.
and create write a fun like:-
func1(){
this.a = true;
this.b = false;
}
call this function on the button and the panel you want to open on click that div give - *ngIf with these two variable.
you could add a property for room object, some like 'joined', then add ngIf directive for view change
<button class="formBtn" *ngIf="!room.joined" (click)="enterPassword($event.target); room.joined = true" id="{{ room
}}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-" *ngIf="room.joined">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</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!
(Sorry for my english, i'm trying to not use Google Translate ^^)
So.. I created a CPT UI "projets" which contain actually 2 posts (FMXD and Siemens) as you can see here :
I want that when i click on FMXD, i have a first page only displaying the post_thumbnail of FMXD. Like This :
As you can see, my page is displaying FMXD and Siemens and i don't understand why...
Actually, i have a single-projets.php :
<?php
/*
Template Name: Projets
Template Post Type: post, page, product, projets
*/
$context = Timber::get_context();
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
Timber::render( [ 'single-projets.twig'], $context );
?>
and a single-projets.twig :
<div class="container-fluid">
{% for post in posts %}
<div class="row">
<div class="imgProjets">
<img src="{{ post.thumbnail.src }}" alt="">
</div>
<div class=" offset-9 col-3 title">
<a href="{{ post.link }}">
{{ post.title }}
</a>
</div>
</div>
<div class="row">
<div class="offset-9 col-3">
{{ post.meta('clients') }}
</div>
</div>
<div class="row">
<div class="offset-9 col-3 bg-light text-dark">
See the projects
</div>
</div>
{% endfor %}
</div>
And after that, i want to click on "See the projets" and see the content of FMXD OR Siemens, and not both.
Sorry it was quit long, but i really need your help, i'm really blocked....
This is the kind of code you might want in archive-projets.php, but not in a template for a single post.
This part:
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
is getting all projets posts and passing them to the view to be rendered in a loop.
You can replace that entire part with:
$context['post'] = new Timber\Post();
You don't need a loop in your Twig view at all, since there's only one post to render. So just remove {% for post in posts %} and the corresponding {% endfor %}.
I want to create forms in symfony2. I need this HTML structur for each control.
<div class="form-group">
<label class="col-md-2 control-label">Firstname:</label>
<div class="col-md-10"><input type="text" name="firstname" class="form-control">/div>
</div>
Now is my question, how can i add the div with the class form-group and how can i surround the input element with the div .col-md-10?
$builder->add('firstname', 'text', array(
'attr' => array(
'class' => 'form-control'),
'label_attr' => array(
'class' => 'col-md-2 control-label'
)
)
);
Check How to customize Form Rendering section of the documentation.
You may need to override the form_widget block (form_widget_compound block to go into details).
Find here the default behavior of each twig form helper.
The Form Theming Sub Chapter contains many relevant examples on how to customize any given form field block.
Can you help me to write this form tag in blade sintax:
<form name="room" id="1" method="post" class="narrow_width">
Thank you!
See http://laravel.com/docs/html for the Form syntax and methods.
You can wrap these in Blade tags.
{{ Form::open() }}
{{ Form::text('username') }}
Etc... In your case
{{ Form::open(array('name' => 'room', 'method' => 'post', 'class' => 'narrow_width', id => '1')) }}