V-FOR-VEND3TTA
commented
2 hours ago To make the team members' details modifiable via the Django admin panel, follow these steps:
- [x] Create a Team Member Model
In your models.py file for the website app, define a model to represent the team members. Include fields for name, role, image, and social media links.
from django.db import models
class TeamMember(models.Model):
name = models.CharField(max_length=100)
role = models.CharField(max_length=100)
image = models.ImageField(upload_to='team_images/')
facebook = models.URLField(blank=True, null=True)
twitter = models.URLField(blank=True, null=True)
instagram = models.URLField(blank=True, null=True)
linkedin = models.URLField(blank=True, null=True)
def __str__(self):
return self.name- [x] Register the Model in Admin
Register the TeamMember model in the admin.py file so it can be managed from the admin interface.
from django.contrib import admin
from .models import TeamMember
@admin.register(TeamMember)
class TeamMemberAdmin(admin.ModelAdmin):
list_display = ('name', 'role')
search_fields = ('name', 'role')- [x] Update Settings for Media Files
Update the settings.py file to configure media files for the uploaded images.
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'Update urls.py in your project to serve media files during development:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# Other URL patterns
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)- [x] Update Templates
Modify the template to dynamically render team members from the database. Fetch the team members in your view and pass them to the template.
View Function
In views.py, create a view to fetch and pass team members.
from django.shortcuts import render
from .models import TeamMember
def team_view(request):
team_members = TeamMember.objects.all()
return render(request, 'team.html', {'team_members': team_members})Template
Replace the static team member HTML with a loop to render data dynamically.
<div class="container-fluid bg-light py-5">
<div class="container py-5">
<div class="row g-5 align-items-center">
<div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
<div class="btn btn-sm border rounded-pill text-primary px-3 mb-3">Our Team</div>
<h1 class="mb-4">Meet Our Experienced Team Members</h1>
<p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum et tempor sit. Aliqu diam
amet diam et eos labore. Clita erat ipsum et lorem et sit, sed stet no labore lorem sit.</p>
<a class="btn btn-primary rounded-pill px-4" href="">Read More</a>
</div>
<div class="col-lg-7">
<div class="row g-4">
{% for member in team_members %}
<div class="col-md-6">
<div class="team-item bg-white text-center rounded p-4 pt-0">
<img class="img-fluid rounded-circle p-4" src="{{ member.image.url }}" alt="{{ member.name }}">
<h5 class="mb-0">{{ member.name }}</h5>
<small>{{ member.role }}</small>
<div class="d-flex justify-content-center mt-3">
{% if member.facebook %}
<a class="btn btn-square btn-primary m-1" href="{{ member.facebook }}"><i class="fab fa-facebook-f"></i></a>
{% endif %}
{% if member.twitter %}
<a class="btn btn-square btn-primary m-1" href="{{ member.twitter }}"><i class="fab fa-twitter"></i></a>
{% endif %}
{% if member.instagram %}
<a class="btn btn-square btn-primary m-1" href="{{ member.instagram }}"><i class="fab fa-instagram"></i></a>
{% endif %}
{% if member.linkedin %}
<a class="btn btn-square btn-primary m-1" href="{{ member.linkedin }}"><i class="fab fa-linkedin-in"></i></a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>- [ ] Test Your Setup
- Run
python manage.py makemigrationsandpython manage.py migrateto apply the model changes. - Create some
TeamMemberinstances in the admin interface. - Access the
team_viewURL in your browser to verify the dynamic rendering of team members.
This setup ensures all team member details can be managed from the admin interface and dynamically updated on the frontend.
Use the following for making it a model that we can manage from the admin: