Am trying to add a certain class to an anchor element if a given condition is met using symfony's twig templating engine, The following piece of code is being used in an attempt to achieve this:
{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
<a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ (colorData[keys] is defined and colorData[keys]['code'] == c.hexcode) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}
The above code adds the selected class rightfully, to just the first anchor element even when I expect to have 3 anchor elements assigned this class:
{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
<a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ (colorData[keys] is defined and colorData[keys]['code'] in colors | keys) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}
The second code fragment adds the selected class to 3 anchor elements because however you wish to look at it, colorData[keys]['code']has keys that exist in the colors array even if the class isn't being added to the right anchor elements. My question is this; if the comparison operator (==) returns true for matched variable values why isn't the first code fragment working? and why is the second code fragment adding this class to the wrong anchor elements?
A snapshot of the colorData array is shown below:
That of the colors array is thus:
About the first example you're comparing:
"#FFFFFF" == "#FFFFFF"
"#222222" == "#795548"
"#01579b" == "#3e2723"
and after this comparsion it finishes 3 times in condition colorData[keys] is defined. What you can do here is to add one more loop.
{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
{% set isColorInColorData = false %}
{% for exactColor in colorData %}
{% if exactColor.code == c.hexcode %}
{% set isColorInColorData = true %}
{% endif %}
{% endfor %}
<a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ isColorInColorData ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}
Looking to the second example you're comparing a string with an integer.
"#FFFFFF" in [0,1,2]
"#222222" in [0,1,2]
"#01579b" in [0,1,2]
Note that "#FFFFFF" is "equal"(==) to 0 in php!!
So you have to really concentrate on what are you comparing. In twig there is no === operator.
With the first code, you're saying
colorData[keys] is defined and colorData[keys]['code'] == c.hexcode
As you loop over an array of 3 items, keys is going to be 0, 1, 2 (or maybe 1, 2, 3 given it's Twig). So you're saying
colorData[0]['code'] == c.hexcode
i.e. comparing colorData[0] with colors[0], so does #FFFFFF == #FFFFFF, which it does.
Second iteration, you're then comparing colorData[1] with colors[1], so does #795548 == #222222, and so on.
Related
I am using Twig and Timber for a WordPress project. I have the following loop in my template that prints my custom post type titles into a HTML structure.
{% for company in companies %}
{% set dot = "<div class='company-dot'></div>" %}
{% set range = range(10, 20) %}
{{dot}}
{{random(range)}}
<div class="company">
<div class="company-dot dot-active"></div>
<p class="dot-caption">{{ company.title }}</p>
</div>
{% endfor %}
I would like to print my {{dot}} variable x amount of times based upon the number that is generated by {{random(range)}}. How can I do this?
The simplest solution would be to iterate random(range) times with a for loop:
{% for i in 0..random(range(10, 20)) %}
{{ dot }}
{% endfor %}
I don't really know Twig but my guess is that you could to the following:
{% for i in random(range) %}
{{dot}}
{% endfor %}
You already know how to use range, just use it again :
{% set dots_count = random(range) %}
{% for dot_index in range(1,dots_count) %}
{{dot}}
{% endfor %}
{{dots_count}}
Here is a fiddle : https://twigfiddle.com/ko595z
Consider {{ item.nw is defined and item.nw ? ' target="_blank"' }} in the below script. Is there a more concise way to do this?
I thought {{ item.nw ?? ' target="_blank"' }} might work but it returns item.nw if item.nw is not false and target="_blank"' if item.nw is false (reference https://twig.symfony.com/doc/2.x/templates.html#test-operator)
{% macro menu(menu,active) %}
{# menu is an associated array of containing:
name. required
path or id: One of the two are required. If both, URL will use path
path. optional and defaults to javascript:void(0)
id. optional and defaults to not adding an id to the item.
nw. optional and defalts to false. This is a flag for a new window.
class. optional and defaults to not adding an class to the item.
#}
{% for item in menu %}
{% set path = item.path is defined?item.path:"javascript:void(0)" %}
{% set id = item.id is defined?item.id:null %}
{% set class = item.class is defined?item.class:"" %}
{% if (path == active or id == active) %}
{% set class = class~' active ' %}
{% endif%}
{% if loop.first %}
{% set class = class~' first ' %}
{% elseif loop.last %}
{% set class = class~' last ' %}
{% endif %}
<li class="{{ class|trim }}">
<a href="{{ path }}"{{ item.nw is defined and item.nw ? ' target="_blank"' }}{{ id?"id=#{id}" }}>{{item.name}}</a>
</li>
{% endfor %}
{% endmacro %}
Null coalesce will only return the value on the left if "it is defined and not null". Remember that false is a value also.
{{ item.nw ?? ' target="_blank"' }}
When "Strict Mode" is turned on you should check every variable you use in the Twig Template. It might be verbose, but it's better than having your template break.
There are alternative ways to check variables if you use the default filter. https://twig.symfony.com/doc/2.x/filters/default.html
{{ item.nw|default() is not false ? ' target="_blank"' }}
{{ item.nw|default() == 'some_value' ? ' target="_blank"' }}
Im trying in Twig to set different classes depending on how may items that gets rendered. Eg, if only one, if only two, if only three etc I want to set a different class on the item. How would I do that?
<ul>
{% for item in items %}
<li>
{% include 'components/list/person.twig' with item %}
</li>
{% endfor %}
</ul>
If you want to know in advice the length of the loop, you can use the predefined loop variable that is named length:
loop.length: The number of items in the sequence
as example:
{% for user in users %}
{{ loop.index }}/{{ loop.length }} - {{ user.username }}
{% endfor %}
hope this help
I am not sure that i understood your question or not...
But if you want to use different classes on base of index of loop then you can use loop.index in loop.
Hope this will help you
<ul>
{% for item in items %}
{℅ if loop.index == 1 ℅}
// Set class here
{℅ endif %}
<li>
{% include 'components/list/person.twig' with item %}
</li>
{% endfor %}
</ul>
I have the script written in TWIG.
Weight: {{ doc.weight }} kgs<br />
// This part of script shows text information from "detail" and "info" MySQL fields ONLY IF these fields is NOT empty
{% if "" == doc.info_hl %}
{% if '' != doc.detail_code %}
<b>Info: {{ doc.info }}</b>
{% endif %}
{% else %}
Info: {{ doc.info_hl|raw }}
{% endif %}
<br />
{% if "" == doc.detail_code_hl %}
{% if '' != doc.detail_code %}
<b>Details: {{ doc.detail_code }}</b>
{% endif %}
{% else %}
<b>Details: {{ doc.detail_code_hl|raw }}</b>
{% endif %}
Sometimes MySQL field "weight" have values "0.00"
How to modify the code above - DO NOT SHOW "weight" MySQL field IF value in this field "0.00" ?
We can see above how we can do it with empty text fields, but how to do that with decimal fields equals to "0.00" ?
Thanks in advance for any hint to try !
What about simply write
{% if '0.00' != doc.weight %} Weight: {{ doc.weight }} kgs {% endif %}
or even better
{% if not ('0.00' == doc.weight) %}... {% endif %}
?
Please have a look at the is empty test in the Twig documentation. This test operates the same as the PHP empty() function. Here is a handy Type Comparison Table to help you get any idea of what it will return.
If it is expected that this field will only ever contain numbers, or String representations of numbers, you can get around empty('0.00') === FALSE by adding a 0 to the variable:
empty('0.00' + 0) === TRUE
// In Twig: {%if ($value + 0) is empty %}
Here is a list of available Expressions available in Twig Conditionals.
How do I make a simple count loop in Wordpress Timber(Twigg)?
So basically just a loop like this:
($i = 0;0 < 3;i++){
echo $test[i];
}
You could use
{% for value in test %}
{{ value }}
{% endfor %}
that is safer than
{% for i in 0..2 %}
{{ test[i] }}
{% endfor %}
because in second version you have to care about index (is setted? and so on) whereas in the first you don't.
Of course if your final goal is to print only three elements from the array you should consider slice filter
{% for value in test|slice(0, 3) %}
{{ value }}
{% endfor %}