0
I have a problem with my page links, when I click on the picture in the brand details there should be a link for the brands and the related products, but when i hover over it seams that there is no link. However when I inspect the page the link appears to be there (check the attached pictures).
The following is Django template for the product brands detail :
The following is Django template for the products brands list :
Do the links work and that your question is about what is displayed on hover? Or do your links not work?
Specifically, what lines in the template are you referring to? It would be more helpful if you copy/paste the portion of the template causing you problems into the body of your post.
Side note, when pasting templates or code here, enclose the template (or code) between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted.
(Also, you posted the same url for both links.)
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 isotope-items">
{% for object in object_list %}
<div class="col all vegetables">
<div class="brand-wrap">
<div class="brand-media">
<img src="{{object.images.url}}" alt="brand">
<div class="brand-overlay">
<a href="/products/brands/{{object.slug}}"><i class="fas fa-link"></i></a>
</div>
</div>
<div class="brand-meta">
<h4>{{object.name}}</h4>
<p>(45 items)</p>
</div>
</div>
</div>
so the problem “I think” is in this peace of code .
so originally there should be a url showing on the image in green , which help the user to navigate to products associated with the brand.
However, in my case the only way to display the image is when i inspect the page on the browser.
thats the complete HTML page
{% extends 'base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'en/css/brand-single.css' %}">
{% endblock css %}
{% block body %}
<!--=====================================
BANNER PART START
=======================================-->
<section class="inner-section single-banner" style="background: url(images/single-banner.jpg) no-repeat center;">
<div class="container">
<h2>brand list</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">brand-list</li>
</ol>
</div>
</section>
<!--=====================================
BANNER PART END
=======================================-->
<!--=====================================
BRAND LIST PART START
=======================================-->
<section class="inner-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="top-filter">
<div class="filter-show">
<label class="filter-label">Show :</label>
<select class="form-select filter-select">
<option value="1">12</option>
<option value="2">24</option>
<option value="3">36</option>
</select>
</div>
<div class="filter-short">
<label class="filter-label">Short by :</label>
<select class="form-select filter-select isotope-select">
<option value="*">show all</option>
<option value=".vegetables">vegetables</option>
<option value=".fruits">fruits</option>
<option value=".drinks">drinks</option>
<option value=".fishes">fishes</option>
<option value=".meats">meats</option>
</select>
</div>
</div>
</div>
</div>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 isotope-items">
{% for object in object_list %}
<div class="col all vegetables">
<div class="brand-wrap">
<div class="brand-media">
<img src="{{object.images.url}}" alt="brand">
<div class="brand-overlay">
<a href="/products/brands/{{object.slug}}"><i class="fas fa-link"></i></a>
</div>
</div>
<div class="brand-meta">
<h4>{{object.name}}</h4>
<p>(45 items)</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% if is_paginated %}
<div class="row">
<div class="col-lg-12">
<div class="bottom-paginate">
<p class="page-info">Showing 12 of 60 Results</p>
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{page_obj.previous_page_number}}">
<i class="fas fa-long-arrow-alt-left"></i>
</a>
</li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="page-item"><a class="page-link active" href="#">{{i}}</a></li>
{% elif i > page_obj.number|add:'-4' and i < page_obj.number|add:'4' %}
<li class="page-item"><a class="page-link" href="?page={{i}}">{{i}}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{page_obj.next_page_number}}">
<i class="fas fa-long-arrow-alt-right"></i>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</section>
<!--=====================================
BRAND LIST PART END
=======================================-->
{% endblock body %}
Now I’m confused. In your original post you were talking about links, but now you’re talking about images.
So what is wrong here? In both images, I see a line of five pictures with names underneath.
How is what you’ve displayed different from what you’re expecting?