Twig - How to render an HTML rating element - php

What I am trying to achieve is to render a simple 5-star rating HTML element based on a number ( 0-5 )
Example :
{{ user.rating }} // returns integer 4
Output should be:
<div class="rating">
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star-empty"></i>
</div>
// 4 lighted stars out of 5
Thanks

You can archive your problem with this code:
<div class="rating">
{% for i in 1..5 %}
{% set starClass = (user.rating >= i ? "star voted" : "star-empty") %}
<i class="{{ starClass }}"></i>
{% endfor %}
</div>
See the working solution on this twigfiddle
Explanation:
From the doc:
If you do need to iterate over a sequence of numbers, you can use the
.. operator:
{% for i in 0..10 %}
* {{ i }}
{% endfor %}
The Twig built-in .. operator is just syntactic sugar for the range function.

Simple way :
{% set stars, count,starsResult = 4 , 1 , "" %}
{% for i in range(1, 5) %}
{% if stars >= count %}
{% set starsResult = starsResult ~ "<i "star active">" %}
{% else %}
{% set starsResult = starsResult ~ "<i class="star disable">" %}
{% endif %}
{% set count = count + 1 %}
{% endfor %}
{{ starsResult }}

Related

count key in twig symfony

i try to simply count object into a city
enter image description here
in paris, i have 5 object, i don't want show 11111 but just 5,
that my code
{% set newAnnounceCity = [] %}
{% for item in announceCity %}
{% if item.infoCity is not null %}
{% if item.infoCity.city not in newAnnounceCity %}
<span class=" font-semibold mr-2 text-left flex-auto">
<a href="{{path('app_city_show',{slug: item.infoCity.slug})}}">
<button class=" m-2 p-2 pl-5 pr-5 bg-transparent border-2 border-red-500 text-red-500 text-lg rounded-lg hover:bg-gradient-to-b hover:from-red-600 hover:to-pink-500 hover:text-gray-100 focus:border-4 focus:border-red-300">
{{ (item.infoCity.city) }}
{% for key in item.infoCity.announce|keys %}
{{key|length }}
{% endfor %}
{% set newAnnounceCity = newAnnounceCity|merge([item.infoCity.city]) %}
</button>
</a>
</span>
{% endif %}
{% else %}
{% endif %}
{% endfor %}
someone can help me
i try to count an keys object
It's a bit hard to guess without a sample structure of your input array, but maybe try replacing
{% for key in item.infoCity.announce|keys %}
{{key|length }}
{% endfor %}
with simply
{{ item.infoCity.announce|length }}

Twig show n keys of array or all

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.

Symfony - How can I omit the first item in a twig template's loop?

I want to display news without first one. How I can achieve this?
Here is code I have to change:
<div class="home-box-news carousel-news slide home-box-shadow" id="news" style="clear: both;">
<ol class="carousel-indicators news-box">
{% for i in 0..news|length-1 %}
{% if loop.index is not divisibleby (2) %}
<li data-target="#news" data-slide-to="{{ i / 2 }}" {% if loop.first %}class="active"{% endif %}></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for item in news %}
{% if loop.index is not divisibleby (2) %}
<div class="item{% if loop.first %} active{% endif %}">
<div class="carousel-caption">
{% endif %}
<h3>{{ item.name }}</h3>
<p class="date">{{ item.createdAt|date('d.m.Y, G:i') }}</p>
<p {% if loop.index is divisibleby (2) %}style="border-bottom: 0;" {% endif %}>{{ item.content[:110]|nl2br }}{% if item.content|length > 110 %}... <a class="more" href="{{ path('home_news_index') }}">czytaj dalej</a>{% endif %}</p>
{% if loop.index is divisibleby (2) or loop.last %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
There is more concise version of what Robert suggested:
{% for item in news[1:] %}
You can use slice filter which works like array_slice() function in PHP.
{% for item in news[1, news.length -1 ] %}
put this in your loop to omit first news
{% if loop.index0 > 0 %}
{# display your news #}
{% endif %}
Of course there is another answer which may/may not be cleaner/simpler/w/e - don't pass the row to Twig in the first place.

Shopify - Insert image between list of items

I am trying to list a load of products, and insert an image between the second last and the last item. At the moment I have this code on my index:
<ul class="clearfix">
{% for product in collections.drinks.products %}
{% include 'snippet-product-item' with 'four' %}
{% endfor %}
</ul>
This in my product-item:
{% if snippet-product-item == '' %}{% assign snippet-product-item = 'four' %}{% endif %}
<li class="{{ snippet-product-item }}-per-row clearfix">
<div class="coll-image-wrap{% unless product.available %} sold-out{% endunless %}">
{% if product.available == false %}
{% assign ratio = settings.product_img_w_to_h_ratio | times: 1.0 %}
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</div><!-- .coll-image-wrap -->
</li>
So I'm guessing I need to put some code in my index block to work out how many items there are in the collection, and then for the last one add an extra image in before it. Can anyone help me figure out how that might be done please?
This is my useless attempt:
{% assign num = 0 %}
{% for product in collections.drinks.products %}
//Do something like this to work out number of items in collection
{% assign num = temp %}
// Then minus one and insert the image so it appears between second to last and last items
{% endfor %}
I would try something like this:
{% for product in collections.drinks.products %}
{% if forloop.last %}
// Insert image...
{% endif %}
{% include 'snippet-product-item' with 'four' %}
{% endfor %}

For loop with a passed parameter to twig in Symfony2

I am a beginner in symfony2 .
I have a problem in a loop with a passed parameter to twig tepmlate: (show nbr stars )
{% for i in 0..4 %}
<span class="glyphicon glyphicon-star"></span>
{% endfor %}
The number of iteration (nbr) is passed as a parameter, I have tested this , but not working.
{% for i in 0..{{nbr}} %}
<span class="glyphicon glyphicon-star"></span>
{% endfor %}
Say you want to iterate with a given parameter
return $this->render('AcmeFoo::foo.html.twig', array(
'number' => 42
));
Your TWIG template should look like
{% for i in 0..number %}
{{ i }}
{% endfor %}
This also works for runtime-set variables
{% set number = 5 %}
{% for i in 0..number %}
{{ i }}
{% endfor %}

Categories