Images with Django - display and static

1

I'm a beginner in Django and I'm developing a simple blog.

I know that the configuration of the static files needs to be different for the development and production environment, but I always get caught up in understanding how it works since I've never deployed any web applications I know how the server handles the files.

If someone has some reading indication so that I understand better how this works would be of great help.

With this in mind, I'm developing the blog in development environment and I came across the following problem:

Within the models of a particular application there is a FileField field that is responsible for handling the import of the header image from the blog post.

content.models.py

from django.db import models
from tinymce import models as tinymce_models


class Article(models.Model):
    titulo = models.CharField(max_length=200)
    photo = models.FileField(upload_to='static', null=True, blank=True) 
    autor = models.CharField(max_length=30)
    corpo = tinymce_models.HTMLField(null=True, blank=True) #Tinymce field
    data = models.DateField()
    tag = models.CharField(max_length=30)
    .
    .
    .

This file is collected in my view:

content.views.py

def home (request):
menu = Article.objects.all()
lista_artigos = Article.objects.all() 
paginator = Paginator(lista_artigos, 2) 
trabalhos_feitos = Work.objects.all() 

page = request.GET.get('page')  
try:
    conteudo = paginator.page(page)
except PageNotAnInteger:
    conteudo = paginator.page(1)
except EmptyPage:
    conteudo = paginator.page(paginator.num_pages)

context = {'conteudo_artigo': conteudo, 'menu':menu,'trabalhos':trabalhos_feitos}
return render(request, 'base.html', context)

And passed to my template:

base.html

{% for item in conteudo_artigo%}
{% if item.photo %}
    <img src="{{item.photo}}" class="img-responsive" alt="...">
{% endif %}

    <a id='titulo' href="/artigos/{{item.id}}">{{item.titulo}}</a>
    <h5 id ='autor'>{{item.autor}}</h5>
    <h5 id ='tag'>{{item.tag}}</h5>

    {% if item.corpo|length > 1000 %} 
        <p id = 'corpo_artigo'>{{item.corpo|truncatewords:200|safe}} </p> 
        <h5 id ='data'>{{item.data}}</h5>
        <button class="btn btn-default navbar-btn"> <a href="/artigos/{{item.id}}">Continue Lendo</a></button>
    {% else %}
        <p>{{item.corpo|safe}} </p>
        <h5 id ='data'>{{item.data}}</h5>
    {% endif%}      
 {% endfor %}

So far so good. The image (even the FileField not being ideal for handling images) usually appears in my layout.

TheproblemisthatIhaveanotherfunctioninmyviewthatisresponsiblefordirectingtoapagecontainingonlythearticle.Whenthisisdone,theimagestopsappearing.

content.views.py

defartigos(request,id_pagina_artigo):menu=Article.objects.all()try:materia=Article.objects.get(id=id_pagina_artigo)exceptObjectDoesNotExist:#raiseHttp404returnrender(request,'404.html',{'menu':menu})returnrender(request,'artigo.html',{'teste':materia,'menu':menu})

Thisisthetemplateconfigurationforthisviewfunction:

{%extends"index.html"%}
{% load static %}
{% block artigo_full %}

<div class='row'>
     <div id='artigo' class='col-lg-12 col-md-12 col-sm-12'>
         {% if teste.photo %}
             <img src="{% static '{{teste.photo}}' %}" class="img-responsive" alt="...">
         {% endif %}
         <a id='titulo' href="/artigos/{{teste.id}}">{{teste.titulo}}</a>
         <h5 id ='autor'>{{teste.autor}}</h5>
         <h5 id ='tag'>{{teste.tag}}</h5>
         <p>{{teste.corpo|safe}} </p>
         <h5 id ='data'>{{teste.data}}</h5>
     </div>
 </div>

{% endblock %}

I know a lot of what is shown in the code is not the most efficient and has a lot of hardcoded, but consider that I am a beginner and that my intention is to build the base structure and go deeper into the code to improve its syntax.

Finally, my url.py :

from content import views
from django.contrib import admin
from django.conf.urls import url , include

urlpatterns = [
    url(r'^$', views.home),
    url(r'^artigos/(?P<id_pagina_artigo>\d+)$', views.artigos),
    url(r'^portfolio/$', views.portfolio),
]
    
asked by anonymous 04.10.2017 / 17:40

1 answer

1

I think the problem is the way you're trying to render the file path. In the listing you do so:

<img src="{{item.photo}}" class="img-responsive" alt="...">

And on the detail page you do this:

<img src="{% static '{{teste.photo}}' %}" class="img-responsive" alt="...">

I'm a bit rusty in Django, but I do not think it will be able to render a variable inside a template tag. So my suggestion would be you to standardize the usage for the first way you used it.

    
05.10.2017 / 23:09