O Cloudinary é um serviço de gerenciamento de imagens e arquivos na nuvem, muito útil por exemplo para utilização junto ao Heroku, que não oferece o serviço de hospedagem de arquivos. Além de nos oferecer o serviço de hospedagem de imagens, o Cloudinary disponibiliza diversas manipulações, uso de efeitos, detecção facial e muitos outros recursos para as imagens enviadas.
O que é preciso?
Para iniciarmos é preciso se cadastrar no site. O cadastro pode ser feito com uma conta gratuita limitada.
Ao finalizar o cadastro, uma tela como a exibida abaixo estará disponível. Atenção nos itens Cloud name, API Key e API Secret, eles serão úteis mais adiante.
Configurando o ambiente
A instalação do pacote pode ser feita via pip:
Ou baixando o pacote pelo link
Configurando o settings
Obs.: focaremos apenas nas configurações do cloudinary.
Primeiramente no INSTALLED_APPS incluiremos a linha ‘cloudinary’ e a linha com nossa app:
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘cloudinary’,
‘cloudinary_example.core’,
)
Ainda no settings adicione ao seu arquivo os parâmetros de configuração do Cloudinary:
Obs.: estes parâmetros são os mesmo da imagem inicial. E os abaixo apresentados são apenas ficticios.
‘cloud_name’ : seu_app_cloud,
‘api_key’ : ‘00998877665544’,
‘api_secret’: ‘DBseuAPPAKI-mtb7ZklCCBuJNoNetp’
}
Models
Faremos a importação do Cloudinary e em seguida definiremos nossa classe ‘Imagens’:
from cloudinary.models import CloudinaryFieldclass Imagens(models.Model):
imagem = CloudinaryField(‘imagem’)
Obs.: execute o syncdb. No caso de utilização do South, acrescente o seguinte código:
add_introspection_rules([], [“^cloudinary.models.CloudinaryField”])
Forms
Agora vamos importar o modelo em nosso forms, e definiremos nossa Classe em seguida:
from cloudinary_example.core.models import Imagensclass ImagensForm(forms.ModelForm):
class Meta:
model = Imagens
Agora vamos criar o formulário para fazermos o upload das imagens.
Antes vamos definir uma rota para nossa views, chamaremos ela de ‘galeria’:
url(r’^galeria/$’, ‘galeria’, name=’galeria’),
)
Criaremos agora uma views mais simples possível para chegar até nosso template:
from cloudinary_example.core.forms import ImagensFormdef galeria(request):
return render_to_response(‘galeria.html’, {‘form’:ImagensForm})
Agora vamos criar nosso template ‘galeria.html’ com o seguinte código:
{% load cloudinary %}{% block content %}
<form action=“.” method=“post” enctype=“multipart/form-data”>
{% csrf_token %}
<table border=1 align=“center”>
<tr>
<td style=“padding:10px;margin:20px;”>
<label for=“imagens”>Imagens:</label>
</td><td style=“padding:10px;margin:20px;”>
{{ form.imagem }}
</td>
</tr>
<tr align=“center”>
<td colspan=‘2’ style=“padding:10px;margin:20px;”>
<input type=“submit” value=“Upload”>
</td>
</tr>
</table>
{% endblock content%}
Legal mas nossa views ainda não tem a ação para salvar a imagem no Cloudinary, agora vamos voltar e realizar a ação para salvar a imagem.
Primeiro vamos incluir as importações do nosso model.
Vamos alterar nosso método ‘galeria’ para o seguinte:
from cloudinary_example.core.forms import ImagensForm
from cloudinary_example.core.models import Imagensdef galeria(request):
if request.method == ‘POST’:
form = ImagensForm(request.POST, request.FILES)
if form.is_valid():
form.save()return render(request, ‘galeria.html’, {‘form’:ImagensForm})
Ok, agora nossa imagem já pode ser salva no Cloudinary e nosso banco de dados. E como recuperar as imagens para exibição?
Neste exemplo vamos utilizar as mesma views e o mesmo template para exibição. Para isso vamos alterar nossa views para buscar os id’s de nossas imagens salvos no banco,
altere o seu return para o seguinte:
Já em seu template, adicione o seguinte código:
{% for img in imgs %}
<tr>
<td>{% cloudinary img.imagem %}</td>
</tr>
{% empty %}
<tr>
<td>Sem Itens na Lista</td>
</tr>
{% endfor %}
</table>
Com apenas este código acima, é possível buscarmos as imagens assim que carregadas.
Alguns detalhes importantes:
A tag {% cloudinary img.imagem %} é equivalente a uma tag html :
<_img src=”http://res.cloudinary.com/suapasta/image/upload/v001122334455/codigodasuaimagem.jpg”>
Se é uma tag HTML, podemos utiliza-la sempre assim? A resposta é utilize a que se sentir mais confortável, não há qualquer problema.
Alguns parâmetros podem ser adicionados a sua tag, como por exemplo, height, width, crop e muitos outros:
{% cloudinary img.imagem height=500 width=400 crop=”fill” %}
Consulte a documentação para mais exemplos de manipulação.
Extra
E como carregar múltiplos arquivos? O Django e Cloudinary te dão suporte total a essa ação de forma simples.
Vamos começar alterando nosso forms. Primeiro adicionaremos a importação da biblioteca do Cloudinary:
Em seguida, incluiremos após a class meta a linha que indica que nosso campo file input deve ser multiple:
E nossa view sofre uma pequena alteração para percorrer os itens do request Files:
if request.method == ‘POST’:
form = ImagensForm(request.POST, request.FILES)
for f in request.FILES.getlist(‘imagens’):
Imagens(imagem=f).save()return render(request, ‘galeria.html’, {‘form’:ImagensForm, ‘imgs’:Imagens.objects.all()})
Tudo pronto, agora já temos um galeria simples.
O código está disponível no GitHub.
Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.
Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.
Leia também: