Achieving a customized CSS ribbon that displays exclusively on specific images sourced from a Django database

I am currently utilizing the Django framework for my project. I have implemented a CSS that applies a ribbon to an image, but I only want this ribbon to appear on certain images stored in the database. Within the HTML file for displaying product details, I have written the following code snippet:

{% if product.get_image_url %}
    
<div class="ribbon-wrapper-orange"><div class="ribbon-orange">{{ product.duration }}</div></div>

<a href='{{ product.get_absolute_url }}'><img id='img' src='{{ product.get_image_url }}' class='img-responsive' /></a>

{% endif %}

While the above code works properly when there is a time duration specified in the database, it presents an issue when no duration is provided - an empty ribbon still appears on the image. Any suggestions on how I can ensure that the ribbon only shows up on images with a time duration specified in the product field?

Answer №1

Before displaying the div elements, it's essential to verify that product.ribbon exists and is not equal to None. Here's a suggested approach:

{% if product.duration %}<div class="ribbon-wrapper-orange"><div class="ribbon-orange">{{ product.duration }}</div></div>{% endif %}

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

Boost the dimensions of the content property within a CSS class

I am currently using the content property to display a dashed arrow "-->" in my CSS class. However, the arrow appears very small and I would like to increase its size directly in the CSS class itself. This arrow is meant to be displayed before each elem ...

Using several autocomplete-light dropdown menus in a Django template

I am in the process of creating a web application that necessitates searching for a specific user record by inputting either the first name OR last name. While two more search attributes will be added in the future, I am currently facing issues with incorp ...

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform. One of the Excel features I am currently working on involves displaying a description when hovering ...

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

Django remembering the template's name without fail

When working with Django 1.7, I initially set the template name in this way: return render_to_response('myapp/search_page.html', args, context_instance=RequestContext(request)) However, I later realized that I had made ...

The timestamped model's __init__() function encountered a duplicate argument for 'on_delete'

I am facing an issue while trying to establish a foreign key relationship in DRF models with the on_delete parameter set. fk_city = models.ForeignKey("region_mgmt.City", "warehouses", on_delete=models.SET_NULL) TypeError: __init__() ...

The Material UI - makeStyles function is having difficulties generating the intended styles

After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned. For example, consider the following component: import React, { Component } fro ...

Is there a restriction on the maximum size of a CSS file?

Currently, I am working on building a site using ASP.NET MVC. The CSS file that I have been working on has now grown to 88KB in size and contains over 5,000 lines of code. Recently, I have noticed that some styles that I added towards the end of the file a ...

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

I am completely new to CKAN and front-end development. I've been scouring through various html/css files without success in locating where I can adjust the field sizes in the resources form (where users can modify metadata via GUI). I would like to r ...

Swap the Text for a Button

I've been searching for a solution to this problem, but all I seem to find online is advice on how to "replace button text." What I'm trying to achieve is to have text change into a button when hovered over. I've attempted using fadeIn/fade ...

Trouble with buttons in table cells

There is a problem with a button placed in a table cell that spans two rows and does not fill the second row. How can I ensure that this button fills both rows? I have attempted to adjust the height in the button's style as well as in the table cell i ...

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

What is the best way to select just the innermost row of a nested table for emphasis?

I am working on a project with multiple nested tables and I am looking for a way to highlight the innermost row below the mouse pointer. How can I achieve this? Just to provide some context, I am using nested tables to present recursive tabular data, with ...

Problem within Django Page Listing: "Failure to Display Data"

While trying to retrieve processed data into my SQLite class database, I encountered an issue where no results were displayed, but there was no error code reported. On related pages, each member will have their own profile page with information. I intend ...

What is causing the additional space at the bottom?

Why does my centered black border triangle have an extra bottom margin causing a scroll bar to appear? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; background: blue; } .canvas { border: 10px s ...

IE7 disregards the margin set in a div after a div that has been positioned absolutely

Within a container, I have two divs - the first one with absolute positioning. Strangely, in IE7, the second div doesn't seem to acknowledge the top margin. Padding works fine, but for visual consistency, I prefer using margin. The culprit appears to ...

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

Height of inline-block list items in ul is not properly adjusted

I am working on a horizontal navigation bar using inline-block for the li tags. Here is the code snippet: <ul> <li><a href="#">HOME</a></li> <li><a href="#">FEATURES</a></li> <li><a href ...

Create a dynamic layout with two navigational sub-menu blocks positioned side by side

When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other. I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be wo ...

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...