Customize a Tenant with Django & Custom File Storage - Part 3

Introduction

In this article, we'll explore how to customize a tenant site in Django by modifying the navigation bar color, uploading a logo, and creating a custom file storage solution to keep tenant files organized. We'll build upon the coffee shop tenant we created in the previous video, enhancing its appearance and functionality.

Installing the Required Package

To begin customizing the tenant site, we need to change the color of the navigation bar. We will use a package called Django Color Field, which simplifies color selection in the backend. Follow these steps:

1. Install the package with:

   pip install django-colorfield
   

2. Next, add this app to the SHARED_APPS in your Django project's settings. Navigate to the core folder, then open settings.py, and include colorfield in the SHARED_APPS configuration.

Creating the Site Settings Model

Now that we have the package installed, we will create a new model class to store our site settings, including the color for the navigation bar:

1. Open the models.py in the main app (let's say it’s named core).

2. Add a new model class called SiteSetting:

   from colorfield.fields import ColorField
   from django.db import models
   
   class SiteSetting(models.Model):
       name = models.CharField(max_length=100)  # Use to describe what the settings are for
       color = ColorField()  # Color field for navigation bar
   

3. Save this file.

Registering Site Settings in Admin

Next, we need to register the SiteSetting table in the Django admin:

1. Open admin.py in the same app folder and add the following code:

   from django.contrib import admin
   from .models import SiteSetting
   
   admin.site.register(SiteSetting)
   

2. Now, run migrations with:

   python manage.py makemigrations
   python manage.py migrate
   

3. Start the development server:

   python manage.py runserver
   

Adding Settings via the Admin Interface

Once the site setting table has been added to the database, go to the admin interface:

1. Navigate to /admin to access the admin panel.
2. Find the Site Settings section, and create a new setting object. For example, name it branding, and select a color like #00B140 (Starbucks green), then click save.

Fetching Settings Dynamically

To reflect this color in the navigation bar, we must fetch it from the database efficiently. Instead of using a view for every page, we’ll create a custom template tag that will load the settings:

1. Create a new folder named templatetags in your app directory and include an __init__.py file.

2. Create a file called header.py and add the code to create a custom template tag.

   from django import template
   from .models import SiteSetting
   
   register = template.Library()
   
   @register.inclusion_tag('header.html')
   def header(request):
       settings = SiteSetting.objects.first()
       return ('color': settings.color if settings else None)
   

3. Update your base template (e.g., base.html) to include this header.

4. Restart the server to load the new template tag.

Modifying the Header

Now, in the header.html, modify the background color dynamically using the fetched color:

<div style="background-color: ({ color|default:'#000' )};">
   (* Navigation bar content goes here *)
</div>

Uploading a Logo

Next, let's add functionality to upload a logo. Modify the SiteSetting model to include a logo attribute:

1. In models.py, add the following:

   logo = models.ImageField(upload_to='logo/', null=True, blank=True)
   

2. Migrate the changes with:

   python manage.py makemigrations
   python manage.py migrate
   

3. Update the header.py to fetch and pass the logo URL to the template.

4. Update the header.html to conditionally display the logo.

Implementing Custom File Storage

To keep media files organized by tenant, we implement a custom storage class. Here's how:

1. Create a new file named storage.py in your application folder and define a custom storage class that determines the storage backend based on the schema.

2. Update your settings.py to use the new storage class:

   DEFAULT_FILE_STORAGE = 'yourapp.storage.CustomSchemaStorage'
   

Conclusion

By following the steps outlined, we've successfully customized a tenant site in Django. We've changed the navigation bar's color, uploaded a logo, and implemented a custom file storage solution to separate tenant files. This structured approach allows for efficient management of media files across multiple tenants.

Keywords

Django, tenant customization, Django Color Field, media file storage, template tags, site settings, custom storage class

FAQ

Q: How do I change the navigation bar color for a tenant site?
A: You can use the Django Color Field package to manage colors easily in the backend and update the header template to reflect the desired color.

Q: How can I upload a logo for my tenant site?
A: By adding an ImageField to your site settings model, you can upload and manage logos directly from the Django admin interface.

Q: How do I ensure media files are stored separately for each tenant?
A: You can create a custom storage class that uses the Django Tenants package for managing file storage based on the tenant schema.

Q: Is it efficient to load tenant settings for every page request?
A: Instead of querying the database for every page, create a custom template tag that loads the settings once and can be reused across templates.