トップページに作品リストを作ります。

モデル

Work モデルを作成して、作品を登録します。

app/models.py

class Work(models.Model):
    title = models.CharField('タイトル', max_length=100)
    image = models.ImageField(upload_to='images', verbose_name='イメージ画像')
    thumbnail = models.ImageField(upload_to='images', verbose_name='サムネイル', null=True, blank=True)
    skill = models.CharField('スキル', max_length=100)
    url = models.CharField('URL', max_length=100, null=True, blank=True)
    created = models.DateField('作成日時')
    description = models.TextField('説明')

    def __str__(self):
        return self.title

Admin

管理画面でデータを登録できるようにします。

app/admin.py

from django.contrib import admin
from .models import Profile, Work

admin.site.register(Profile)
admin.site.register(Work)

マイグレーション実行

モデルを追加したので、マイグレーションが必要になります。

(myvenv) ~$ python3 manage.py makemigrations
(myvenv) ~$ python3 manage.py migrate

データ追加

管理画面で Work モデルのデータを追加します。

ダミーでもいいので、何件か登録しておくとレイアウトがしやすくなります。

ビュー

トップページに作品リストを表示するため、ビューに Work モデルを追加します。

app/views.py

from .models import Profile, Work


class IndexView(View):
    def get(self, request, *args, **kwargs):
        profile_data = Profile.objects.all()
        if profile_data.exists():
            profile_data = profile_data.order_by("-id")[0]
        work_data = Work.objects.order_by("-id")
        return render(request, 'app/index.html', {
            'profile_data': profile_data,
            'work_data': work_data
        })

コード解説

新しい順に並べたいので、order_byを使用して降順に並べ替えます。

work_data = Work.objects.order_by("-id")

テンプレート

index

index テンプレートに作品リストを追加します。

app/templates/app/index.html

{% extends "app/base.html" %} {% block content %}

<div class="card top d-flex flex-column justify-content-end mb-4">
  <img src="{{ profile_data.topimage.url }}" alt="" />
  <div class="overlay text-white p-5">
    <h1 class="title">{{ profile_data.title }}</h1>
    <h5 class="subtitle">{{ profile_data.subtitle }}</h5>
  </div>
</div>

<div class="row mb-5">
  {% for work in work_data %}
  <div class="col-6 col-md-3 mb-3">
    <div class="card work-thumbnail">
      {% if work.thumbnail %}
      <img class="work-img" src="{{ work.thumbnail.url }}" alt="" />
      {% else %}
      <img class="work-img" src="{{ work.image.url }}" alt="" />
      {% endif %}
      <div class="work-title text-center">
        <p class="mb-0">{{ work.title }}</p>
      </div>
      <a class="stretched-link work" href=""></a>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}

CSS

作品リストを装飾します。

ホバーすると、タイトルが表示されるようにエフェクトを追加しています。

app/static/css/style.css

.work-thumbnail {
  overflow: hidden;
  position: relative;
}

.work-img {
  object-fit: cover;
  height: 240px;
}

.work-title {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-weight: bold;
  padding: 10px 15px;
  opacity: 0;
  background-color: rgb(238, 108, 77, 0.8);
  transform: translateY(70px);
  transition: all 0.2s ease-in-out;
}

.work-thumbnail:hover .work-title {
  transform: translateY(0px);
  opacity: 1;
}

確認

作品リストがこのように表示されることを確認します。

いくつかデータを登録してみてレイアウトを確認してください。

作品リスト