Is it possible to pass a variable as a CSS class to a Django html template?

Question

Pretty much a Django any Python noob - been studying for a month or so and watching tutorials...so I know enough to be dangerous. I'm trying to randomize the CSS class in an HTML template. I'm using a custom Bootstrap template to display database entries as cards, and I want to randomize the background. I've got the basics down, but haven't been able to figure out how to randomize the CSS class value in the actual html template.

I've tried the randomizing the value in the relevant Django views template. Searched through 2.2 docs, stack, google, etc., but so far no joy

views.py:

import random

from django.shortcuts import render

from compliments.models import Compliments

def compliment(request):
    compliment = Compliments.objects.all()
    return render(request, 'compliments/home.html', {'compliment': compliment})

    classList = [
        'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
        'bg-info', 'bg-light', 'bg-dark'
    ]
    css_class = random.choice(classList)

my HTML:

{% extends 'base.html' %}

{% block body %}

<div class="row">
  <div class="col-12">
     <h4 class="mb-4">Compliments</h4>
  </div> <!-- end col -->
</div><!-- end row -->
<div class="row">
  {% for compliment in compliment %}
    <div class="col-md-4">
      <div class="card {{ compliment.css_class }} text-white">
        <div class="card-body">
          <p class="card-text">{{ compliment.body }}</p>
            <a href="javascript: void(0);" class="btn btn-primary btn-sm">Select</a>
        </div> <!-- end card-body-->
      </div> <!-- end card-->
    </div> <!-- end col-->
  {% endfor %}
</div>
{% endblock%}

I was expecting that I could get "css_class" from my views to show up in the HTML template at {{ complment.css_class }}, but inspecting the class attributes show that it is not being rendered at all (just blank).

Answer 1

Here is the working version after guidance from HenryM and the Custom template tags and tilters section of the Django docs.

myapp/templatetags/mytags.py:

import random

from django import template

register = template.Library()

classList = [
    'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info',
    'bg-light', 'bg-dark'
]


@register.filter
def random_css(a):
    return random.choice(classList)

Relevant section of views.py:

def compliment(request):
compliment = Compliments.objects.all()

return render(request, 'compliments/home.html', {
    'compliment': compliment
})

And the HTML to render it:

{% extends 'accounts/base.html' %}
{% load mytags %}

{% block body %}

<div class="row">
    <div class="col-12">
        <h4 class="mb-4">Compliments</h4>
    </div>
    <!-- end col -->
</div>
<!-- end row -->
<div class="row">
  {% for compliment in compliment %}
    <div class="col-md-4">
        <div class="card {{ compliment|random_css }} text-white">
            <div class="card-body">
                <p class="card-text">{{ compliment.body }}</p>
                <a href="javascript: void(0);" class="btn btn-primary btn-sm">Select</a>
            </div>
            <!-- end card-body-->
        </div>
        <!-- end card-->
    </div>
    {% endfor %}
    <!-- end col-->
</div>
{% endblock%}

Answer 2

You're getting to return before you set the css_class and don't add it to your context

def compliment(request):
    compliment = Compliments.objects.all()

    classList = [
        'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
        'bg-info', 'bg-light', 'bg-dark'
    ]
    css_class = random.choice(classList)

    return render(request, 'compliments/home.html', {'compliment': compliment, 'css_class`: css_class})

Create a template tag (ie in the directory templatetags create the following file with name mytags.py as an example

import random
from django import template

register = template.Library()

classList = [
            'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
            'bg-info', 'bg-light', 'bg-dark'
]

@register.simple_tag
def random_css(a):
    return css_class = random.choice(classList)

In html

{% load mytags %}

<div class="card {{ compliment|random_css }} text-white">