Related objects Can Not Query it.

Using Django Templates & Frontend
1

Notes:
i have Project Model and Image Model With Foreign Key for Project Model.
i have HTML Page With All Projects i got all data of Each Project Only Image Can Not get it.
it suppose to popup Carousel with images for Each Project when i Click on button,
Carousel is working and Ready, Only Images Can Not Access.

Any Clue To Follow Please. Thanks In Advance.

HTML NavBar:

<a class="item" href="{% url 'pages:all_projects' %}">Projects</a>

HTML Project Page:

<div class="ui four columns grid">
        {% for project in projects %}
        <div class="column">
            <div class="ui cards">
                <div class="ui green raised segment">
                    <div class="ui fluid card">
                        <div class="image">
                            <img src="{{ project.image_set.first.url }}" class="ui fluid image"/>
                        </div>
                        <div class="content">
                            <div class="header">{{ project.name }}</div>
                            <div class="meta">{{ project.area }}</div>
                            <div class="ui raised green segment">
                                <div class="ui botton" onclick="project_images_modal()">View More</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui modal Project_Modal">
                <div class="ui three column grid container">
                    <div class="one wide column">
                        <button id="Project_Image_Flipper_Left" class="ui center icon button" onclick="flip_me_left()">
                            <i class="angle double left icon"></i>
                        </button>
                    </div>
                    <div class="fourteen wide column">
                        <div class="ui cube shape">
                            <div class="sides">
                                <div class="active side">
                                    <div class="content">
                                        <div class="center">
                                            <img src="{{ project.image_set.first.url }}"
                                                 class="ui rounded massive image"/>
                                        </div>
                                    </div>
                                </div>
                                {% for project_image in project_images %}
                                <div class="side">
                                    <div class="content">
                                        <div class="center">
                                            <img src="{{ project.image.url }}"
                                                 class="ui rounded massive image"/>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="one wide column">
                        <button id="Project_Image_Flipper_Right" class="ui icon button" onclick="flip_me_right()">
                            <i class="angle double right icon"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

Models:

class Project(models.Model):
    name = models.CharField(verbose_name='Name', max_length=255)
    area = models.CharField(verbose_name='Area', max_length=255)
    year = models.CharField(verbose_name='Date-Time', max_length=255)
    slug = models.SlugField(verbose_name='Slug', unique=True)

    class Meta:
        ordering = ['area', '-year', 'name']

    def get_absolute_url(self):
        return reverse('pages:all_projects', kwargs={'slug': self.slug})

    def __str__(self):
        return f'{self.name} - {self.area}'


class Image(models.Model):
    project = models.ForeignKey('Project', verbose_name='Project', on_delete=models.CASCADE)
    image = models.ImageField(verbose_name='Image', default=default_image, upload_to=upload_project_image)

    class Meta:
        verbose_name_plural = 'Images'

    def __str__(self):
        return f'{self.project.name}'

Views:

def all_projects(request):
    projects = Project.objects.all()
    images = Image.objects.all()
    page = 'Projects'
    context = {
        'page': page,
        'projects': projects,
        'images': images,
    }
    return render(request, 'pages/projects.html', context)

Urls:

path('projects', views.all_projects, name='all_projects'),
2

It’s not clear to me what part of the template is creating the issue, so I’m just pointing out what I can see.

You have this in your template:

But I don’t see where you’re providing an iterable named project_images in the context to the template.
Nor do I see where you’re using project_image inside that loop.

3

Thanks This Line Was Wrong,

logic i am trying to achieve is to open all project with all_project view, after this when i click on project it gets all it’s images.
i cant send slug to all_project views.

How about this:
to pass all images to html and this access from html but i am using jquery to slide images and there is no <a> tags to give it slug, so it can get images only for this project with slug.

def all_projects(request):
    projects = Project.objects.all()
    images = Image.objects.all()
    page = 'Projects'
    context = {
        'page': page,
        'projects': projects,
        'images': images,
    }
    return render(request, 'pages/projects.html', context)

Other scenario i am thinking, is to get the project images from the view function and loop them on html, but i cant pass arguments to all_project views.

4

I understand English isn’t your native language, and I appreciate how difficult it may be to express yourself - but I’m not sure I understand what you’re trying to say here.

Keep in mind that a view creates a page, and when that page is returned to the browser, that view is done. There’s no connection between the browser and the view once the page has been retrieved.

This means that a button-click in the browser must call a view to do its work.

One way to do this is to have one view that creates your page, then a second view that returns the images for the selected project.

In general terms, this is no different than the typical pattern of having an “index” page showing a list of items - where each entry in that list is a link to a detailed page.

In this case, the link would be an AJAX call to a view that would render the img tags for the selected project, instead of rendering a complete new page.

5

I am Very Sorry For My Bad English, Yes, It’s Not My Native :slight_smile:
Also Sorry for all this frustrating questions.

according to below View, Isn’t is suppose to give all projects which means it have also projects images?
so in this page which will be created by the view must have this data?

def all_projects(request):
    projects = Project.objects.all()
    page = 'Projects'
    context = {
        'page': page,
        'projects': projects,
    }
    return render(request, 'pages/projects.html', context)

HTML For Testing:

{% for project in projects %}
{{project.name}}
    {% for image in project.images.all %}
    <img src="{{ project.image.url }}"/>
    {% endfor %}
{% endfor %}

it renders the data of project nicely, but for only the image <img /> tag nothing.
and if i take the <img> tag out of the {% For %} Loop it appears in Page Inspector F12 with (Unknown) in src attribute.

6

Note that your model name is Image, not Images. The related name would then be project.image.all, not project.images.all. (Or possibly project.image_set.all - I don’t remember off the top of my head which one you need to specify in a template.)

7

Many Thanks Ken For Support My Friend…

Finally here the solution for anyone whom has the same problem or following this post.
I will post my code here for reference.

Models.py:

class Project(models.Model):
    name = models.CharField(max_length=255)
    area = models.CharField(max_length=255)
    year = models.CharField(max_length=255)
    slug = models.SlugField(unique=True)
    main_image = models.ImageField(default=default_image, upload_to=upload_project_main_image)

def images(self):
        images = Image.objects.filter(project=self)
        return images

    class Meta:
        ordering = ['area', '-year', 'name']

    def get_absolute_url(self):
        return reverse('pages:detail_project', kwargs={'slug': self.slug})

    def __str__(self):
        return f'{self.name} - {self.area}'


class Image(models.Model):
    project = models.ForeignKey('Project', on_delete=models.CASCADE)
    image = models.ImageField(default=default_image, upload_to=upload_project_image)

    def __str__(self):
        return f'{self.project}'

Admin.py:

`class ImageInline(admin.TabularInline):
    model = Image
    extra = 8


@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    list_display = ['name', 'area', 'year']
    list_display_links = ['name', ]
    list_filter = ['area', 'year']
    prepopulated_fields = {'slug': ('name', 'area', 'year')}
    inlines = [ImageInline]


@admin.register(Image)
class ImageAdmin(admin.ModelAdmin):
    list_display = ['project', ]
    list_display_links = ['project', ]`

Views.py:

def all_projects(request):
    projects = Project.objects.all()
    page = 'Projects'
    context = {
        'page': page,
        'projects': projects,
    }
    return render(request, 'pages/projects.html', context)


def detail_project(request, slug):
    project = get_object_or_404(Project, slug=slug)
    project_images = project.images()
    page = f'{project.name} - {project.area}'
    context = {
        'page': page,
        'project': project,
        'project_images': project_images,
    }
    return render(request, 'pages/detail-project.html', context)

URLs.py

<div class="ui container">
    <div class="ui relaxed middle aligned grid">

        <div class="one wide column">
            <button id="Flipper_Left" class="ui icon button" onclick="flip_me_left()">
                <i class="angle double left icon"></i>
            </button>
        </div>

        <div class="fourteen wide column">
            <div class="ui cube shape">
                <div class="sides">
                    <div class="active side">
                        <div class="image">
                            <img src="{{ project.main_image.url }}" class="ui rounded fluid image"/>
                        </div>
                    </div>
                    {% for image in project_images %}
                    <div class="side">
                        <div class="image">
                            <img src="{{ image.image.url }}" class="ui rounded fluid image"/>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="one wide column">
            <button id="Flipper_Right" class="ui right icon button" onclick="flip_me_right()">
                <i class="angle double right icon"></i>
            </button>
        </div>

    </div>
</div>

{% include '__partials/__divider.html' %}

<div class="ui centered column relaxed grid container">
    <a href="{% url 'pages:all_projects' %}">
        <button class="ui left labeled icon button">
            <i class="left arrow icon"></i>
            Back To Projects
        </button>
    </a>
</div>

Enjoy.