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).

for compliment in compliment rename either of the two.

IVNSTN
– IVNSTN

2019-04-28 12:56:00 +00:00
Commented Apr 28, 2019 at 12:56 — IVNSTN
– IVNSTN, Commented Apr 28, 2019 at 12:56

HenryM · Accepted Answer · 2019-04-28 14:32:25Z

1

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">

edited Apr 28, 2019 at 14:32

answered Apr 28, 2019 at 12:35

HenryM

5,8217 gold badges57 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Hunne Over a year ago

This works, but the outcome is not what I was expecting. It is assigning the same random CSS attribute to each instance of 'compliment.body' - I was hoping to randomize the attribute so they would all be different colours...each time I refresh the page the bg color does change, but it is the same on every card.

Andy Hunne Over a year ago

Thanks again @HenryM - I hadn't even discovered custom template tags in the docs yet :)

Andy Hunne · Accepted Answer · 2019-04-29 00:02:23Z

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%}

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related