Django 007: Зураг, файл админаас upload хийх нь

Ѳмнѳх царайлаг болгох алхам маань тийм ч царайлаг болоогүй ч одоо бага зэрэг визуал харагдацтай болгох үүднээс блог тус бүр ковер зурагтай болгоё.

https://www.facebook.com/kitophotography1/

Source код оо текст засварлагч дээрээ нээгээд blog/models.py файлыг нээж дотор нь дараах мѳрийг нэмнэ.

cover = models.ImageField(upload_to="blog_cover")

ингээд blog модэлийн харагдах байдал:

from django.db import models
from django.utils.text import slugify
class Blog(models.Model):
    title = models.CharField(max_length=50, null=True)
    body = models.TextField()
    author = models.CharField(max_length=50, null=True)
    slug = models.SlugField(unique=True, blank=True)
    cover = models.ImageField(upload_to="blog_cover")
def __str__(self):
        return self.title + '-' + self.author
def get_absolute_url(self):
        return "/%s" % self.slug
def save(self, *args, **kwargs):
        self.slug = slugify(self.title, allow_unicode=True)
        super(Blog, self).save(*args, **kwargs)
def author_slug(self):
        return "Publisher: %s - %s" % (self.author, self.slug)

Мэдээж models.py дээр ѳѳрчлѳлт оруулсан тул migration хийх шаардлагатай. Хэрвээ models.py дээр ямар нэг ѳѳрчлѳлт оруулсан л бол заавал migration хийх ёстойг байнга санаж хэрэгжүүлж сурах хэрэгтэй. Тэгэхээр одоо терминал дээр:

python manage.py makemigrations

Одоо demo_project/settings.py файлыг нээж хамгийн доод талын мѳрѳнд дараах 2 мѳрийг нэмнэ. Ингэснээр upload хийгдэх файлууд media хавтас дотор хуулагдахыг зааж ѳгнѳ. Мѳн файлруу хандахдаа domain.com/media/файлын_нэргэж хандахыг тохируулж ѳгч байгаа юм.

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

дээр тохируулсан url ээ demo_project/urls.py дээр тохируулж ѳгнѳ. Доорхи кодыг ѳмнѳх код дээр хуулж тавина.

...
from django.conf import settings
from django.urls import re_path
from django.views.static import serve
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Ингэснээр demo_project/urls.py файл ингэж харагдана.

"""demo_project URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from django.conf import settings
from django.urls import re_path
from django.views.static import serve
from blog.views import all_blog, single_blog
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', all_blog, name="all_blog"),
    path('<slug>', single_blog, name="single_blog"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Одоо тэмплэйт дээрээ ѳѳрчлѳлт оруулж зураг харуулцгаая.

index.html нээгээд for loop дотор ингэж ѳѳрчлѳв.

{% for blog in blogs %}
    <div class="cell">
      <div class="media-object">
        {%if blog.cover %} <!--зураг байвал доорх img гарна-->
         <div class="thumbnail">
           <img src={{blog.cover.url}} alt="{{blog.title}}" class="cover"/>
         </div>
        {% endif %} <!--нѳхцѳл шалгалт дуусна-->
        <div class="media-object-section">
          <h4><a href="{{blog.get_absolute_url}}">{{blog.title|capfirst}}</a></h4>
          <p>{{blog.body|truncatechars:'140'}}</p>
          <a href="{{blog.get_absolute_url}}">Үргэлжлэл...</a>
        </div>
      </div>
    </div>
  {% endfor %}

Ингээд серверээ асааж эхлээд admin хэсгээс нэг блогруу cover зураг оруулая.

localhost:8000/admin/blog/blog/3/change

Одоо нүүр хуудсаа харвал

Зураг маань хэт том зураг байх нь үүнийг бага зэрэг css бичээд янзалж болно. Үүний тулд base.html -ын foundation.min.cssдоод талд доорхи мѳрийг нэмнэ.

<link rel="stylesheet" href="{% static 'css/style.css' %}">

Дараа нь static/css/style.css файл үүсгээд доорхи css ыг бичнэ.

.cover {
  width: 10rem;
  height: auto;
}

хадгалаад нүүр хуудсаа reload хийж харвал

Ингээд cover зураг admin аас оруулдаг боллоо. Дээр бичсэн шиг detail хуудас буюу single.html дээр cover гаргаж болох нь.

Github дээрх тѳслийн эх код update хийгдсэн. Нийтлэл таалагдсан бол clap & share хийж хэрэгтэй хүмүүст түгээгээрэй.