Develop Reference

I don't know why javascript is not working in the below mentioned code for back to top button for the blog page

The javascript in the base footer file is not working and that's why the back-to-top button in the base file is not working as expected. the functionality and all is working in the back-to-top button but the button is not visible because through javascript, I am adding a class active but it is not adding in this page but the base file is also linked to another page and there everything is working fine. I am not able to figure it out why it is not working. Below is the main blog file where base-home-footer file is linked to.
{% extends 'media/assets/base-media.html' %}
{% load main %}
{% load static %}
<!-- title start -->
{% block title %}Prishni- Our Blog{% endblock title%}
<!-- title end -->
<!-- header start-->
{% block header %}
{% include 'assets/base-home-header.html' %}
{% endblock header %}
<!-- header end -->
<!-- Content Start -->
{% block mediaContent %}
{% load markdownExtras %}
<div class="wrapper _bg4586 _new89" id="main-content" role="main">
<div class="_215cd2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="course_tabs">
<nav>
<div class="nav nav-tabs tab_crse justify-content-center">
<a class="nav-item nav-link active" href=" {% url 'media:ourBlog' %} ">Blog</a>
</div>
</nav>
</div>
<div class="title129 mt-35 mb-35">
<h1 align="center">Insights, ideas, and stories</h1>
</div>
</div>
</div>
</div>
</div>
<div class="_205ef5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-5">
<div class="fcrse_3 mt-50">
<ul class="blogleft12">
<li>
<div class="collapse" id="collapse1">
<ul class="category-card">
<li>
All
Students
Instructors
Ideas & Opinions
Edututs+ News
Social Innovation
</li>
</ul>
</div>
<a href="{% getFacebookLink %}">
<div aria-label="facebook" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);" id="facebook-share">
<i style="margin:auto;" class="uil uil-facebook ic45"></i> </div> </a>
<a href="{% getLinkedInLink %}">
<div aria-label="linkedIn" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);">
<i class="fab fa-linkedin-in ic45"></i>
</div> </a>
<a href="{% getInstagramLink %}">
<div aria-label="instagram" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);" >
<i class="uil uil-instagram ic45"></i>
</div> </a>
</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-7">
{% for blog in blogs %}
<div class="blogbg_1 mt-30">
<a href="{% url 'media:singleView' blog.id %}" class="hf_img">
<img src=" {{ blog.blog_img.url }} " alt="" />
<div class="course-overlay"></div>
</a>
<div class="hs_content">
<div class="vdtodt">
<span class="vdt14">{{ blog.count }} views</span>
<span class="vdt14">{{ blog.pub_date }}</span>
</div>
{{ blog.title }}
<p class="blog_des">
{{ blog.body | markdown | safe | truncatewords:40 }}
</p>
<a href=" {% url 'media:singleView' blog.id %} " class="view-blog-link">Read More<i
class="uil uil-arrow-right"></i></a>
</div>
</div>
{% endfor %}
<!-- </div> -->
</div>
</div>
<div class="main-p-pagination">
{% if blogs.has_other_pages %}
<ul class="pagination">
{% if blogs.has_previous %}
<li>
<a class="page-link" href="?page={{ blogs.previous_page_number }}" aria-label="Previous">
PREV
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="" aria-label="Previous">
PREV
</a>
</li>
{% endif %}
{% for i in blogs.paginator.page_range %}
{% if blogs.number == i %}
<li class="page-link active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li class="page-link">{{ i }}</li>
{% endif %}
{% endfor %}
{% if blogs.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ blogs.next_page_number }}">NEXT</a></li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="" aria-label="Next">
NEXT
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock mediaContent %}
{% block footer %}
{% include 'assets/base-home-footer.html' %}
{% endblock footer %}
<!-- Footer End -->
Below is the base-home-footer file where back-to-top button code is implemented.
{% block footer %} {% load main %} {% load static %}
<style>
html {
scroll-behavior: smooth;
}
footer .back-to-top .bttBtn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0;
z-index: 2;
}
footer .back-to-top .bttBtn.active {
opacity: 1;
}
footer .back-to-top .bttBtn.active:hover {
cursor: pointer;
background: #fa6742;
border-color: #fa6742;
}
</style>
<footer
class="footer mt-30"
style="position: relative; margin-top: 200px; text-align: center"
>
<div class="container" style="text-align: right">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
About Us
Blog
<!--Press-->
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
Help
FAQ
Feedback
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
Careers
Advertise
Contact Us
<!-- Copyright Policy
Terms of Use
Privacy Policy -->
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
<div class="edu_social_links">
<a aria-label="faceBook Page" href="{% getFacebookLink %}"
><i class="fab fa-facebook-f"></i
></a>
<a aria-label="LinkedIn Page" href="{% getLinkedInLink %}"
><i class="fab fa-linkedin-in"></i
></a>
<a aria-label="Instagram Page" href="{% getInstagramLink %}"
><i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright-->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer_logo">
<a href=" {% url 'index' %} ">
<img
src=" {% static 'images/sign_logo.svg' %} "
alt="logo, link to home page"
/>
</a>
<span>Copyright © 2021, All Right Reserved Prishni</span>
</div>
</div>
<!-- End Col -->
<div class="col-md-6">
<div class="copyright-menu">
<ul>
<li>
Home
</li>
<li>
Terms
</li>
<li>
Privacy Policy
</li>
<li>
Cookies
</li>
</ul>
</div>
</div>
<!-- End col -->
</div>
<!-- End Row -->
</div>
<!-- End Copyright Container -->
</div>
<!-- End Copyright -->
<!-- Back to top -->
<div id="back-to-top" class="back-to-top" onclick="toTop()">
<div class="btn btn-dark bttBtn" aria-label="Back to Top">
<i class="fa fa-angle-up"></i>
</div>
</div>
<!-- End Back to top -->
</footer>
<script>
function toTop() {
window.scrollTo(0, 0);
$(".back-to-top").addClass("active");
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$(".bttBtn").addClass("active");
} else {
$(".bttBtn").removeClass("active");
}
});
</script>
{% endblock footer %}

Carousel with backend data showing all images or no images

I am running a Django application where I receive the list of images and in my template, I have the following code for Carousel.
The issue is if I use this class "carousel-inner active" while iterating all images are set active and all images are shown on a single screen, if not if I remove active and just keep carousel-inner no image is shown
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner active">
{% for image in data.images %}
<div class="carousel-item active">
<img src="{{ image }}" alt="image 1" class="d-block" style="width:100%">
</div>
{% endfor %}
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>

The answer was to use a for-loop container inside div
<div class="carousel-inner">
{% for image in data.images %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<img src="{{ image }}" class="d-block" style="width:100%">
</div>
{% endfor %}
</div>

I want to show stars based on an array element that is passed as a parameter to my template

So I was trying to loop over an array element which id {{doctor.16}} but I couldn't so I thought I could make it as if conditions but I failed to do this too so can anyone please help me?
this is what I have done so far
<div class="row">
<div class="col-lg-12">
<div class="single_jobs white-bg d-flex justify-content-between" style="width: 50px">
<div class="single_candidates text-center">
{% for doctor in recdoc %}
<div class="thumb">
<img class="img-circle " src="{% static 'static_file/img/candiateds/2.png' %}" alt="" >
</div>
<a href="" ><h4 >{{doctor.6}} {{doctor.7}}</h4></a>
<p> {{doctor.9}}</p>
<div class="best-rating">
<div class="text-warning">
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}
</div>
<div class="best-rating" >
<h5>تقييم الدكتور</h5>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
what I can't do correctly is this part
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}

Since you are not rendering the variable within {% if %} tag.
The part you did wrong should be:
{% if doctor.16 == 1 %}
<i class="fa fa-star"></i>
{% endif %}
See the following official documentation for more details of django templates:
https://docs.djangoproject.com/en/3.0/topics/templates/#syntax

How can I mark button as active based on the page I am at?

when a user clicks a tab I want that tab to show as active in blue. I can do it using if statements like the one I show on the code, but I would be repeating the code a LOT, so there has to be another way, could someone let me a hand please?
The current if statement shows the profile page which is active
<!-- This is saying: inherit everything from __base.html -->
{% extends "storePage/partials/__base.html" %}
<!-- Main base template which contains header and footer too -->
{% load crispy_forms_tags %}
<!-- To beautify the form at signup -->
{% block body %}
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
</div>
{% endblock %}
Here is a screenshot:
[]
How can I do it so when I go to Account it shows blue?
Thanks guys

Try to match your request URL name with your current URL, you can add active class like this or directly to the tag.
<ul>
<li class="{% if 'profile' in request.resolver_match.url_name %} active {% endif %}">
Profile
</li>
</ul>
This should solve your question:
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>

create a common component like this
<angular-anchor-tag [url]="link1"></angular-anchor-tag>
angular-anchor-tag.html
<div>
<a href="url" class="link" (click)="highlightFunction($event)">
<div>
angular-anchor-tag.ts
#Input url;
highlightFunction(event){
//remove all the highlight classes from links
.$("link").removeClass("highlight");
add highlight class to the events target
event.target.addClass('highlight');
}

Bootstrap Carousel in Mezzanine

I would like to have bootstrap carousel of mezzanine galleries. Basically; I am pulling in all the images and I want to have a single row of three images carouse ling. Here is a working snippet of code that I really hate; I would really like to make it work for an unlimited number of images.
{% if page.docpage.gallery %}
<script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>
<link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
{% with page.docpage.gallery.gallery.images.all as images %}
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for image in images %}
{% cycle '<div class="item active">' '' '' '<div class="item">' '' '' '<div class="item">' '' ''%}
{% cycle '<div class="gallery row"><div class="col-xs-12 col-sm-12">' '' ''%}
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
<img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
{% cycle '' '' '</div></div></div>'%}
{% endfor %}
</div>
</div>
{% endwith %}
{% endif %}
I am basically cycling through images and adding other nested tags as required. I've also played around with tracking the loop through forloop.counter|divisibleby:3, but I found that the closing divs were not being applies correctly.
Does anyone have any ideas on how to make this work in jinja/django/mezzanine?
Otherwise I can whip up some javascript to get the job done.
Thanks

Trying to perform this logic in the template isn't ideal, as you have discovered. I would suggest you do it in the view function. Something along these lines:
# Handy function to split a list into equal sized groups,
# See http://stackoverflow.com/a/434328/3955830
def chunker(seq, size):
return (seq[pos:pos + size] for pos in xrange(0, len(seq), size))
# Split images into groups of three
image_groups = chunker(images, 3)
# Pass image_groups to your template context.
# If in a class based view then you can do this in the
# get_context_data() method.
Then in the template, things are much simpler:
{% for group in image_groups %}
<div class="item {% if forloop.first %}active{% endif %}">
<div class="gallery row">
<div class="col-xs-12 col-sm-12">
{% for image in group %}
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
<img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
{% endfor %}
</div>
</div>
</div>
{% endfor %}