Djangoの管理画面へモデル一覧(画像のプレビュー)を表示させてみる

  • URLをコピーしました!

今回はDjangoの管理画面のカスタマイズについてまとめておきます。(もちろん備忘録のため)

以前の記事でDjangoのモデル(データベース)を管理画面に表示してみました。

こんな感じでモデル(データベース)の情報を管理画面に反映させることが出来ました。
設定方法の詳しくは過去記事をご確認ください。

Django管理画面モデル追加

今回は応用としてモデルの要素を複数追加していきたいと思います。
やりたいことは、画像(アイコン)のプレビュー表示まで

目次

Djangoのモデル一覧

今回は以下のようなモデルを用意しました。models.pyに記載します。

from django.db import models
# Create your models here.
class UserInfo(models.Model):
    user_name = models.CharField(max_length=50, unique=True)
    user_icon = models.ImageField(upload_to="image/", blank=True, null=True)

    def __str__(self):
        return self.user_name

UserInfoクラス(ユーザー情報を扱う)にはユーザー名ユーザーアイコンの要素を持ちます。

models.ImageFieldを扱う場合はsettings.pyにimage(画像)の保存ディレクトリを記載しておきます。
以下のように追記するとmediaディレクトリが自動で作成されます。また、models.ImageFieldのupload_toで指定したimageに画像が格納されていきます。(Djangoのプロジェクトフォルダから相対的に見ると、media/imageに画像が格納される。)

MEDIA_ROOT=os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Djangoの管理画面へモデルを追加

admin.pyを編集し、管理画面へモデルを反映していきます。
以下のように編集してください。

from django.utils.safestring import mark_safe
from myapp.models import UserInfo

class UserInfoAdmin(admin.ModelAdmin):

    def icon_image(self, obj):
        return mark_safe('<img src="{}" style="width:100px;height:auto;">'.format(obj.user_icon.url))

    list_display = ('user_name', 'icon_image')

admin.site.register(UserInfo, UserInfoAdmin)

管理画面上でユーザー名ユーザーアイコンを可視化して管理したいので
list_displayに'user_name'と'icon_image'を追加しています。
管理画面に一覧として表示したい項目はlist_displayに追加してあげればいいわけですね。

ちなみにdef icon_image(self, obj)は画像をURLではなくプレビュー画像として追加するために記載しています。width:100pxで固定したいときの書き方です。
mark_safe()を扱うのは「そんなもん」って思っています。なんで?と言われてもよくわかりません。

最後にadmin.site.registerで管理画面へ反映します。
第一引数にはモデル名、第二引数にはadminの編集オプションを指定します。

Djangoのモデルを反映

あと、もう一歩です。
忘れてはいけない、マイグレーション

$ python3 manage.py makemigrations myapp  #myappは適宜自分の環境のアプリ名を指定

そして続けて

$ python3 manage.py migrate

これで反映完了です。
エラーコードが出た場合はプロジェクト名、アプリ名がしっかり指定されているか確認してみましょう。もしくはモデルの作り方がマズイのかも..

Djangoの管理画面へプレビュー画像の反映

アプリを立ち上げ

$ python3 manage.py runserver

http://127.0.0.1:8000/admin へアクセスを行います。

Django管理画面

お。User Infos(モデル名)が追加されてるじゃん。
では、User Infosからユーザー名とユーザーアイコン(画像)の追加を行う。そしてSAVE(保存)すると

Django管理画面画像プレビュー表示

しっかり、画像(アイコン)が追加されてる。(やりたかったことはできた。)

こんな感じでDjangoの管理画面へモデル一覧を表示させてみました。

Djangoについて学びたい方へ

書籍で学びたいなら

DjangoのWebアプリの設計・作成はもちろん、Webサーバー・アプリ周りの知識も幅広く扱ってくれています。データベースの知識、クラウドの知識、セキュリティの知識も同時に習得でき、初心者にはぜひおすすめの書籍

Djangoについて深く知りたいという方におすすめしています。
ややプログラミングの知識がないと理解が難しいかもしれません。
pythonが書ける方には非常にタメになるDjangoアプリ開発におすすめ書籍でした。

オンライン授業で学びたいなら

僕はオンラインスクールはUdemy をおすすめします。定番の授業からマニアックな授業まで幅広く扱っているので、学びたいことは大体あります。

今回はPython+Djangoの授業をおすすめします。Djangoの基礎から応用までこの授業で学べます。
実際にWEBアプリを作成し、公開するところまで親切に教えてくれます。

Djangoを始めたい方へおすすめ記事

Django管理画面の設定に関する記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次