[Django] Photo Gallery One - Overview

R&D

---

一、资源

• 展示照片方式不错

Repo: mYk's gallery

Demo website: https://myks.org/en/photos/

 

• 仅供参考

Repo: django-photologue

Demo website: django-photologue

 

• 有注册登陆功能

Video: https://www.youtube.com/watch?v=9uHvBVrfUFs

Demo website: https://imagebookgallery.herokuapp.com/

 

• 无注册登录功能

Ref: https://github.com/divanov11/photo-album-app

 

 

二、单个照片上传

• 第一步，添加模型

文件 admin.py

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

admin.site.register(Profile)
admin.site.register(Gallery)

并且，在 models.py 中定义 Gallery 模型。

>>> from django.contrib.auth.models import User
>>> user = User.objects.filter(username='user1').first()
>>> user
<User: user1>

>>> user.profile
<Profile: user1 Profile>

>>> user.gallery
<Gallery: user1 Gallery>

>>> user.gallery.image
<ImageFieldFile: dataset/01.png>

 因为 user如下与gallery形成一对一的关系。

class Gallery(models.Model):
    user  = models.OneToOneField(User, on_delete=models.CASCADE)
    label = models.CharField(max_length=255, default='label')

    def get_upload_path(instance, filename):
        ds_username = instance.user.username
        ds_label = instance.label
        return join(ds_username, 'gallery', ds_label, filename)

    image = models.ImageField(default='default.jpg', upload_to=get_upload_path)

    def __str__(self):
        return f'{self.user.username} Gallery'

模板显示方式。

<div class="media">
　　<img class="rounded-circle account-img" src="{{ user.gallery.image.url }}">
　　<div class="media-body">
　　　　<h2 class="account-heading">{{ user.username }}</h2>
　　　　<p class="text-secondary">{{ user.email }}</p>
　　</div>
</div>

 

• 第二步，配置 signal

文件 signal.py

监听 User 模型发出的 post_save 信号。也就是说：profile的创建是被动地收到 user 的控制。

 

• 第三步，视图 内更多操作

 获得 照片的 URL on S3.

@login_required
def gallery(request):
    if request.method == 'POST':
        g_form = GalleryUpdateForm(request.POST,
                                   request.FILES,
                                   instance=request.user.gallery)
        if g_form.is_valid():
            g_form.save()
            messages.success(request, f'Your gallery has been updated!')
            return redirect('gallery')

    else:
        g_form = GalleryUpdateForm(instance=request.user.gallery)  # ----> 

    #
    # (1) Get the username
    # (2) Get type dir list
    # (3) Get photos in type dir.
    #
    cur_username = request.user.username

    # to do list 

    context = {
        'g_form': g_form
    }

    return render(request, 'users/gallery.html', context)

 

 

三、UI 设计

在 django-storages 加持下，是存储过程隐藏。

Goto: https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html

 

不错的示范：https://codepen.io/dimsemenov/pen/ZYbPJM 

 

 

 

 

Upload multiple images to a post in Django

---

Ref: Upload multiple images to a post in Django

Ref: Upload Multiple Images to a Model with Django

最后还是学习：Django-photologue