I'm new to Twig and I'm trying to figure out how to achieve the following.
I have an object with a set of properties that I want to render with different Twig templates depending on which type of property it is (text, images, date, etc).
I want to render them as follows:
<div class="row">
<div class="title">Title of property</div>
<div class="propertycontent">
//Specific property content depending on property type
</div>
</div>
My problem is that I can't figure out to skip the complete output if the property is not defined. I want to be able to use parent templates to take care of the "wrapping" of the rendered property content. Is it possible to use parent templates that returns nothing if the property value is undefined? Is there another good solution that does not rely on include "begin"/"end" for wrapping each template?
Thanks in advance.
Solution: Call parent with value(might be null) and title
Parent (propery_wrapper.twig):
{% if value %}
<div class="row">
<div class="title">{{title}}</div>
<div class="propertyContent">
{% block content %}{% endblock %}
</div>
</div>
{% endif %}
child (for height property):
{% extends 'property_wrapper.twig' %}
{% block content %}
{{ value.value|number_format(2, ',') }} m
{% endblock %}
Related
I'm trying to render a conditional form to a twig template in OctoberCMS...
[renderForm] formCode = "contact-form"
==
{% if data.show_form == true %}
<div class="container">
<div class="row">
<div class="col unnamed-character-style-86">
This will be a form {{ data.form_to_show }}!!!
{% component 'renderForm' %}
</div>
</div>
</div>
{% endif %}
I need to set the formCode variable to the template data data.form_to_show you can see in the twig section.
I'm really new to October and am a bit stuck on this but it sounds like it should be simple enough.
All help welcome.
I was being an idiot and worked it out myself.
[renderForm] formCode = {{ data.form_to_show }}
I have a little problem in twig to render symfony forms,
so, first I will explain the context of it.
In Twig, blocks are defined in a certain order on a template:
{# base.layout.html.twig #}
{% block firstBlock %}
{% endblock firstBlock %}
{% block secondBlock %}
{% endblock secondBlock %}
And when we extends this template we can write this:
{# child.layout.html.twig #}
{% embed "base.layout.html.twig" %}
{% block secondBlock %}
{{ form_widget(form.submit_button) }}
{% endblock secondBlock %}
{% block firstBlock %}
{{ form_widget(form.some_field) }}
{{ form_rest(form) }}
{% endblock firstBlock %}
So the problem is with the form() functions in twig which renders Symfony forms.
I am trying to generate a submit button at the very end of a modal window
but the problem is that form_rest() renders all parts of the form not already rendered.
There is a little fix to avoid form_rest to render form.submit_button, it's to set form.submit_button as an already rendered field with:
{% do form.submit_button .setRendered %}
But with this form.submit_button is never rendered
Of course the finality of all this is to don't remove the form_rest instruction.
So I search something to unset rendered value of form.submit_button after the form_rest instruction or even better a way to choose the order of blocks generation of a template.
Like this:
{% block secondBlock with(1) %}
{{ form_widget(form.submit_button) }}
{% endblock secondBlock %}
{% block firstBlock with(2) %}
{{ form_widget(form.some_field) }}
{{ form_rest(form) }}
{% endblock firstBlock %}
Thank you for your help !
If it is just for a submit button, you can remove it from your form type and write it in html, it is'nt a problem, and it will work.
The problem is that you render first the rest (including the button), and after you try to render the button but it is already rendered...
Of course, your html button must be inside < form > tags.
If you want to keep your submit button from your form type,
1 solution is to move it using some javascript ...
2 solution is to mark it as rendered (as you have done), and write the exact html of your submit button in the place you want.
[edit]
You can also render every field of your form in the first block, render your submit button in the second block, and put form_rest after all these (as all the fields have been rendered, it will not have something to render,
this is a solution also)
If that's just a matter of a submit button that has no logic and no mapping at all, the easiest way is to render your submit button in HTML directly and removing it from your form.
<input type="submit" value="Submit"> {# ¯\_(ツ)_/¯ #}
Another solution is to put your modal in a modal_layout.html.twig, and then use the embed tag that is exactly made for this kind of issues.
modal_layout.html.twig
<div class="modal">
<div class="form">
{% block form_part %}{% endblock %}
</div>
<div class="submit pull-right">
{% block submit_part %}{% endblock %}
</div>
</div>
your_page.html.twig
{% embed 'modal_layout.html.twig' %}
{% block submit_part %}
{{ form_row(form.submit_button) }}
{% endblock %}
{% block form_part %}
{{ form(form) }} {# won't render submit again #}
{% endblock %}
{% endembed %}
But IMO the second solution, even if it appears cleaner, does not worth it for a stupid submit button.
Cheers
can someone help me.
How can I modify default template to bootstrap version?
Because input's doesn't have a class "form-control".
Here is defaul:
{% block a2lix_translations_widget %}
{{ form_errors(form) }}
<div class="a2lix_translations tabbable">
<ul class="a2lix_translationsLocales nav nav-tabs">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<li {% if app.request.locale == locale %}class="active"{% endif %}>
<a href="#" data-toggle="tab" data-target=".{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }}">
{{ locale|capitalize }}
{% if form.vars.default_locale == locale %}[Default]{% endif %}
{% if translationsFields.vars.required %}*{% endif %}
</a>
</li>
{% endfor %}
</ul>
<div class="a2lix_translationsFields tab-content">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<div class="{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }} tab-pane {% if app.request.locale == locale %}active{% endif %} {% if not form.vars.valid %}sonata-ba-field-error{% endif %}">
{{ form_errors(translationsFields) }}
{{ form_widget(translationsFields) }}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block a2lix_translationsForms_widget %}
{{ block('a2lix_translations_widget') }}
{% endblock %}
I have no idea what should I insert/delete/modify :(
Thanks
I have done a custom form template for a2lix_translations with bootstrap(full code is too long and not optimal to paste here) But to get the classes I need like form-control into the widgets I have done the following:
{%for field in translationsFields%} {# further break the transliationsfields into individual inputs #}
{%if field.vars.attr is not empty and field.vars.attr['class'] is defined and field.vars.attr['class']=="tinymce"%}
{{form_widget(field ,{'attr':{'class':' tinymcertl'}} )}}
{%else%}
{{form_widget(field,{'attr':{'style':'direction:rtl','class':class~' form-control'}} )}}
{%endif%}
{%endfor%}
The ugly code above is basically saying, if the widget already has a class, add the class form-group to it. If the widget does not have a class at all, set the class to be form-group. I have done that if statement to avoid null pointers since if I try to reference the form class and there isn't one, the code will crash. And if I just do set class to form-group, it will erase the previous classes.
I hope this helps. My full code might not be helpful to you because the languages I was working with involved left to right language and right to left languages, so a lot of conditions had to be implemented to orient my page in the right direction, which is messy and you might not need...
PS: this was done on symfony 2.7 or so. Did not test on symfony 3.
in my case sf 3.2 i just did this change in my config.yml and all forms are bootstraped :
# app/config/config.yml
twig:
//....
form_themes:
- 'bootstrap_3_layout.html.twig'
I'm using the Grav CMS to create a modular web page; however, I'm having difficulty customizing the layout based on how the content is generated.
I've followed the documentation found Grav main site from which I've model my site after.
My folder structure is essentially:
pages
01.home
_section1
_section2
In each section folder I have my .md file. And each section is considered a sub-page of 'home'.
I've created the template file, modular.html.twig, in which I have the following code:
{% extends 'partials/base.html.twig' %}
{% block content %}
{% for child in page.children() %}
{{ child.content() }}
{% endfor %}
{% endblock %}
This code iterates through sub-pages to load the content onto the home page. In my template I'm simply printing the result of the content using {{ content }}
What I end up with is a page with vertically stacked content and repeating html,
as such.
What I want to do is uniquely define each sub-page (section) so that I can manipulate the content differently in my html, as such.
I've thought about creating separate template files for each section, but much of my content is nested.
For instance I have something akin to:
<div class="row">
<div class="section-1">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
<div class="section-2">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
</div>
Is it possible to accomplish what I'm trying to do with this framework? If so, how might I go about it?
Thank you
I think there are many ways to do this. For me, I use page's header to set CSS class of each section.
My section's md files could look like this (for example mysection.md)
---
title: Section 1
section_class: section-1
---
This is the content of section 1.
Here is my modular.html.twig:
{% extends 'partials/base.html.twig' %}
{% block content %}
<div class="row">
{% for child in page.children() %}
<div class="{{ child.header.section_class }}">
{{ child.content() }}
</div>
{% endfor %}
</div>
{% endblock %}
In my mysection.html.twig I print the section's content
<h1>{{ page.content }}</h1>
I hope this helps.
I have this simple form where I need a custom template for a field to render something right next to the <input> tag. Since I won't be needing this anywhere else, I thought I'd put it right in the same template as the form like suggested here:
{% form_theme form _self %}
{% block text_widget %}
{{ block('form_widget_simple') }}
something
{% endblock %}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
That's pretty much the whole template (to be used with ajax, hence no surrounding markup).
The issue now is, "something" gets rendered right at the beginning of the output where the block text_widget is declared, as would any other block. Its rendered fine in the form next to the <input>:
something
<form name="form" method="post" action="">
<table id="form"><tr>
<td> <label for="form_Search" class="required">Search</label></td>
<td> <input type="text" id="form_Search" name="form[Search]" required="required" autofocus="autofocus" />
something
</td>
</tr><tr style="display: none">
<td colspan="2"><input type="hidden" id="form__token" name="form[_token]" value="dUwdoiz9vo1TJTRjvyUcz9Rwd-D7pTvqUH-R0zCtg28" /></td>
</tr></table>
</form>
This obviously makes inline theming completely unusable, so I think I might be doing something wrong...
How do I get rid of that extra "something" at the beginning?
Having the question already written up and also solved the problem, I might as well answer:
The solution is to derive the template from a dummy base template to swallow any output that's outside of blocks defined in the base template:
{# empty.html.twig #}
{% block content %}
{% endblock %}
And for the actually needed template:
{% extends 'empty.html.twig' %}
{% form_theme form _self %}
{% block text_widget %}
{{ block('form_widget_simple') }}
something
{% endblock %}
{% block content %}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
{% endblock %}
One probably wouldn't think twice about it when customizing a field in a regular template that already uses inheritance, but this way it feels like a hack...