How can I make the item's image field optional using HTML and CSS?

I am currently working on a project for an e-marketplace. In my database, I have set the ImageField as optional. However, I am facing difficulty in making it optional on the HTML page in the code snippet below:


 <div class="mt-6 px-6 py-12 bg-gray-100 rounded-xl">
        <h2 class="mb-12 text-2xl text-center"> Newest items </h2>
        <div class="grid grid-cols-3 gap-3">
            {%for item in items%}
                <div>
                <a href="#">
                <div>
                { % if (item.image.url) % }
                    <img src='{{ item.image.url}}' class="rounded-t-xl">
                { % endif % }
                </div>
            <div class="p-6 bg-white rounded-b-xl">
                <h2 class="text-2xl">{{item.name}}</h2>
                <p class="text-gray-500">Price: {{item.price}}</p>
                </div>
            </a>
            </div>
            {% endfor %}
        </div>
 </div>

Could someone guide me on how to write the if statement accurately to retrieve item.image.url only when an image exists?

I attempted to add an if statement as demonstrated in the code above.

Update: I have managed to solve the issue. Updating this post in case someone else encounters a similar problem. The solution involved using if ...is not None.

Answer №1

{%- if item.picture is not None %}
    <img src='{{ item.picture }}' class="rounded-img">
{%- 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

Identifying text within clicked divs using identical ids

$(document).ready(function(){ $('#peoplelayer').click(function(){ $(this).fadeOut(500); var str = $(this).text(); alert(str); }); }); This is code where I use the same id "#peoplelayer" for all the divs. When on ...

Is it possible to personalize CSS properties using PHP sessions?

Currently, I am a beginner in PHP and enrolled in a technical school class to learn more about it. Our latest assignment involves using sessions to modify four CSS properties: body background-color, a:link color, a:hover color, and h1 color. The task inclu ...

React Router Link Component Causing Page Malfunction

Recently, I delved into a personal project where I explored React and various packages. As I encountered an issue with the Link component in React Router, I tried to find solutions online without any luck. Let me clarify that I followed all installation st ...

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...

Ionic 2 hides the form input area within its input component

I set up a login page, but the input fields are not showing up on the form. Here is my current code: <ion-list> <ion-item> <ion-label fixed>Username</ion-label> <ion-i ...

jQuery method for implementing alternating row colors that are not sequential

Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden: $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white $(" ...

Creating a Website Optimized for Mobile Devices

As a beginner web developer, I am in the process of creating a mobile-friendly website system. Currently, I am utilizing Bootstrap for responsiveness, PHP5, MySQL, and occasionally Ajax/JQuery. Recently, I came across JQuery Mobile. While I have been usin ...

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

Is it feasible to activate the calendar widget by simply clicking anywhere within the input field?

I've been working on a custom React component for a date picker, and I'm facing an issue. I want the calendar widget to open whenever a user clicks anywhere inside the input field, not just on the arrow icon. However, no matter what I try, the ca ...

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

What causes my paragraph textContent to vanish after briefly displaying its value?

As a beginner in JavaScript and HTML, I am taking on the challenge of learning these languages from scratch independently. I have encountered an issue with my code where the word "Hi!" briefly flashes below the "Click Me!" button before disappearing compl ...

Ways to link two PHP scripts

My code snippet below aims to select a location from a dropdown menu and generate a pie chart based on data fetched from a PostgreSQL database. However, I am facing an issue where the pie chart displays all column values instead of only the selected locati ...

Utilizing Vue.js i18n for a multi-line text display

Currently, I am implementing i18n single file component in order to provide translation support for my application. In order to achieve this, I have been utilizing the i18n tag as shown below: <i18n> { "fr": { "text": "Lore ...

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

Replace the instances of "foo" with "bar" in the phrases "foo bar" and "bar foo."

Using a regular expression, I am able to locate specific words and then manipulate them in some way. For example: I want to surround all the words I find with <strong> tags: $string = 'Hello, there is foo, after there is bar but now I need fo ...

Clearing text fields in jQuery by cloning them

I am attempting to duplicate the friend fields (name + email) when the "add another friend" button is clicked. However, the cloned fields end up including the text inside them, which is not desired! Does anyone have any suggestions or solutions? Here is t ...

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...