1. HTML 에서 if 문 으로 헤드 이미지 적용하기

 

일단 헤드 이미지가 없을 때에도 정상적으로 포스트 목록 페이지가 나오게하기 위해서 blog/templates/blog/post_list.html 을 수정하자.

 

(...생략)
<h1>Blog</h1>
{% for p in post_list %}
<!-- Blog post-->
<div class="card mb-4">
    {% if p.head_image %}
    <a href="#!"><img class="card-img-top" src="{{ p.head_image.url }}"
            alt="{{ p }} head image"/></a> <!-- <img> 태그에서 alt 는 이미지를 보여줄 수 없을 때 이미지 대신 나타나는 텍스트를 의미 -->
    {% endif %}
    (...생략)

 

 

 

정상적으로 포스트 목록 페이지가 출력된다.

 

다음은 만약 헤드 이미지가 없으면 허전하니까 임의의 이미지를 보여주도록 lorem picsum 을 써보자.

 

blog/templates/blog/post_list.html 수정합시다.

 

(...생략)
{% for p in post_list %}
<!-- Blog post-->
<div class="card mb-4">
    {% if p.head_image %} <!-- 헤드 이미지가 있을 경우 -->
    <a href="#!"><img class="card-img-top" src="{{ p.head_image.url }}"
                      alt="{{ p }} head image"/></a>
    {% else %} <!-- 헤드 이미지가 없을 경우 -->
    <img class="card-img-top" src="https://picsum.photos/seed/{{ p.id }}/900/400" alt="random_image">
    {% endif %}
    <div class="card-body">
    (...생략)

 

 

헤드 이미지가 없을 경우에 고정된 이미지를 적용 시키는 것도 이상 없다.

 

근데 상세 페이지에 들어가니까 헤드 이미지가 적용되지 않았다..

 

 

이번엔 blog/templates/blog/post_detail.html 을 수정합시다.

 

(...생략)
<!-- Preview image figure-->
{% if post.head_image %} <!-- 헤드 이미지가 있을 경우 -->
<figure class="mb-4"><img class="img-fluid rounded" src="{{ post.head_image.url }}"
                         alt="{{ post.title }} head_image"/></figure>
{% else %} <!-- 헤드 이미지가 없을 경우 -->
<img class="img-fluid rounded" src="https://picsum.photos/seed/{{ post.id }}/900/400"
     alt="random_image">
{% endif %}
<!-- Post content-->
<section class="mb-5">
(...생략)

 

수정 후 새로고침 갈기기.

 

 

 

 

음음 포스트 상세 페이지에 이미지가 정상적으로 잘 나오는 것을 볼 수 있다.

 

 

2. HTML 에서 if 문으로 첨부파일 다운로드 버튼 만들기

 

이번에는 우리가 앞에서 file_upload 필드를 추가해 파일 첨부 기능을 구현한 걸 방문자가 내려 받을 수 있게 버튼을 만들어보자.

 

일단 부트스트랩 사이트에서 다운로드 이미지를 소스를 복사한 후에 blog/templates/blog/post_detail.html 에 적용시키자.

 

(...생략)
<!-- Post content-->
<section class="mb-5">
    <p class="fs-5 mb-4">{{ post.content }}</p>

    {% if post.file_upload %} <!-- 해당 포스트의 첨부파일이 있는 경우 -->
    <a href="{{ post.file_upload.url }}" class="btn btn-outline-dark" role="button"download>Download</a>
    {% endif %}
    (...생략)

 

 

음 이상 무.

 

근데 그냥 저렇게 'Download' 라고 적혀있으니까 클라이언트가 어떤 첨부파일을 다운받는지 알 수가 없다..

 

이번엔 파일 확장자와 파일 명을 보이게 해봅시다.

 

3. 다운로드 버튼에 파일 확장자와 파일 명 보이게 적용하기

 

이번에는 DB 에 있는 포스트의 첨부파일을 가져오는 것이기 때문에 당연히 blog/models.py 를 수정해야한다.

 

파일 경로를 제외하고 파일 명만 나오게 하기 위해선 get_file_name() 함수를 사용하면 됩니다.

 

from django.db import models
import os

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=30)
    content = models.TextField()

    (...생략)
    
    def get_file_name(self): # 첨부파일의 경로 가져오기
        return os.path.basename(self.file_upload.name)

    def get_file_ext(self): # 첨부파일의 경로에서 경로를 제외하고 이름만 가져오게 하기
        return self.get_file_name().split('.')[-1]

 

일단 아이콘 이미지를 가져오기 위해서 blog/templates/blog/post_detail.html 에 fontawesome 을 사용하자.

 

<!DOCTYPE html>
{% load static %}
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>{{ post.title }} - Blog</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{% static 'blog/bootstrap/bootstrap.min.css' %}" rel="stylesheet" media="screen" />
        <script src="https://kit.fontawesome.com/cdfefe70b1.js" crossorigin="anonymous"></script> <!-- 파일 확장자에 사용할 아이콘 이미지를 가져오기 위헤 Font awesome 사용 -->
    </head>
    <body>
    
    (...생략)

 

그 다음은 첨부파일 확장자 아이콘으로 사용할 이미지의 소스와 첨부파일 명을 적용시키자.

 

(...생략)
<!-- Post content-->
<section class="mb-5">
    <p class="fs-5 mb-4">{{ post.content }}</p>

    {% if post.file_upload %} <!-- 해당 포스트의 첨부파일이 있는 경우 -->
    <a href="{{ post.file_upload.url }}" class="btn btn-outline-dark" role="button">
        Download:
        {% if post.get_file_ext == 'csv' %} 
          <i class="fa-solid fa-file-csv"></i>
        {% elif post.get_file_ext == 'xlsx' or post.get_file_ext == 'xls' %}
          <i class="fa-solid fa-file-excel"></i>
        {% elif post.get_file_ext == 'docx' or post.get_file_ext == 'doc' %}
          <i class="fa-solid fa-file-word"></i>
        {% else %}
          <i class="fa-solid fa-file"></i>
        {% endif %}
        {{ post.get_file_name }}
    </a>
{% endif %}
(...생략)

 

새로고침 갈기기.

 

 

 

 

음 이상 무.

'캡스톤 > Django' 카테고리의 다른 글

[Django] 미리보기 기능 구현  (0) 2022.03.20
[Django] 포스트 상세 페이지에 부트스트랩 적용  (0) 2022.03.18
[Django] 포스트 목록 페이지에 부트스트랩 적용  (0) 2022.03.18
[Django] CBV로 페이지 만들기  (0) 2022.03.11
[Django] URL 설정  (0) 2022.03.11

티스토리툴바