Develop Reference

How to display a gallery of images of a product after clicking on the first image?

So in short, I have a ListView in Django which displays pictures with tables on the website. Then I have a DetailView where I am placing a second webpage to use with slugs but I guess my logic is wrong.
I want to be able to click on a particular picture/ table and this would redirect me to another page( possible created with slug) where I can display more pictures of the same table. I have created everything so far but I am thinking my logic is wrong. You don't have to write code, just please explain what is the correct way of doing it since I am doing it for the first time.
First I created a Categories model which lists categories such as: tables, kitchens, wardrobes, bedrooms. I then created Image category where I would have title and image and so on but this was okay for one of the views but for this one I want to display multiple pictures as I mentioned and I saw some code which enabled me to have multiple images.
views.py
class TableCategoryListView(ListView):
model = Images
template_name = 'main/projects/tables.html'
context_object_name = 'category_images'
queryset = Images.objects.filter(category__category_title="tables")
class TablesDetailView(DetailView):
model = Images
template_name = "main/projects/tables_slug.html"
url.py
path('proekti/masi/', TableCategoryListView.as_view(), name='tables'),
path('proekti/masi/<slug:slug>', TablesDetailView.as_view(), name='table'),
models.py
class Category(models.Model):
category_title = models.CharField(
max_length=50
)
def __str__(self):
return self.category_title
class Images(models.Model):
title = models.CharField(
blank=True,
null=True,
max_length=50,
)
category_image = models.ImageField(
blank=True,
null=True,
)
category = models.ForeignKey(
Category,
on_delete=models.CASCADE)
def __str__(self):
return self.title
def __unicode__(self):
return self.title
slug = models.SlugField(
null=True,
)
def get_absolute_url(self):
return reverse("article-detail", kwargs={"slug": self.slug})
class PhotoAlbum(models.Model):
menu = models.ForeignKey(Images, on_delete=models.CASCADE)
image = models.ImageField()
order = models.IntegerField(
blank=True,
null=True,
)
def __unicode__(self):
return self.menu
class Meta:
ordering = ('order',)
I read this would help me to easily add multiple pictures.
admin.py
#admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
pass
class ImagesForm(forms.ModelForm):
model = Images
class Media:
js = (
'/static/js/jquery-latest.js',
'/static/js/ui.base.js',
'/static/js/ui.sortable.js',
'/static/js/menu-sort.js',
)
class PhotoAlbumInline(admin.StackedInline):
model = PhotoAlbum
admin.site.register(
Images,
inlines=[PhotoAlbumInline],
form=ImagesForm,
list_filter=('category',),
search_fields=('title',)
)
"""
/* menu-sort.js */
jQuery(function($) {
$('div.inline-group').sortable({
/*containment: 'parent',
zindex: 10, */
items: 'div.inline-related',
handle: 'h3:first',
update: function() {
$(this).find('div.inline-related').each(function(i) {
if ($(this).find('input[id$=name]').val()) {
$(this).find('input[id$=order]').val(i+1);
}
});
}
});
$('div.inline-related h3').css('cursor', 'move');
$('div.inline-related').find('input[id$=order]').parent('div').hide();
});
"""
template tables.html
{% extends 'base.html' %}
{% block page_content %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/masi.css' %}">
<div class="row">
{% for image in object_list %}
{% if forloop.counter0|divisibleby:1 %}
<div class="column" style="background-color: whitesmoke">
<img src="{{ image.category_image.url }}" alt="pic">
<p>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}
template tables_slug.html --> where I would want to display all the images of a particular table with it doesn't show me one of the tables and doesn't show all the images I have uploaded in the admin page.
{% extends 'base.html' %}
{% block page_content %}
{% for image in category_images %}
<div>
<h2>{{ object.title }} </h2>
<img src="{{ object.category_image.url }}" alt="pic">
</div>
{% endfor %}
{% endblock %}

Updated
You can do this:
In your TableCategoryListView, override the get_context_data like so:
class TableCategoryListView(ListView):
model = Images
template_name = 'main/projects/tables.html'
context_object_name = 'category_images'
class TableCategoryListView(ListView):
model = Images
template_name = 'main/projects/tablesdetail.html'
context_object_name = 'detail_cat_img'
def get_context_data(self, **kwargs):
context = super(TableCategoryListView, self).get_context_data(**kwargs)
context['detail_category'] = Images.objects.all() # this gives you all the items from the Images model
context['xtr_images'] = PhotoAlbum.objects.all() # the logic to render only those photos related to the current view goes here. You have to figure this out yourself
return context # this returns the two objects above xtr_images and detailcategory
You can use the slice operator to determine number of images to show per page either in your views or on the template itself like so:
Entry.objects.all()[:5] # prints four images
This should do the trick.

Thanks for your answer.I just solved the problem I believe with simpler code.
I was missing "related_names" in the model for the relation.
models.py
class PhotoAlbum(models.Model):
menu = models.ForeignKey(
Images,
on_delete=models.CASCADE,
related_name="child_images",
)
image = models.ImageField()
order = models.IntegerField(
blank=True,
null=True,
)
def __unicode__(self):
return self.menu
class Meta:
ordering = ('order',)
and for the template then: tables_slug.html
{% extends 'base.html' %}
{% block page_content %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/masi.css' %}">
{% for image in image.child_images.all %}
<div class="column">
<p>
<img src="{{ image.image.url }}" alt="pic">
</p>
</div>
{% endfor %}
{% endblock %}

display contents of manytomany and foreignjey fields in Django

I'm new to Django and I'ma building a basic blog application.
I cant show manytomany field (in tags) and a foreignkey field (comments) in my details page.
models.py
class BlogContent(models.Model):
title = models.CharField(max_length=200)
author = models.CharField(max_length=200)
content = models.TextField()
date_published = models.DateField(auto_now=True)
image = models.ImageField(upload_to='media/')
def __str__(self):
return self.title
class TagName(models.Model):
tag = models.ManyToManyField(BlogContent, null=True)
name = models.CharField(max_length=100, blank=True, null=True)
def __str__(self):
return self.name
class Comment(models.Model):
comt_text = models.TextField()
comments = models.ForeignKey(BlogContent, on_delete=models.CASCADE)
date_published = models.DateField(auto_now=True)
name = models.CharField(max_length=200, blank=True, null=True)
def __str__(self):
return self.name
views.py
def details(request, blogcontent_id):
data_blog = get_object_or_404(BlogContent, pk=blogcontent_id)
data_tag = get_object_or_404(TagName, pk=blogcontent_id)
data_comment = Comment.objects.select_related()
return render(request, 'details.html',
{'data_blog': data_blog, 'data_tag':data_tag, 'data_comment':data_comment})
details.html
{% extends 'base.html' %}
{% block body_base %}
<img class="card-img-top img-responsive" src={{ data_blog.image.url }} alt="Card image cap">
<h2 class="blog-post-title">{{ data_blog.title }}</h2>
<p class="blog-post-meta">{{ data_blog.date_published }} {{ data_blog.author }}</p>
<p>{{ data_blog.content }}</p>
{% endblock %}
how do i show foreignkey and manaytomany fieds after this?

TBH this is much easier if you use class based views.
The view would simply be:
class BlogContentDetail (DetailView):
model = BlogContent
The url call would be url(r'^blog-detail/(?P<pk>\d+)/$, BlogContentDetail.as_view(), name="blog_detail")
Your html file should be called blogcontent_detail.html and held within the app subfolder in the templates folder
The template would then be:
{% extends 'base.html' %}
{% block body_base %}
<img class="card-img-top img-responsive" src={{ object.image.url }} alt="Card image cap">
<h2 class="blog-post-title">{{ object.title }}</h2>
<p class="blog-post-meta">{{ object.date_published }} {{ object.author }}</p>
<p>{{ object.content }}</p>
{% for tag in object.tags_set.all %}{{ tag }}{% endfor %}
{% endblock %}

You can iterate the ManyToMany Field in this way
{% for tags in data_tag.tag.all %}
<p > {{tags}} </ p>
{% endfor %}
For foreign key
{{data_comment.comments}}

How to show multiple category in detail view django?

I'm working on a Django blog, and having implemented category for detail page. I've stumbled upon an issue.
I want to display some categories of a product by using many to many field, I use the following code.
This my model.py file
from django.db import models
from django.urls import reverse
# Create your models here.
class Category(models.Model):
name = models.CharField(max_length=200)
slug = models.SlugField(max_length=200, unique=True)
is_active = models.BooleanField(default=True)
def __str__(self):
return self.name
def get_absolute_url(self):
return reverse('myshop:product_list_by_category', args=[self.slug])
class Product(models.Model):
category = models.ManyToManyField(Category)
name = models.CharField(max_length=200)
slug = models.SlugField(max_length=200)
image = models.ImageField(upload_to='products/%Y/%m/%d', blank=True)
description = models.TextField(blank=True)
price = models.DecimalField(max_digits=10, decimal_places=2)
stock = models.PositiveIntegerField()
available = models.BooleanField(default=True)
created = models.DateTimeField(auto_now_add=True)
updated = models.DateTimeField(auto_now=True)
def __str__(self):
return self.name
def get_absolute_url(self):
return reverse('myshop:product_detail', args=[self.slug])
This is views.py file
from django.shortcuts import render, get_object_or_404
from .models import Category, Product
# Create your views here.
def product_list(request, category_slug=None):
category = None
categories = Category.objects.all()
products = Product.objects.filter(available=True)
if category_slug:
category = get_object_or_404(Category, slug=category_slug)
products = products.filter(category=category)
return render(request, 'shop/product/list.html', {'category': category, 'categories': categories, 'products': products})
def product_detail(request, product_slug):
product = get_object_or_404(Product, slug=product_slug, available=True)
category = product.category.filter(is_active=True)
return render(request, 'shop/product/detail.html', {'product': product}, {'category': category})
and this is for detail.html page file
{% extends "shop/base.html" %}
{% load static %}
{% block title %}
{% if category %}{{ category.title }}{% else %}Products{% endif %}
{% endblock %}
{% block content %}
<div class="product-detail">
<img src="{% if product.image %}{{ product.image.url }}{% else %}{% static "img/no_image.png" %}{% endif %}">
<h1>{{ product.name }}</h1>
{% for category in category %}{{ category.name }}{% if not forloop.last %}, {% endif %}
{% endfor %}
<p class="price">${{ product.price }}</p>
{{ product.description|linebreaks }}
</div>
{% endblock %}
I followed the tutorial from Django by Example book.
in the book includes a code to display just one category of each product with the following code
<a href="{{ product.category.get_absolute_url }}">{{ product.
category }}</a>
and I change it to code like above in detail.html file.
Thank you for the help

Try
{% for category in product.category.all %}
{{ category }}
{% endfor %}

how to filter story by it's belonging tag

I have two models news and category, and in news I have foreignkey of category. I know how to display news with same category in a single template. but furthermore, in my home page I'm trying to display featured news of each category. this is where I'm having problem.
this is my models.py
class News(models.Model):
title = models.CharField(max_length=120)
content = models.TextField()
category = models.ForeignKey("Tag")
active = models.BooleanField(default=True)
featured = models.BooleanField(default=False)
top = models.BooleanField(default=False)
slug = models.CharField(max_length=255, unique=True)
featuredInCat = models.BooleanField(default=False)
objects = StoryManager()
class NewsQueryset(models.query.QuerySet):
def active(self):
return self.filter(active=True)
def featuredInCat(self):
return self.filter(featuredInCat=True)
class NewsManager(models.Manager):
def get_queryset(self):
return NewsQueryset(self.model, using=self._db)
def get_featuredInCat(self):
return self.get_queryset().active().featuredInCat()
def all(self):
return self.get_queryset().active()
class Category(models.Model):
title = models.CharField(max_length=120)
description = models.TextField(max_length=5000, null=True, blank=True)
In views.py
def category_list(request):
categoryList = NewsCategory.objects.all()
featuredInCat = News.objects.get_featuredInCat()
context = {
"featuredInCat":featuredInCat
"categoryList":categoryList,
}
return render(request,"news/category_list.html", context)
In my template
{% for category in categoryList %}
<div class='col-sm-4'>
<div id="container">{{category.title}}</h1>
<ul>
{% for x in featuredInCat %}
{{x.title}}</li>
{% endfor %}
</ul>
</div>
<hr>
</div>
{% endfor %}
then this shows the featuredInCat in every category where featuredInCat should be shown only in its Category section.
how do I fix this?

Take a look at the built-in regroup template tag of django. You will need to change your template to something like this:
{% regroup featuredInCat by category as news_list %}
<ul>
{% for news in news_list %}
<li>{{ news.grouper.title }}
<ul>
{% for item in news.list %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>

You can change your for loop to iterate over the correct objects
{% for x in category.news_set.get_featuredInCat %}
You won't need the context variable anymore

Django foreign key object image in template

Ok I know a thousand people asked this but I have looked all over this site to no success(also google) here is my models.py
VENUE_IMAGE_PATH = os.path.join('images', 'venue_profiles/%Y/%m/%d')
class Venue(models.Model):
.....................
name = models.CharField(max_length=100)
address = models.CharField(max_length=100)
city = models.CharField(max_length=100)
...........................
class VenueImage(models.Model):
venue = models.ForeignKey(Venue, related_name="venue")
image = models.ImageField(upload_to=VENUE_IMAGE_PATH, max_length=255)
Here is my views.py
def list(request):
venues = Venue.objects.all()
images=VenueImage.objects.all()
return render_to_response('venues/list.html', {'venues':venues,'images':images},
context_instance = RequestContext(request))
here is my template
{% for v in venues %}
<a href='#'>{{v.name}}</a>
edit
{% if images %}
<img class='venue_image' src='images/venue_profiles/2012/10/25/{{images.url}}'
alt=''>
{% endif %}
{% endfor %}
Now I have tried {{images.images.url}} and {{images.url}}. {{MEDIA_URL}}images/venue_profiles/%Y/%m/%d/{{image.url}}.
I also tried {%for i in images %} {{i.url}} {% endfor %}.
I also tried without that 'images/venue_profiles/2012/10/25' prefix and nothing seems to work.
Can someone please help me see what I am doing wrong.

# In models.py
class Venue(models.Model):
....
name = models.CharField(max_length=100)
....
images = models.ForeignKey(VenueImage)
class VenueImage(models.Model):
image = models.ImageField(upload_to=VENUE_IMAGE_PATH)
# In views.py
def list(request):
venues = Venue.objects.all()
return render(request,
'venues/list.html',
{'venues': venues'})
# In template
{% for venue in venues %}
<a href '#'>{{ venue.name }}</a>
...
{% for image in venue.images %}
<img class='venue_image' src=''{{ image.url }}' alt=''>
{% endfor %}
{% endfor %}