*Episode 25* PYTHON (Creating an Image Gallery of Django)

 

Creating an image gallery

This episode covers :-

 1) How to upload images.

 2) How to serve the images in localhost.

 3) How to show the images in a grid using Bootstrap 4 album.

• Setup :-

Terminal

cp -fr 15-Base-Project 27-Image-Gallery

cd 27-Image-Gallery

source ../venv/bin/activate

• Installing pillow :-

    Install the pillow package:

Terminal

pip install pillow

 

• Configuring media variables :-

    Edit mysite app settings.py file and specify MEDIA_URL and MEDIA_ROOT variables:

mysite/settings.py

STATIC_URL = 'static'

MEDIA_URL = 'media'

MEDIA_ROOT = 'media/'

•  Adding ImageField :-

     Edit myapp models.py file and add an ImageField:

myapp/models.py

from django.db import models

class Flower(models.Model):

title = models.CharField(max_length=255, default='')

description = models.TextField(default='')

image = models.ImageField(default='', blank=True, uploa\

d_to='images') # < here

def __str__(self):

return self.title

     Run migrations:

Terminal

python manage.py makemigrations

python manage.py migrate

• Adding images to flowers :-

    Visit admin, edit the flowers and add some images:

     You can find example images in this folder: https://samuli.to/Flowers.

Images are uploaded in the mediaimages/ folder:

• Using the static helper function :-

    Edit mysite app urls.py file and use the static() helper function:

mysite/urls.py

from django.contrib import admin

from django.urls import path

from myapp import views as myapp_views

from django.conf import settings # < here

from django.conf.urls.static import static # < here

urlpatterns = [

path('admin/', admin.site.urls),

path('', myapp_views.index, name='index'),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA\

_ROOT) # < here

•  Adding the grid :-

     Edit myapp index.html file and replace the contents with these lines:

myapp/templates/myapp/index.html

{% extends 'base/base.html' %}

{% block content %}

<div class="album py-5">

<div class="container">

<div class="row">

{% for flower in flowers %}

<div class="col-md-4">

<div class="card mb-4 shadow-sm">

<img class="card-img-top" src="{{ flowe\

r.image.url }}"

alt="Card image cap">

<div class="card-body">

<p class="card-text">This is a wide\

r card with supporting text below as a natural lead-in to

additional content. This conten\

t is a little bit longer.</p>

<div class="d-flex justify-content-\

between align-items-center">

<div class="btn-group">

<button type="button" class\

="btn btn-sm btn-outline-secondary">View</button>

<button type="button" class\

="btn btn-sm btn-outline-secondary">Edit</button>

</div>

<small class="text-muted">9 min\

s</small>

</div>

</div>

</div>

</div>

{% endfor %}

</div>

</div>

</div>

{% endblock %}

      You can find the grid markup in here: https://samuli.to/Grid.

      Visit home page and you should see the album grid:

•  In Details :-

     You need to install the Pillow library to add an ImageField:

myapp/models.py

image = models.ImageField(default='', blank=True, upload_to\

='images')

    upload_to='images' stores the uploaded images in the media/images/ folder.

     In the development phase you can serve these user-uploaded files using

static() helper function:

myapp/urls.py

urlpatterns = [

path('admin/', admin.site.urls),

path('', myapp_views.index, name='index'),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA\

_ROOT) # < here

     This function works only in debug mode. You have to have DEBUG = True configured in the settings.py file. With Heroku platform we will serve the media files from an Amazons AWS bucket later in the book.

     Use {{ flower.image.url }} to access image URLS in templates:

Accessing the image url

<img class="card-img-top" src="{{ flower.image.url }}"

     The grid is just a basic Bootstrap album: https://samuli.to/Bootstrap-Album

Summary

• Pillow package adds image uploading and processing capabilities.
• MEDIA_ROOT is the physical path to the images.
• MEDIA_URL is the URL path you use to access the media files.
• You can use static() function to serve the files in debug mode. In production environment you have to implement other ways to serve the images.
• In templates the image URLS are accessed with the familiar dot “.” notation: {{ flower.image.url }}.

👈Episode 24(P).                                                                           Episode 26(P)👉

Share This Post

PRINT THIS POST