Show stars when value = X

Support MB Views Show stars when value = XResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #20236
    RogerRoger
    Participant

    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 }}
    <br>
    {% 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.

    #20241
    Long NguyenLong Nguyen
    Moderator

    Hi,

    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.
    #20256
    RogerRoger
    Participant

    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!!

    #20259
    Long NguyenLong Nguyen
    Moderator

    For free, you can use Font Awesome 5 Free Regular to use the star icon https://fontawesome.com/icons/star?style=regular

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

    Follow this guide to know how to load Font Awesome in your site https://sridharkatakam.com/load-font-awesome-5-wordpress/.

    #20312
    RogerRoger
    Participant

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

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