Custom Fields
Support MB Views Show stars when value = X

  • Creator
  • #20236
    Resolved Roger

    So i'm trying to work with the view option.

    i've got a couple of button_group fields in the custom fields. The options are 1,2,3,4 and 5.
    i can show the value in the view section with the following code:

    {{ post.leerling_voornaam }} is bezig met {{ user.Groepskeuze.title }}
    {% if post.Groepskeuze.title == 'Badje 1 - 17:30' %}
    B1: Bellen blazen in het water - {{ post.prog_badje_1.b1_bellen_blazen_in_het_water.value }} <br>
    B1: vallen en opstaan - {{ post.prog_badje_1.b1_vallen_opstaan.value }}
    {% endif %}

    Offcourse the output is the value of the button. But now comes the hard part for me, i dont want to see a number but i want this in a star rating.

    How can i manage that?
    The code above is just a small piece, i have a totall of 40 button groups where i need a star rating system.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
  • #20241
    Long Nguyen


    In my simple idea, I think you can show stars base on the value of a field in two ways:

    1. Make 5 images with the name 1-star.png (show 1 star), 2-star.png (show 2 stars) ... 5-star.png (show 5 stars). Then echo the value of the field in the <img> tag
    2. <img src="{{ post.prog_badje_1.b1_vallen_opstaan.value }}-star.png">

    3. Make an image show 1 star, then use a loop to show the number of stars with the <img> tag or style a class to show the star.

    That will do! thnx!

    But also found a other solution... Install the Fontawesome plugin.
    then go to view

    {% for i in 1..5 %}
    {% set starClass = (value_of_the_rating_will_be_placed_here_without_the_{} >= i ? "fa fa-star checked" : "fa fa-star unchecked")  %}
         <i class="{{ starClass }}"></i>
    {% endfor %}

    In the CSS

    .checked {
      color: orange;
    .unchecked  {
      color: Grey;

    BTW this did cost me almost 2 months.... can you guys do a good views tutorial, please!!

    Long Nguyen

    For free, you can use Font Awesome 5 Free Regular to use the star icon

    <i class="far fa-star"></i>

    Follow this guide to know how to load Font Awesome in your site


    This thread can be closed. If more people are searching for this they can use my example.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.