python - Django display uploaded multiple images with foreign key - django

Question

I have for example the Post with the id 31 after I upload one or more images are displayed in db as:
id (for example: 1,2,3)
url to image(for example: my-images/image.png)
foreing_id (thats is id to post i.e 31)
But I do not know how to display the image in the template for this post (and others of course)
my model:
class Post(models.Model):
title = models.CharField(max_length=20000)
date = models.DateTimeField(editable=True, null=True)
text = models.TextField(max_length=50000)
is_super = models.IntegerField(default=0)
class Image(models.Model):
foreing = models.ForeignKey(Post)
image = models.ImageField(null=True, blank=True, upload_to='my-images')
view where i upload and display all posts(Here i display):
class IndexView(generic.ListView):
paginate_by = 4
template_name = 'home/index.html'
context_object_name = 'all_posts'
def get_queryset(self):
query = self.request.GET.get('q')
if query:
posts = Post.objects.filter(
Q(text__icontains=query.capitalize()) |
Q(title__icontains=query.capitalize()) |
Q(text__icontains=query.lower()) |
Q(title__icontains=query.lower())
).distinct()
return posts
else:
return Post.objects.filter(date__lte=timezone.now()).order_by('-date')
there i create a new post:
def post_new(request):
ImageFormSet = modelformset_factory(Image, form=ImageForm, extra=3)
if request.method == "POST":
form = PostForm(request.POST, request.FILES or None)
formset = ImageFormSet(request.POST, request.FILES, queryset=Image.objects.none())
if form.is_valid() and formset.is_valid():
post = form.save(commit=False)
post.date = timezone.now()
post.save()
for form in formset.cleaned_data:
image = form['image']
photo = Image(foreing_id=post.id, image=image)
photo.save()
return render(request, 'home/page.html')
else:
form = PostForm()
return render(request, 'home/edit_post.html',
{'form': form, 'error_message': 'something error message'})
else:
form = PostForm()
formset = ImageFormSet(queryset=Image.objects.none())
return render(request, 'home/edit_post.html', {'form': form, 'formset': formset})
And here i need to display images for all this posts:
Here is a image displayed
<div class="profile-img-container" style="text-align: center">
<img class="img" src="images">
<a target="_blank" title="****." href="URL to the uploaded image"><span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span></a>
full index.html if needed:
<div class="content">
{% for post in all_posts %}
<div class="thumbnail">
<p style="text-align: center">{{ post.title }}</p>
<p class="text" style="text-align: center; height: 40px; overflow: hidden">{{ post.text }}</p>
<p><a type="button" class="btn btn-primary" href="{% url 'klass:detail' post.id %}">More...</a></p>
<div class="profile-img-container" style="text-align: center">
<img class="img" src="/media/**display images**" style="height: 150px">
<a target="_blank" title="****." href="**url to images**"><span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span></a>
</div>
{% if user.is_authenticated %}
<form method="post" style="text-align: right">
<p>
{% csrf_token %}
<a methods="post" role="button" class="btn btn-info" href="{% url 'klass:favorite' post.id %}">
<i class="fa fa-heart" style="color: red" aria-hidden="true"></i>great! {{ post.is_super }}
</a>
</p>
</form>
<span style="margin-left: 90px">Published: {{ post.date }}</span>
{% else %}
<p style="text-align: right">****<br>
<a role="button" class="btn btn-info disabled" style="text-align: right">
<i class="fa fa-heart" aria-hidden="true"></i>great!</a>
{{ post.date }}
</p>
{% endif %}
</div>
{% endfor %}
EDIT
urls:
from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^home_page/', include('home.urls', namespace='home')),
url(r'^captcha/', include('captcha.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'home/static'),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
another urls in home app:
from django.conf.urls import url
from . import views
app_name = 'home'
urlpatterns = [
***,
url(r'^$', views.IndexView.as_view(), name='index'),
url(r'^(?P<post_id>[0-9]+)/$', views.comments, name='detail'),
url(r'^(?P<post_id>[0-9]+)/addcomment$', views.addcomment, name='comment'),
url(r'^(?P<post_id>[0-9]+)/favorite/$', views.favorite, name='favorite'),
url(r'^(?P<pk>[0-9]+)/edit/$', views.post_edit, name='edit'),
url(r'^post/new/$', views.post_new, name='post_new'),
url(r'^(?P<post_id>[0-9]+)/delete_album/$', views.delete_post, name='delete_post'),
****,
]

Answer 1

You should loop through post.image_set.all and display each image separately, for example:
{% for image in post.image_set.all %}
<div class="profile-img-container" style="text-align: center">
<img class="img" src="{{ image.image.url }}" style="height: 150px">
<a target="_blank" href="{{ image.image.url }}">
<span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span>
</a>
</div>
{% endfor %}
A few side notes:
You shouldn't include /media in your image url as it will be automatically appended by Django.
Naming your foreign keys as foreign (also check your spelling) is not recommended for readability reasons. Consider renaming it to use the parent model's name in lowercase (such as post) instead so that it becomes post = models.ForeignKey(Post)
Referencing the foreign key using _id is not recommended. Use the model itself instead, for example: photo = Image(post=post, image=image)