Using Star ratings in amp CSS with Django template Tag: A complete guide

I need to implement a star rating display on amp pages based on values retrieved from the database using django template tags. How can I achieve this considering the ratings are in float format? Additionally, is it possible to apply the same code to non-amp pages?

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<style amp-custom>
  .rating {
    --star-size: 3;  /* using CSS variables for flexible dimensions */
    padding: 0;  
    border: none;  
    unicode-bidi: bidi-override; direction: rtl;  
    text-align: left;  
    user-select: none;  
    font-size: 3em;  
    font-size: calc(var(--star-size) * 1em);  
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 1em;
  }
  
  .rating > label {
    display: inline-block;
    position: relative;
    width: 1.1em;  
    width: calc(var(--star-size) / 3 * 1.1em);
  }
  
  .rating > *:hover,
  .rating > *:hover ~ label,
  .rating:not(:hover) > input:checked ~ label {
    color: transparent;  
    cursor: inherit;  
  }
  
  .rating > *:hover:before,
  .rating > *:hover ~ label:before,
  .rating:not(:hover) > input:checked ~ label:before {
    content: "★";
    position: absolute;
    left: 0;
    color: gold;
  }
  
  .rating > input {
    position: relative;
    transform: scale(3);  
    transform: scale(var(--star-size));
    top: -0.5em;  
    top: calc(var(--star-size) / 6 * -1em);
    margin-left: -2.5em;  
    margin-left: calc(var(--star-size) / 6 * -5em);
    z-index: 2;  
    opacity: 0;  
    font-size: initial; 
  }
  
  form.amp-form-submit-error [submit-error] {
    color: red;
  }
</style>

The page showcases multiple products, each displaying their star rating within the product card div.

Answer №1

To display the star rating without using the provided code for accepting the star rating, you can utilize CSS instead of JavaScript on amp pages. Simply place a transparent star rating image and overlay it with a filled image of the same size. Then, use clip with Django template tags to present it effectively.

<img style="position: absolute;clip: rect(0px,{{i.rating}}px,0px,0px);top: 0px;left: 0px" src="https://filled-up-star.png"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

What are the steps to transform an object containing arrays into strings and then embed them into my HTML code?

Here is the code I need to add to my errors array and send the values to my HTML client-side template: { "email": [ "user with this email already exists." ] } I am looking for something like this: "user with t ...

Setting radio button selection programmatically in React Material-UI: A step-by-step guide

Currently utilizing a radio button group from material-ui. I have successfully set a default selection using defaultSelected, however, after rendering, I am unable to programmatically change it. The selection only updates upon clicking the radio. Is ther ...

React-beautiful-dnd does not function properly when used with the overflow auto property

Currently, I'm in the process of developing an application similar to "Trello" and have encountered a few challenges along the way. I've successfully created the main components such as the "Board," "Cards," and "Tasks." Each card has a fixed wid ...

Goodbye.js reliance on lodash

In my search for the most lightweight and speedy jQuery implementation for server-side NodeJs, I've come across Cheerio as the best option. However, I've noticed that Cheerio has a code-size of around 2.6 MB, with approximately 1.4 MB attributed ...

What is the process for uploading an image encoded in base64 through .ajax?

I am currently working with JavaScript code that successfully uploads an image to a server using an AJAX call. Here is the ajax call snippet that is functioning properly. $.ajax({ url: 'https://api.projectoxford.ai/vision/v1/analyses?', ...

Leveraging the power of $lookup and $mergeObjects in aggregation

I'm looking to join a collection. Previously, I used only lookup to get separated fields that are joined, but now I need the results similar to MySQL join. I have tried using $lookup and $mergeObjects for this action, but they are not working well. H ...

Displaying divs depending on dropdown selection - Troubleshooting script issue

When I try to display certain divs based on dropdown selection using the script below, it works fine on a simple page. However, when I implement it on my current development page, it completely messes up the layout, turning everything black and adding stra ...

My email submission function is malfunctioning

my contact form in my website is not working properly. I have tried troubleshooting the issue by checking the contact.php file but it doesn't seem to be the problem. The script that I am using for the form submission is shown below: <!--Contact U ...

Difficulties in Configuring Testacular Integration with Jasmine and Angular

I'm in the process of setting up a unit testing environment for my project and encountering some difficulties. Specifically, I am attempting to utilize Testacular with Jasmine to test my AngularJS code. One of the challenges I am facing involves a mo ...

Retrieve the data from an input field in Selenium automation

Despite the text being visible in the input Text Box, I am encountering difficulties capturing it from the html DOM. I attempted to use getAttribute('value'), however, since the value attribute is not present, this method proved unsuccessful. Sim ...

The collapsed navbar button in Bootstrap is unresponsive

I run two websites. The Collapsed Navbar functions properly on the first site, located at (Index Site). <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" ...

Performing a search in Django using raw MySQL commands

I am currently in the process of developing a custom search engine that includes 4 search fields, aiming to search within a MySQL table. This snippet from my views.py covers the search functionality, pagination, and listing of the entire table data. def ...

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

What is the best way to target the final n children using CSS?

Is there a way in CSS to target and style the last N elements of a parent container? The number of elements we want to match is not fixed, but could vary. How can this be achieved using CSS? ...

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

MongoDB results are being pushed into an array, yet the array continues to stay devoid of any data

Hello all! This is my introductory question on stack overflow, so I appreciate your patience. I am currently working on a controller function that is responsible for rendering the Google Maps API. My goal is to iterate through the results fetched from Mon ...

The linear gradient feature in asp.net does not function properly on Internet Explorer versions 6 through 8

After running the following code below, it appears that the linear gradient is not functioning properly in IE6 to IE8. background-image: linear-gradient(45deg, white 0%, gray 50%, black 100%); I attempted to resolve this issue by adding the code snippet ...

Assign a class to a button created dynamically using Angular

While working on my project, I encountered an issue where the CSS style was not being applied to a button that I created and assigned a class to in the component.ts file. Specifically, the font color of the button was not changing as expected. Here is the ...

Ways to retrieve every element inside a specific div container

Is there a way to select all elements inside a div except for specific ones? For example, consider the following structure: <div id="abc"> <div class="def"> sagar patil</div> <div class="pqr"> patil</div& ...