Tips & Trick - Oinsá ita bele link imajen sira husi unsplash.com mai ita nian blog website
Objetivu
Iha blog ida ne'e hau hakarak fahe metodu oinsá ita bele link/halo ligasaun imajen sira husi unsplash.com mai ita nia blog website rasik iha projetu Django. Ho ida ne'e ita bele evita upload/hatama imajen direta liu husi ita-nia web blog no ida ne'e la afeta ka gasta ita-nia kapasidade server.
Saída mak Unsplash?
Unsplash mak website ida ne'ebé fornese fotografia ho kualidade aas no livre atu uza. Unsplash lansa iha tinan 2013 nu'udar blog Tumblr husi Mikael Cho ho ninia ekipa, no hahú husi ne'e sai ona komunidade fotografia, dezeñu no kriador online ne'ebé boot liu.
Unsplash permite utilizadór sira atu halo broxura, download, no uza imajen ho rezolusaun aas ba kualkér objetivu, inklui projetu komersiál sira, sein presiza husu lisensa ka fó atribuisaun.
Plataforma ne'e mos iha kolesaun boot ho imajen millaun 4 resin, ne'ebé kobre kategoria oioin, inklui Natureza, Architutura, Teknolojia no Ema. Aleinde website, unsplash mós oferese API gratuita ba dezenvolvimentu sira atu integra ho sira-nia aplikasaun.
Prerekezitu - Oinsá ita bele halo ida ne'e?
- Kria projetu ida uza Django
- Kria models Django
- Migrations/Migrasaun
- Kria forms Django
- Integra iha Django Template HTML hodi hatudu nia rezultadu
1. Kria projetu Django
Konfirma katak ita instala ona python virtual environment iha MAC ka Ubuntu, ita bele instal uza pip hanesan kódigu hatudu iha okos.
Atu instala python virtual environment, loke terminal iha MAC ka Linux/Ubuntu no ezekuta kódigu tuir mai.
Nota: Favor nota katak antes ne'e ita instala ona pip ba ita nia komputador. Vizita tutorial ne'e kona-bá Oinsá atu instala pip iha MAC.
➜ ~ pip install virtualenv
Ezekuta mkdir projetuteste hodi kria folder/directory projetu naran projetuteste liu husi terminal no mos ezekuta cd projetuteste hodi tama ba folder/directory projetuteste nia laran, no depoia ezekuta python -v venv env hodi kria python virtual environment env ba projetu nee.
➜ ~ mkdir projetuteste
➜ ~ cd projetuteste
➜ projetuteste python -v venv env
➜ projetuteste ls
env
➜ projetuteste
Atu ativa environment ne'e, ezekuta kódigu source env/bin/activate iha terminal, depois ita sei haree iha ita-nia terminal hatudu ho modelu hanesan nee (env) ➜ projetuteste signifika ita nia environment ativa ona ba projetu ne'e.
➜ projetuteste source env/bin/activate
(env) ➜ projetuteste
Uza pip hodi instala Django no ezekuta kódigu nee django-admin startproject projetuteste hodi kria projetuteste uza django
(env) ➜ projetuteste pip install django
(env) ➜ projetuteste django-admin startproject projetuteste
(env) ➜ projetuteste ls
projetuteste
(env) ➜ projetuteste
cd projetuteste hodi tama ba folder/directory projetuteste ne'ebé ita foin kria uza Django. Ezekuta django-admin startapp appteste hodi kria app ida iha projetuteste Django nia laran (iha ezempu ida ne'e ita bele fo naran appteste)
(env) ➜ projetuteste cd projetuteste(env) ➜ projetuteste django-admin startapp appteste
(env) ➜ projetuteste ls
appteste manage.py projetuteste
Ita sei haree file irarkia hanesan iha kraik:
(env) ➜ projetuteste tree
|____appteste
| |____migrations
| | |______init__.py
| |____models.py
| |______init__.py
| |____apps.py
| |____admin.py
| |____tests.py
| |____views.py
|____manage.py
|____projetuteste
| |____asgi.py
| |______init__.py
| |____settings.py
| |____urls.py
| |____wsgi.py
(env) ➜ projetuteste
2. Kria Models Django
Iha appteste/models.py nia laran hatama field unsplashimg_id
Nota: Favor nota katak ida ne'e hau implementa iha hau nia blog projetu personal ne'ebé antes ne'e hau kria tiha ona. Field foun ne'ebé mak hau aumenta ba blog mak naran unsplashimg_id, ida ne'e refleta ba ID imajen husi unsplash.com.
class Post(models.Model):
title = models.CharField(max_length=200, unique=True)
slug = models.SlugField(max_length=200, unique=True)
author = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, related_name='blog_posts')
content = models.TextField()
unsplashimg_id = models.CharField(max_length=150, default='') # Hau nia kódigu foun ba ID imajen husi unsplash
original_ref = models.CharField(max_length=200, blank=True)
status = models.IntegerField(choices=STATUS, default=0)
updated_on = models.DateTimeField(auto_now=True)
created_on = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ['-created_on']
3. Migrations/Migrasaun
(env) ➜ projetuteste python manage.py makemigrations
(env) ➜ projetuteste python manage.py migrate
4. Kria forms Django
appteste/forms.py
from .models import Post, Comment
from django import forms
from django_summernote.widgets import SummernoteWidget
class PostForm(forms.ModelForm):
class Meta:
model = Post
widgets = {
'content': SummernoteWidget(),
}
fields = ('title', 'slug', 'author', 'content', 'unsplashimg_id', 'original_ref', 'status')
class CommentForm(forms.ModelForm):
class Meta:
model = Comment
fields = ('name', 'email', 'body')Nota: Favor konsidera katak create_view() no list_view() kria tiha ona iha appteste/views.py laran.
5. Integra iha Django template HTML
Integra field unsplashimg_id ba formulariu blog ne'ebé eziste tiha ona iha create_post.html
appteste/templates/appteste/create_post.html
{% extends 'base_site.html' %}
{% load i18n %}
{% block content %}
{% if error_msg %}
<div class="animate__animated animate__headShake alert alert-danger" role="alert">
<p>{{ error_msg }}</p>
</div>
{% else %}
<div class="panel panel-default">
<div class="panel-body">
<h5 class="title-darkgray">{% trans 'Enter the detail of the blog' %}</h5>
<form action=" " method="post" >
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<label>{{ form.title.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="title-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="title-footnote-content" class="hidden">{% trans 'The title of the blog should be clear so that can help visitors interesting to visit the blog.' %}</div>
<p>{{ form.title }}</p>
{% if form.title.errors %}
<p class="errornote animate__animated animate__headShake">{% trans 'The blog with this Title already exist.' %}</p>
{% endif %}
</div>
<div class="col-md-6">
<label>{{ form.slug.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="slug-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="slug-footnote-content" class="hidden">{% trans "Specify address URL, separate in each word with minus signs or underscore (e.g. <strong>how-to-write-python</strong>) This will display on address URL when the visitor viewing a detail of the blog." %}</div>
<p>{{ form.slug }}</p>
{% if form.slug.errors %}
<p class="errornote animate__animated animate__headShake">{% trans 'The blog with this Slug already exists.' %}</p>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>{{ form.content.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="blogcontent-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="blogcontent-footnote-content" class="hidden">{% trans '<strong>Note:</strong> This is we were using <a href="https://summernote.org/">Summernote library</a> so its help us to write our blog in a better formatting.' %}</div>
<p>{{ form.content }}</p>
{{ form.content.errors }}
</div>
</div>
<div class="row">
<div class="col-md-4">
<label>{{ form.unsplashimg_id.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="unsplash-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="unsplash-footnote-content" class="hidden">{% trans 'Go to <a target="_blank" href="https://unsplash.com/">https://unsplash.com</a> and find an image that you want to display on your blog background (e.g. this image <a target="_blank" href="https://unsplash.com/photos/yM3Rj1YBAes">https://unsplash.com/photos/yM3Rj1YBAes</a> the ID of the image will be <strong>yM3Rj1YBAes</strong>), copy an ID like this and paste it into the field below' %}</div>
<p>{{ form.unsplashimg_id }}</p>
{{ form.unsplashimg_id.errors }}
</div>
<div class="col-md-4">
<label>{{ form.original_ref.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="ref-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="ref-footnote-content" class="hidden">{% trans 'Write or mention a link of the references that you used to write the blog' %}</div>
<p>{{ form.original_ref }}</p>
{{ form.original_ref.errors }}
</div>
<div class="col-md-4">
<label>{{ form.status.label }}</label>
<i tabindex="0" role="button" class="las la-question tooltip-icon" id="status-footnote" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="top" data-html="true"></i>
<div id="status-footnote-content" class="hidden">{% trans 'When the blog is ready, select a Published option below to publish the blog to the blog list otherwise this is just save into the Draft' %}</div>
<p>{{ form.status }}</p>
{{ form.status.errors }}
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary add-button">{% trans 'Submit' %}</button>
<a onclick="goBack()" class="btn btn-default cancel-button">{% trans 'Cancel' %}</a>
</div>
</div>
</form>
</div>
</div>
{% endif %}
{% endblock %}appteste/templates/appteste/list_post.html
{% extends "base_site.html" %} {% load i18n %} {% block title %} {% trans 'All Blogs' %} {% endblock %} {% block content %} {% for post in post_list %} <div class="card animate__animated animate__fadeInUp"> <a href="{% url 'post_detail' post.slug %}"> <img class="unsplash-img" src="https://source.unsplash.com/{{ post.unsplashimg_id }}" alt="{{ post.title }}"> <h2>{{ post.title }}</h2> </a> <p class="text-muted"> <i class="las la-user-edit"></i> <span>{% trans 'Author' %} {{ post.author|capfirst }} | </span> <i class="las la-calendar-check"></i> {{ post.created_on|date }} </p> <p>{{ post.content|safe|truncatewords_html:25 }}</p> {% if post.content|length > 50 %} <a href="{% url 'post_detail' post.slug %}" class="btn extra-button">{% trans 'Read More' %} →</a> {% endif %} </div> {% endfor %} {% endblock %}
Ajusta style/estilu iha ita-nia style.css ba imajen husi unsplash ne'ebé sei hatudu iha ita-nia pájina blog
img.unsplash-img {
object-position: center;
object-fit: cover;
height: 250px;
width: 100%;
transition: transform .2s ease-in-out;
}
Oinsá atu hetan ID imajen unsplash ruma no integra iha ita-nia blog?
- Loke ita nia formulariu blog ne'ebé kria ona
- Vizita https://unsplash.com/ no loke kualkér imajen ida, kópia ninian ID iha URL/address bar browser nian no paste iha field Unsplash id nian iha formulariu blog (e.x. imajen https://unsplash.com/photos/58Hygw0bS-M ninia ID mak 58Hygw0bS-M
- Prienxe formulariu hotu no submete
Karik susesu, rezultadu ikus sei hatudu lista blog ho imajen hanesan iha okos:
Atu hatene klaru liu tan bele akompanha video tuir mai: