Шаблон администратора Django - сетка вместо списка

Какой самый простой/быстрый способ переопределить форму администратора Django, чтобы она отображала сетку элементов вместо списка? Моя модель включает поле для картинки размером 100x100px, и было бы проще видеть их в виде сетки картинок, а не списка.

Это не очень сложно, но требует, чтобы вы скопировали несколько больших кусков кода из библиотеки Django и включили их в свое собственное приложение. Вот обзор:

  • Вам нужно будет скопировать и затем изменить несколько тегов шаблона из django.contrib.admin.templatetags.admin_list:
    • django.contrib.admin.templatetags.admin_list.items_for_result
    • django.contrib.admin.templatetags.admin_list.result_list
    • django.contrib.admin.templatetags.admin_list.results
    • django.contrib.admin.templatetags.admin_list.result_list_tag
  • Вам нужно будет скопировать и затем изменить несколько шаблонов:
    • django/contrib/admin/templates/admin/change_list.html
    • django/contrib/admin/templates/admin/change_list_results.html

Для иллюстрации решения я создал приложение под названием spam и модель под названием SpamPhoto, а также модель admin, настроенную для отображения тега изображения. Для сетки я использую Bootstrap 4. Есть еще некоторые проблемы, которые вам, возможно, придется отследить и решить, например, избавиться от чекбокса, который отображается для каждого элемента. Но этот код должен помочь примерно на 90%.

Вот обзор файлов, которые я создал/изменил и которые вы найдете ниже:

  • spam/models.py: содержит модель SpamPhoto
  • spam/admin.py: содержит SpamPhotoAdmin
  • spam/templatetags/spamphoto_admin_list.py: содержит тег шаблона / функции, которые будут отображать настроенный список изменений
  • spam/templates/admin/spam/spamphoto/change_list.html: это основной шаблон списка изменений, в котором есть только несколько небольших изменений: он загружает наши пользовательские теги шаблона, включает Bootstrap CSS, и вызывает пользовательский тег шаблона (определенный ниже)
  • spam/templates/admin/spam/spamphoto/change_list_results.html: сильные изменения здесь, избавление от элементов таблицы и замена их на div'ы.

Опять же, это много кода, и большая его часть поднимается напрямую без особых изменений. Вот так:

# spam/models.py
from django.db import models

class SpamPhoto(models.Model):
    name = models.CharField(max_length=100)
    image = models.ImageField()

# spam/admin.py
from django.contrib import admin
from django.utils.html import mark_safe


class SpamPhotoAdmin(admin.ModelAdmin):
    list_display = ('name', 'image_tag')
    list_display_links = ('name', 'image_tag')

    def image_tag(self, obj):
        return mark_safe(f'<img class="img-fluid" src="{obj.image.url}" />')

# spam/templates/admin/spam/spamphoto/change_list_results.html
{% load i18n static %}
{% if result_hidden_fields %}
  <div class="hiddenfields">{# DIV for HTML validation #}
    {% for item in result_hidden_fields %}{{ item }}{% endfor %}
  </div>
{% endif %}
{% if results %}
  <div class="container">
    <div class="row">
      {% for result in results %}
        {% if result.form and result.form.non_field_errors %}
          <div>{{ result.form.non_field_errors }}</div>
        {% endif %}
        <div class="col-sm-2">{% for item in result %}{{ item }}{% endfor %}</div>
      {% endfor %}
    </div>
  </div>
{% endif %}
Вернуться на верх