CODEWITHSUNDEEP
pythondjango
Michael Miller
Michael Miller

Reputation: 15

Django display a photo from a model

I've tried several of methods on how to retrieve an image from a model with no luck, this is where I'm at so far. I'd like to have the image show and when the user clicks on it, it opens a modal showing a projects detail.

models.py

class Project(models.Model):
   author = models.ForeignKey('auth.User')
   title = models.CharField(max_length=200)
   client = models.CharField(max_length=200)
   date = models.DateField(timezone.now())
   service = models.CharField(max_length=200)
   info = models.TextField()
   photo = models.ImageField(upload_to='ports/static/img/',
                          default='ports/static/img/port_photo.png',
                          height_field='photo_height',
                          width_field='photo_width',)
   photo_height = models.PositiveIntegerField(blank=True, default=900)
   photo_width = models.PositiveIntegerField(blank=True, default=650)
   created_date = models.DateTimeField(
    default=timezone.now)
   published_date = models.DateTimeField(
    blank=True, null=True)


index.html

<section id="portfolio">
    {% for project in projects %}
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Portfolio</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 portfolio-item">
                <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="{{ projects.photo.url }}" class="img-responsive" alt="">
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</section>

views.py

from django.shortcuts import render
from .forms import ContactForm
from django.utils import timezone
from .models import Project
# Create your views here.


def index(request):
    form_class = ContactForm
    projects = Project.objects.filter(published_date__lte=timezone.now()).order_by('-published_date')
    return render(request, 'ports/index.html', {'form': form_class, 'projects': projects})

Upvotes: 0

Views: 58

Answers (1)

Adilet Maratov
Adilet Maratov

Reputation: 1382

Look at your img tag. In the src attribute, you are using {{ projects.photo.url }}. So, you cannot get image from a queryset, you can only do so from an object of Project model. Use {{ project.photo.url }}

Upvotes: 1

Related Questions