I have an editor with a set of buttons, and I want to display only a set of buttons based on twig::render variables.
If I include all I want it to display are buttons available, if I include individual button keys I want to display only that ones.
echo TwigLoader::render('#ui/editor.html.twig'['toolbar'=>['all']]);
echo TwigLoader::render('#ui/editor.html.twig'['toolbar'=>['font','size']]);
For the template I'm using the following code:
{% set toolbar_tools = [
{'font':'<select class="ql-font"></select>'},
{'size':'<select class="ql-size"></select>'}]
%}
<div id="button-container">
<span class="ql-formats">
{% for tool, key in toolbar_tools %}
{{ tool.key|raw}}
{% endfor %}
</span>
</div>
I'm getting an empty container.
Is this a good strategy or there are better ways?
Seems you`re looking for something like this:
{% set toolbar_tools = {
'font':'<select class="ql-font"></select>',
'size':'<select class="ql-size"></select>'
}
%}
<div id="button-container">
<span class="ql-formats">
{% if toolbar|length > 0 %}
{% for t in toolbar %}
{% if t == 'all' %}
{# show all options #}
{% for tool in toolbar_tools %}
{{ tool|raw }}
{% endfor %}
{% else %}
{# show defined options #}
{{ attribute(toolbar_tools, t)|raw }}
{% endif %}
<br />
{% endfor %}
{% endif %}
</span>
</div>
Hope you will be fine with that.
Related
I am looping through an array and would like to add a class if it is the first item.
I have tried
{% if field|first %}
{% if field.first %}
{% if field.first() %}
{% if loop|first %}
{% if loop.first %}
{% if loop.first() %}
none work, please help. (the reason I don't use css pseudo first is that this is a grid layout and I have am doing responsive layout things with it)
{% for field in row.fields %}
<div class="c-product-table__item {% if field|first %}{{ first_item }}{% endif %} ">
<span class="c-product-table__text">{{ field.text }}</span>
</div>
{% endfor %}
I don't know why twig filters are not working, I solved it another way. I set a var and made it blank after first loop
{% set thiscount = 'first_item' %}
{% for field in row.fields %}
<div class="c-product-table__item {{ thiscount }}">
<span class="c-product-table__text">{{ field.text }}</span>
</div>
{% set thiscount = '' %}
{% endfor %}
I have a twig template to display audio options (Auto play and Continuos play) as shown in the screen shot:
Click to see the screen shot of the page
The following is the code in my twig file. {{ audio_options_form}} renders the form with the checkboxes.I want to display the check boxes only once if {{ item.audio }} is true. Please let me know what changes should I make:
<div id="textcontent">
{% set field = data|slice(2) %}
{% set field = field|slice(0, -1) %}
<div class="col-md-12">
<div class = "source-box audio">
{% for item in field %}
{% if item.audio %}
{{ audio_options_form }}
{% if data.play.autoplay == 1 %}
<audio autoplay controls src= "{{item.audio}}" id = "audio-play">
Your browser does not support the
<code>audio</code> element.
</audio>
{% elseif data.play.continuousplay == 1 %}
<audio autoplay controls src= "{{item.audio}}" id = "audio-play" onended="continousPlay('{{data.lastlevel}}')">
Your browser does not support the
<code>audio</code> element.
</audio>
{% else %}
<audio controls src= "{{item.audio}}" id = "audio-play">
Your browser does not support the
<code>audio</code> element.
</audio>
{% endif %}
<div id="source-controls">
{# {% if allow_edit == 1 %}
<a class="edit-text" href="{{ path('heritage_text_manager.editsource', {'sourceid': item.uniqueid}, {'query': {'destination': path('heritage_ui.contentpage', {'textid': textid})}}) }}">{{ 'Edit'|t }}</a>
{% endif %} #}
<a class="more use-ajax" data-toggle="modal" data-dialog-type="modal" href="{{ path('heritage_ui.metadata', {'sourceid': item.uniqueid}) }}">{{ 'More'|t }}</a>
</div>
{% endif %}
{% endfor %}
</div>
Either create a 2nd loop with a flag or use the filter filter.
{% set show_audio_form = false %}
{% for item in field %}
{% if item.audio %}
{% set show_audio_form = true %}
{% endif %}
{% endfor %}
{% if show_audio_form %}{{ audio_options_form }}{% endif %}
{% for item in field %}
... display audio ...
{% endfor %}
{% if items|filter(v => v.audio|default)| length %}
{{ audio_options_form }}
{% endif %}
{% for item in items %}
... display audio ...
{% endfor %}
demo
I want to pass a macro(icon()) to a nested template of mine, through passing the markup as text.
But due to the |raw filter, Twig wont render the markup as Twig. Is there a way to achieve this? Basically I get this rendered {{ icon("phone-call") }}
main.html.twig
{% embed "Block/context_box_column_lane.html.twig" with {
'title': 'Test',
'subtitle': 'Subtitle',
'text': '
<p class="context-box-text">{{ icon("phone-call") }}</p>
'
} %}{% endembed %}
context_box_column_lane.html.twig
{% extends "Block/section_sidebar.html.twig" %}
{% block section_content %}
{% embed 'Block/context-box.html.twig' %}{% endembed %}
{% endblock %}
context-box.html.twig
{% from "#html/macros/icons.twig" import get as icon %}
<div class="b-context-box {% if has_border %}has-border{% endif %}">
{% if subtitle %}
<h3 class="section-subtitle">{{ subtitle|trans }}</h3>
{% endif %}
{% block content %}
{% if text is defined %}
{{ text|trans|raw }}
{% endif %}
{% endblock %}
</div>
I have this loop displaying six links from left to right. I would like to add a break after the fourth link but I'm new at Twig and I don't know how to add it in. Do I need another loop inside the For loop?
{% if contactLinks|length <= 6 %}
{% for link in contactLinks %}
{{ link|raw }}
{% endfor %}
{% elseif contactLinks|length >= 6 %}
{% for link in contactLinks %}
{{ link|raw }}
{% endfor %}
{% endif %}
Twig has a special loop variable that you'll need to use. See here:
http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable
{% for link in contactLinks %}
{{ link|raw }}
{% if loop.index == 4 %}
<br/>
{% endif %}
{% endfor %}
http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable
I have the following code in my controller:
$this->get('session')->getFlashBag()->add(
'storeinfo',
'hayooo'
);
return $this->redirect($this->generateUrl('AppMainBundle_item_detailed_view', array('id' => $picture->getId(), 'caption' => $picture->getURLCaption())), 301);
and my twig looks like this:
{% if app.session.flashbag.get('storeinfo') %}
<div class="comment-confirmation">
{% for flashMessage in app.session.flashbag.get('storeinfo') %}
<p> <b> anjing banget </b></p>
{% endfor %}
</div>
</div>
{% else %}
<p> Oopsie </p>
{% endif %}
so it goes to the first if block however inside the forloop, there is no flashMessage. Why is this?
The FOSUserBundle does something like this, you could also have a look at this great imlementation of a FlashListener
{% for type, messages in app.session.flashbag.all() %}
{% for message in messages %}
{# Will print all your messages #}
{{ message }}
{# Will do something in particular for storeinfo if you want to #}
{% if type is sameas('storeinfo') %}
<p> <b> anjing banget </b></p>
{% endif %}
{% endfor %}
{% endfor %}