Django公式チュートリアルで作るpollsアプリケーションの発展型のようなものを作っています。詳しくはまだないしょです。
今日は各投稿の詳細画面をある程度実装しました。デザインはまだ何もいじっていないので見た目カッコ悪いですが……。あとからやります。
ImageField
今日実装したのは画像を扱うフィールド、ImageFieldです。公式チュートリアルでは触れられておらず、ドキュメントでも詳しく触れられていなかったので困りました。ググったところ、Django BrothersのチュートリアルがImageFieldについて扱っていて、非常にわかりやすかったのでこれに沿って実装しました。
僕の場合、default値を設定したかったのですが、ファイルを指定するパスが良くわからずだいぶ四苦八苦しました。結果的にこうなりました。
choice_image = models.ImageField(upload_to='polls', default=os.path.join(BASE_DIR, '/polls/default_icon.jpg'))
詳しくはDjango Brothersチュートリアルを読んでほしいのですが、settings.pyでMEDIA_ROOTを指定したところからのパスで良いようです。
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
つまり、ImageFieldのデフォルト画像のパスは以下のようになります。
/media/polls/default_icon.jpg
object-fit
画像を表示できたは良いものの、画像サイズがそのままなので表示が整いません。縦横比を維持しつつ正方形で表示したかったので調べてみたところ、CSSのobject-fitというものを使えばうまくいきそうです。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー｜Webクリエイターボックス
実際に書いたコードはこちら
.choice_image {
width: 100px;
height: 100px;
object-fit: cover;
}
画像にはchoice_imageクラスを指定しました。
細かい話
スーパーリロードというものについて知りました。キャッシュを消してリロードできるので、CSSを変更したのに反映されない！ってときに使うといいです。
Django開発中にクロームでcssが反映されない場合の対処方法 - 知的好奇心
円グラフを表示したかったがうまくいかない
投票された割合を表示する手段として、円グラフを実装したいのですがこれがうまくいかなかったので持ち越しです。Chart.jsというJSライブラリを使おうと思ったのですが、Pythonのfor文とどのように共存させればよいかわからないのです。もしかしたらviews.pyで作成したほうが良いのかもしれないですね。
今後の課題です。がんばろう。