Question

I am using KNPPanginator Bundle, and pretty satisfied with it.

But i cannot find out, how to replace my sorters at the top, with icons instead of text. Here is my Twig code:

    {% block pagination_head %}
    <thead>
    <tr>

        <th>{{ pagination.sortable('likes', 'u.likePoints')|raw }}</th>
        <th>{{ pagination.sortable('title', 'u.title')|raw }}</th>
        <th>{{ pagination.sortable('date', 'u.created')|raw }}</th>



    </tr>
    </thead>
    {% endblock %}

So what do i need to do, to get a thumps up icon, instead of the word “like”?
i tried pasing an <img src...> in there, but did not help.

Answer 1

Well, first of all you need to have an image asset of a thumb-up. Let’s say you do get one and put it here: web/images/like.png

Then all you need to do is this (assuming pagination.sortable('likes', 'u.likePoints') returns the string “like”):

<th>{{ asset( "images/" ~ pagination.sortable('likes', 'u.likePoints') ~ ".png" }}</th>

Of course, you’ll probably want to put the image resource in your bundle and publish it with assets:install web, for encapsulations/organizational purposes.

EDIT

There are a lot of ways to solve what you’re talking about. One would be to make a macro.

In Your\Bundle\Resources\views\Macros\bootstrap.html.twig

{% macro icon_class( type ) %}
  {% set type_class_map = {
    like: 'icon-user'
  } %}
  {{ type_class_map[type] }}
{% endmacro %}

Then, in the template you need it in

{% import "YourBundle:Macros:bootstrap.html.twig" as bootstrap %}

{% set heading = pagination.sortable('likes', 'u.likePoints') %}
<th class="{{ bootstrap.icon_class(heading) }}">{{ heading }}</th>