Hello everyone.
Inside my django_project → map_app → templates → map_app directory I have the following HTML file where I am trying to include three images inside “@keyframes change”, but am finding it hard to access them as they are inside the django_project → static → images → SaintPetersburgMetroImages directory.
How can I include these images inside the url() function within “@keyframes change”?
Is there a way to include the images inside the HTML file without directly displaying them, but then use their file names inside the url() function? I appreciate any help I can get with this. Thank you.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'styles/city.css' %}" type="text/css"/>
<style>
.change-background {
animation: change 10s infinite ease-in-out;
}
@keyframes change {
0% {
background-image: url(static/images/SaintPetersburgMetroImages/avtovo-station.jpg);
}
50% {
background-image: url(static/images/SaintPetersburgMetroImages/kirovsky-zavod.jpg);
}
100% {
background-image: url(static/images/SaintPetersburgMetroImages/zvenigorodskaya.jpg);
}
}
</style>
</head>
<body>
<div class="change-background">
</div>
</body>
</html>
Inside django_project → static → images → SaintPetersburgMetroImages I have the following three image files:
avtovo-station.jpg
kirovsky-zavod.jpg
zvenigorodskaya.jpg
You probably want to use the static tag with those elements to ensure that the url references are created correctly when this is deployed and you run collectstatic.
I have tried to do the following with a static tag:
{% static “/images/SaintPetersburgMetro/avtovo-station.jpg” as avtovo-station %}
background-image: url(avtovo-station);
The problem seems to be that the url() function expects the starting directory to search from to be saint-petersburg-english-and-transportation as I can see from the following:
Not Found: /saint-petersburg-english-and-transportation/avtovo-station
[20/Jul/2022 17:56:39] "GET /saint-petersburg-english-and-transportation/avtovo-station HTTP/1.1" 404 10516
How else would you use the static tag to ensure that the URL references are created correctly for each of those images?
How can I change this?
Review the use of the static tag with the as clause and verify that your code is correct and not just being mis-rendered on the forum. (You didn’t surround what you’ve tried with the backticks, so I don’t know if you’re missing something or it’s just not showing correctly on the forum.)
Also, what are your static-file-related settings in your settings? (STATIC_URL and STATIC_ROOT) Is this a development or production environment? Is DEBUG=True or FALSE?
You might want to review the docs at How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django.
The following is what I have inside django_project → django_project → settings.py:
DEBUG = True
STATIC_URL = '/static/'
# Here we are configuring the Django project, so that it read
# the 'static' folder inside the first "django_project" directory.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
BASE_DIR / 'static',
# BASE_DIR / 'Exam' / 'static',
]
The HTML file titled “SaintPetersburgEnglishAndTransportation.html” is inside the django_project → map_app templates → map_app directory and so is its URL pattern. What I am showing below is NOT the URL pattern for the map_app. The URL patterns dictionary for map_app does not have + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) added onto it.
I wouldn’t think this is an issue since ‘DEBUG’ is set to ‘True’?
The following URL is inside django_project → django_project → urls.py:
urlpatterns = [
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# This urls module is in our main project directory. A particular pattern will
# tell our website which urls should send us to our "blog" application.
# If we are currently in DEBUG mode, we want to add the following two specific URL patterns.
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL,
document_root=settings.STATIC_ROOT)
The issue is that when I have background-image: url(avtovo-station.jpg); or even background: url(avtovo-station.jpg);, the terminal shows that a GET request is being made to the /saint-petersburg-english-and-transportation/avtovo-station.jpg URL pattern.
[20/Jul/2022 19:40:36] "GET [20/Jul/2022 19:40:36] "GET /saint-petersburg-english-and-transportation/avtovo-station.jpg HTTP/1.1" 404 10528 HTTP/1.1" 404 10528
Is there a way to get around this? Reading the documentation for the static files does not seem to provide a solution to this.
What is showing here in the forum for what you have, is incorrect - but I can’t tell whether it’s because what you have is wrong or if it’s just because to didn’t tag your single-line code sections in backticks.
FYI, the way this is written, this is a relative url. I’m guessing that the url of the page currently being requested starts with /saint-petersburg-english-and-transportation.
See url() - CSS: Cascading Style Sheets | MDN
Yes you are correct. The current page being requested is http://127.0.0.1:8000/saint-petersburg-english-and-transportation/.
I think I see what the issue is now. Instead of including a relative URL, I must include the file path of the avtovo-station.jpg image? I need to find a CSS function that allows me to do this.
No, you need to use the static tag to allow the Django rendering engine to create the proper url.
Is this shown in the following link?
https://docs.djangoproject.com/en/4.0/howto/static-files/
Yes, the use of the static tag is very near the top of that page, along with the tag-specific docs at Built-in template tags and filters | Django documentation | Django
I have good news regarding this Mr. Whitesell! I was able to successfully get the correct URL of each image located inside static -> images -> SaintPetersburgMetroImages by utilising {% get_static_prefix as STATIC_PREFIX %} and background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");.
I just have one question regarding this. I have three images. I have set animation-duration to 30 seconds with the intention of having each image display on the screen for ten seconds before automatically going to the next image. I want to thank you for sending that previous link as it helped me solve this.
However, in the following example, I notice that the first image inside 0% instantly changes and does not wait ten seconds:
<style>
body, html {
height: 100%;
margin: 0;
}
.change-background {
height: 115%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: change;
animation-direction: normal;
animation-iteration-count: infinite;
animation-duration: 30s;
/*animation: change 30s infinite normal;*/
}
@keyframes change {
0% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");
}
50% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/kirovsky-zavod.jpg");
}
100% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/zvenigorodskaya.jpg");
}
}
</style>
How can I change my CSS to make each image display for ten seconds before changing to the next? Thanks!
1 Like
I’m sorry, that’s a CSS issue totally unrelated to Django - I don’t have a clue here. You might want to either open a new thread for this question (in case people don’t bother reading down this far), and/or search for an answer on a more CSS-oriented forum.
Okay, thank you. I’ll get to it.
This may be the last time we message each other, but hopefully not.
I wanted to thank you for all of the help you have given me over these last two months. Without your guidance, I would still have a long way to the finish line which seems to be nearing closer as each day passes. Thank you for everything Mr. Whitesell and good luck!
Doesn’t need to be! I’m not going anywhere - and I hope you have continued success with your Django journey.