Show stars when value = X
- This topic has 4 replies, 2 voices, and was last updated 5 years, 4 months ago by
Roger.
-
AuthorPosts
-
June 5, 2020 at 6:50 PM #20236
Roger
ParticipantSo 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.June 5, 2020 at 10:26 PM #20241Long Nguyen
ModeratorHi,
In my simple idea, I think you can show stars base on the value of a field in two ways:
- 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 - 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.
<img src="{{ post.prog_badje_1.b1_vallen_opstaan.value }}-star.png">June 7, 2020 at 6:43 PM #20256Roger
ParticipantThat 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!!
June 7, 2020 at 10:26 PM #20259Long Nguyen
ModeratorFor 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/.
June 10, 2020 at 6:05 PM #20312Roger
ParticipantThis thread can be closed. If more people are searching for this they can use my example.
- 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
-
AuthorPosts
- You must be logged in to reply to this topic.