Hello, everyone. I’m currently building a website to display some projects I plan on creating. The idea is to have a page that displays an array of cards using Bootstrap that have images on top, with each image being associated with the Project model I have defined. I also have two images in a Navbar that have links embedded in them. For each of these types of images (the image links and the project headers), I used two different file paths, and it was working until I uploaded the site to the PythonAnywhere server. So in order to try and rectify the issue, I’m attempting to place all the images in one folder. However, I am at my wits’ end trying to successfully do so. I would appreciate anyone’s help with this situation. Here is the code that seems applicable:
models:
from django.db import models
from tinymce.models import HTMLField
class Project(models.Model):
"""A class to showcase a project"""
title = models.CharField(max_length=100)
date = models.DateField(auto_now_add=True)
image = models.ImageField(upload_to='my_site/static', default='')
def __str__(self):
return self.title
class About(models.Model):
"""A class to introduce myself"""
info = models.TextField()
class Meta:
verbose_name_plural = 'About'
def __str__(self):
return self.info[:50]
class Body(models.Model):
"""A class to represent info about project"""
project = models.ForeignKey(Project, on_delete=models.CASCADE)
description = HTMLField(default='')
process = HTMLField(default='')
learned = HTMLField(default='')
class Meta:
verbose_name_plural = 'Bodies'
def __str__(self):
return f"{self.project}: {self.description[:20]}"
views:
from django.shortcuts import render, redirect
from django.forms import ModelForm
from .models import About, Project
# from .forms import CommentForm
def about(request):
info = About.objects.get(id=1)
context = {'info': info}
return render(request, 'my_sites/about.html', context)
def projects(request):
projects = Project.objects.order_by('date')
context = {'projects': projects}
return render(request, 'my_sites/projects.html', context)
def project(request, project_id):
project = Project.objects.get(id=project_id)
bodies = project.body_set.order_by()
comments = project.comment_set.order_by('-date')
context = {'project': project, 'bodies': bodies}
return render(request, 'my_sites/project.html', context)
Settings:
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
MEDIA_ROOT = ''
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
urls:
from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('my_sites.urls')),
path('', include('tinymce.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
The Navbar:
{% load bootstrap4 %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>FinnLearns</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery="full" %}
</head>
<body>
<nav class="navbar navbar-expand bg-dark navbar-dark mb-4 border" >
<div class="container">
<a href="{% url 'my_sites:about' %}" class="navbar-brand"
aria-current="page">About</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="navbar-brand">
<a href="{% url 'my_sites:projects' %}" class="nav-link active">Projects</a>
</li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="https://www.linkedin.com/in/finn-murphy-b072b92b0/">
<img src="{% static 'linkedin.png' %}" width=30 height=30></a>
</li>
<li class="nav-item px-2">
<a href="mailto:****@gmail.com">
<img src="{% static 'gmail.png' %}" alt="Gmail" width=30 height=30></a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
</body>
</html>
The Projects Page:
{% extends 'my_sites/base.html' %}
{% load bootstrap4 %}
{% load static %}
{% block page_header %}
<h1 style="font-size: 20;">Projects</h1>
{% endblock page_header %}
{% block content %}
<body>
<div class="row">
{% for project in projects %}
<div class="col-sm-6">
<div class="card border-dark mb-4">
<img class="card-img-top" src="{{ project.image.url }}"
alt="Card Header" height="300_000">
<div class="card-body d-flex flex-column">
<h2 class="card-title">{{ project.title }}</h2>
<bold class="card-subtitle">{{ project.date|date:'M d, Y'}}</bold>
<a href="{% url 'my_sites:project' project.id %}"
class="btn btn-primary ml-auto">View</a>
</div>
</div>
</div>
{% endfor %}
</div>
</body>
{% endblock content %}
Finally, the files path is:
my_site → (static → each individual image) & (my_site → urls & settings) & (my_sites → urls & models & templates)
my_site is the main folder, which in turn has my static (images) folder, the main project folder (my_site) and the app folder (my_sites).
Thank you, everyone, for your help!