MENU

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

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

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

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

あわせて読みたい
Djangoのモデル(データベース)を管理画面に表示してみる。ただそれだけ。
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のインストールからプロジェクトの作成まで
Djangoのインストールからプロジェクトの作成までこんにちは,ちゆりです。個人的にはpythonのフレームワークはFlaskを使うことが多く,自分の好みなのですが,「そろそろdjangoも覚えておくのもいいな。」と思ったので...
Django管理画面の設定に関する記事
あわせて読みたい
Djangoの管理画面を日本語化する。ただそれだけ。
Djangoの管理画面を日本語化する。ただそれだけ。今回はDjangoの管理画面を日本語化します。そうです。ただそれだけの記事【Djangoの管理画面を日本語化する】Djangoのサーバーを起動し,$ python manage.py runserverh...
あわせて読みたい
Djangoの管理画面のパスワードを忘れたを解決。ただそれだけ。
Djangoの管理画面のパスワードを忘れたを解決。ただそれだけ。Djangoの管理画面へログインする際にはパスワードを設定するのですが,今回は「パスワードを忘れちゃった」っていうのを解決します。アプリまるごと消す必要はないんで...

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

この記事を書いた人

6年間化学を専攻していたのになぜか一部上場のIT企業のエンジニアへ。
普段はWeb系のITエンジニアとしてサラリーマンをしているが、脱サラ田舎暮らしに憧れ,システム開発やブログ収益化を目指す。

コメント

コメントする

目次
目次