Custom Fields
Re-Envisioned
Support MB Views Show stars when value = X

  • Creator
    Topic
  • #20236
    Resolved Roger
    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #20241
    Long 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
    Roger
    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 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
    Roger
    Participant

    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.
grid gear info copy caret-up caret-down trash