Between once a second and 10 times a second I get the following message displayed on the console:
"GET /%7B HTTP/1.1" 404 26453
After running python manage.py runserver
I believe it has some relation to my carousel image strip because it stops the timer animation from scrolling across the top of the image to indicate how long left the image will be shown for until it moves on to the next one:
{% for image in images %}
<img src="/static/images/background-carousel.png" style="z-index: -1">
<li data-masterspeed="1500" data-slotamount="7" data-transition="zoomout">
<div class="tp-caption customin customout" data-captionhidden="on"
data-customin="x:0;
y:100;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:1;
scaleY:3;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;
transformOrigin:0% 0%;"
data-customout="x:0;
y:0;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:0.75;
scaleY:0.75;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;"
data-easing="Power4.easeOut"
data-endeasing="Power1.easeIn"
data-endspeed="300"
data-speed="750"
style="z-index: 9;
text-align:center;">
<img alt="{{ image.title }}" class="boff_white" data-bgfit="cover"
data-bgposition="center center" data-bgrepeat="no-repeat"
src="{{ MEDIA_URL }}{{ image.image }}"
style="width: {{ image.width }}; height: {{ image.height }}"/></center>
</div>
</li>
{% endfor %}
After the above code there are some more images hard-coded.
I am wondering what it means and how it can be fixed?
I am currently taking over development on the website from someone else (the for loop scope of code is the only bit that is mine).
Using Django 1.11 (cannot upgrade this)
Thank you.
Check answers for solution!
But what does the message mean?
Edit:
From here: https://www.w3schools.com/tags/ref_urlencode.asp %7B is a { ASCII encoding reference...
There was a {# without a closing #} in a src="{% static 'images/carousel...' %}" in the hard-coded section.
%7B is the ASCII encoding reference (see here: https://www.w3schools.com/tags/ref_urlencode.asp)
Related
I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
I am trying to figure out wether it would be easier to implement a modal/alert system from my views.py or through the html. Currently, I have a matching system where users like or dislike each other, and if they like each other, I send them to another html and it says they matched and can message each other. I'd like to do that through a modal or alert. I am thinking it would be easier to implement that through the views.py, but I don't know how to do it, I only know how to do it through html. But through html, I'm not sure how to compare the vote values between each user like I do in my views. What should I do? I currently have mingle.html which is where users like and dislike each other, and then if they both like each other, it sends them to match.html.
views.py/CreateVote
#login_required
def create_vote(request, profile_id, vote):
profile = get_object_or_404(Profile, pk=profile_id)
UserVote.objects.create(
user=profile,
voter=request.user,
vote=vote
)
other = UserVote.objects.filter(
voter=profile,
user=request.user,
vote=True
)
if vote and other.exists():
profile.matches.add(request.user)
request.user.matches.add(profile)
return render(request, 'dating_app/match.html', dict(
match=profile,
))
return redirect('dating_app:mingle')
mingle.html
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
{% if profile %}
<section>
<div class="col-md-3 mt-3">
<div class="card profile-card-5">
<div class="card-img-block">
<img class="card-img-top" src="{{ profile.photo.url }}" alt="Card image cap">
</div>
<div class="card-body pt-0">
<h5 class="card-title">{{profile.username}}</h5>
<p class="card-text">{{profile.description}}.</p>
Like
Dislike
</div>
</div>
</div>
</div>
</div>
</section>
{% else %}
<br><br>
<p>Wait for more people to join!</p>
<p>Help us get more user. Share this link to your friends! http://localhost:8000/</p>
{% endif %}
<br/>
match.html
{% extends "dating_app/base.html" %}
{% load static %}
{% block content %}
<style>
.col-4 {
display: inline-block;
}
</style>
<div class="container ">
<h2>It's a match!</h2>
<div class = "row">
<div class="col-lg-4">
<img src="{{ user.photo.url }}" width= "300" height= "300" object-fit = "cover" >
</div>
<div class="col-lg-4">
<img
src="{% static 'images/matching_cupid.png' %}" width= "300" height= "300" object-fit = "cover" >
</div>
<div class="col-lg-4">
<img src="{{ match.photo.url }}" width= "300" height= "300" object-fit = "cover" >
</div>
</div>
<p>You and {{ match.username }} like each other!</p>
<p>Start messaging </p>
<br>
<p>Keep mingling!</p>
</div>
{% endblock %}
You can return a message via the Django built-in message framework and render that out in your dating_app/match.html.
You already got the necessary view logic here:
# Import the framework
from django.contrib import messages
[...]
# In this case deliver a message along with the template
if vote and other.exists():
profile.matches.add(request.user)
request.user.matches.add(profile)
# Add message
messages.add_message(request, 'You have a match!')
return render(request, 'dating_app/match.html', dict(
match=profile,
))
return redirect('dating_app:mingle')
[...]
In your match.html you render the message like so:
[...]
<div id="match_message">{{ message }}</div>
[...]
Javascript for alert
// Dont forget to import jQuery and link the js file in your html file
$( document ).ready(function() {
alert( {{ message }} );
});
My case is this: I've got a Django website, and have implemented functionality to scroll through a list of photos using next- and previous arrow-buttons. This functionality works perfectly if I go to 127.0.0.1:8000, where it looks like this: 1
But on localhost:8000 this functionality does not work, and it looks like this: 2
The relevant template-code looks like this:
<div class="apartment-images">
{% for image in apartment.apartmentimage_set.all %}
<img src="{{ image.image.url }}" alt="Apartment image" class="{% if forloop.first %}active{% endif %}">
{% endfor %}
<div id="left-arrow" onclick="prevImage()"></div>
<div id="right-arrow" onclick="nextImage()"></div>
<div class="ellipses">
{% for i in apartment.apartmentimage_set.all %}<div class="ellipse {% if forloop.first %}active{% endif %}"></div>{% endfor %}
</div>
</div>
And the javascript used to show the next and the previous image:
<script>
let activeImageIndex = 0;
let apartmentImages = $('.apartment-images img');
let dots = $('.ellipse');
function nextImage() {
if (activeImageIndex < apartmentImages.length - 1) {
activeImageIndex++;
} else {
activeImageIndex = 0;
}
changeImage(activeImageIndex);
}
function prevImage() {
if (activeImageIndex > 0) {
activeImageIndex--;
} else {
activeImageIndex = apartmentImages.length - 1;
}
changeImage(activeImageIndex);
}
function changeImage(index) {
dots.removeClass('active');
dots.eq(index).addClass('active');
apartmentImages.removeClass('active');
apartmentImages.eq(index).addClass('active');
}
</script>
Now, as I've said, this functionality works on 127.0.0.1:8000 but not on localhost:8000 on the Google Chrome browser, and it works on both localhost:8000 and 127.0.0.1:8000 on Microsoft Edge browser. I've tried clearing the cookies for the localhost on Chrome.
Any help would be very much appreciated, thanks :)
I found out how to fix this!
I deleted all the buffered images and files in my chrome browser, and now it works on localhost as well :)
Here's how to do so:
https://7labs.io/tips-tricks/clear-site-specific-cookies-cache.html
I am building a web app using flask. I found that I am retying the same thing over and over with a minor edit into everyone of my HTML pages so I want to make it into a template. How can I make it a dynamic template? Below is the code that I use for my ABOUTUS page which is just one line different from my CONTACT page.
About Us Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
Contact Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
</div>
The only change is that I move the menu-item-divided pure-menu-selected line from one line to the other based on what template I am loading. I cannot think of a way to do this dynamically so that I can turn this into a template that I can just extend for every file.
You could just use standard jinja template inheritance as mentioned in comment above.
Docs here: Template Inheritance
Method 1:
Import request method in your routes.py file,
Use jinga if condition to check whether page is pointing to
current url endpoint.
<li class="pure-menu-item{% if request.path == '/contact'} menu-item-divided pure-menu-selected{% endif %}"><a href="/contact" class="pure-menu-link">Contact</a</li>
Tip: You can use flask dynamic url difination {{ url_for('contact') }} instead of hard coding urls.
Method 2: (recommended)
This is not related to flask jinja but does the work as intended in front-end but using JavaScript with jQuery library.
Add this script at the end of the template before closing body tag.
jQuery version
<script>
let current_path = "{{ request.path }}"
if (current_path === window.location.pathname) {
$(".pure-menu-item a[href='"+current_path+"']")
.prop("href", "#").closest('li')
.addClass("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
Vanilla JS (plain js)
<script>
let current_path = "{{ request.path }}"
let current_nav = document.querySelctor("div.pure-menu-item a[href='"+current_path+"']");
if (current_path === window.location.pathname) {
current_nav.setAttribute("href", "#");
current_nav.closest('li').classList.add("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
What it does?
If the current url matches to the url specfied in navigation above, it adds the menu-item-divided pure-menu-selected class to the div and disables the current url routing by replacing the actual url to #.
Clean and elegant.
Why?
If you use JavaScript you don't have to define hundreds of {% if... %} in back-end, those if statements you defined in back-end will be checked in every pages user loads, additionally you just saved on more ifs and elses to check if loaded page is nav link's page and disable routing by change url to #. Wow you just saved millions of cpu cycles. :-)
I am trying to create a voting system similar to that of stackoverflow, but I can't figure out how to call on the css instead of the images.
I have the following code:
<input type="image" id="uparrow{{ vote.id }}" src="{{ MEDIA_URL }}static/img/aup{% if vote and vote.is_upvote %}mod{% else %}grey{% endif %}.PNG">
How can I change the code so it calls a css class instead of an img src?
You are looking for something like:
<input type="image" id="uparrow{{ vote.id }}"
src="{{ MEDIA_URL }}static/img/vote.png"
class="otherclass {% if vote and vote.is_upvote %}upvote{% else %}novote{% endif %}" />
The image would have classes "otherclass" and "upvote" in one case, "otherclass" and "novote" in the other.