Selecting specific categories to display on the homepage and limiting the number of images shown

Question

Selecting specific categories to display on the homepage and limiting the number of images shown

<<html>


<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Gallery</title>

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d7cd0ccd3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <style>
        .image-thumbnail {
            height: 200px;
            object-fit: cover;

        }

        .container {
            margin-left: 1;

        }

        .h1 {
            text-align: center;

        }

        .list-group-item a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<h1 class="text-center m-5 p-3 mb-2 bg-light text-secondary">CHARLIES LIFE</h1>


<body class="m-5">
    <div class="container">


        <div class="row">
            <div class="col-md-3 mt-2">

                <div class="card">
                    <div class="card-header">
                        Categories
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <a href="{% url 'gallery' %}">All</a>
                        </li>
                        {% for category in categories %}
                        <li class="list-group-item">
                            <a href="{% url 'gallery' %}?category={{category.name}}">{{category.name}}
                            </a>
                        </li>
                        {% endfor %}
                        <a href="{% url 'add' %}" class="btn btn-dark btn-block m-1" type="button""> Add Photo</a>
                    </ul>
                </div>
            </div>


            <div class=" col-md-9">
                            <div class="row">

                                {% for photo in photos %}
                                <div class="col-md-4">
                                    <div class="card my-2">
                                        <img class="image-thumbnail" src="{{photo.image.url}}" class="card-img-cap"
                                            alt="...">
                                        <div class="card-body">
                                            <p class="card-text text-center">{{photo.category.name}}</p>
                                        </div>
                                        <div class="d-grid gap-2">
                                            <a href="{% url 'photo' photo.id %}" class="btn btn-dark m-1"
                                                type="button"> View</a>
                                        </div>
                                    </div>
                                </div>
                                {% empty %}
                                <h3> No Photos...</h3>
                                {% endfor %}


</body>

</html>

Hi, I'm currently building a photo blog to document the journey of my son as he grows. The code above represents the "home" page named gallery.

Currently, I have a loop that adds a "card" class to my gallery page each time I upload an image.

I would like to modify it so that it displays only one picture from each category I create, rather than showing every image uploaded to the site. I didn't anticipate the number of photos I would upload, and I don't want the home page to become overloaded with images.

If anyone has any suggestions on how I can achieve this or any other recommendations, I would greatly appreciate it.

Thank you in advance.

html css django templates bootstrap-5

Answer 1

Answer №1

Allow me to clarify, it seems that you are aiming to categorize images into different sections such as 'young', 'teenager', and 'adult'. You want to display only the images corresponding to each section with the section name tagged in the image itself. To achieve this, you can use the following code:

{% for photo in photos %}
    {% if photo.tag == young %}
        <h1>Show young images here</h1>
    {% elif photo.tag == teenager %}
        <h1>Show teenage images here</h1>
    {% elif photo.tag == adult %}
        <h1>Show adult images here</h1>
    {% else %}
        <h1>No photo's yet</h1>
    {% endif %}
{% endfor %}

Alternatively, you can handle this logic in your views by serving different images to various templates. Here is an example of how to do that:

def teenageImages(request):
    teenageImage = Image.objects.raw("SELECT * FROM 
    photos WHERE tag = 'teenager' ")
    template = loader.get_template('teenager_photos.html')
    context = {
        'photos': teenageImage
    }
    return HttpResponse(template.render(context, request))

Another approach would be to utilize filters. More information on using filters can be found here.

For bootstrap cards, you can refer to this Github Repo showcasing bootstrap cards with images (no link provided): my webpage repo

Feel free to explore this repository for inspiration and ideas on implementing similar features.

Additionally, consider using Wagtail for a more streamlined approach. I have created a detailed Github repository related to Wagtail which can be accessed here.

Answer 2

Allow me to clarify, it seems that you are aiming to categorize images into different sections such as 'young', 'teenager', and 'adult'. You want to display only the images corresponding to each section with the section name tagged in the image itself. To achieve this, you can use the following code:

{% for photo in photos %}
    {% if photo.tag == young %}
        <h1>Show young images here</h1>
    {% elif photo.tag == teenager %}
        <h1>Show teenage images here</h1>
    {% elif photo.tag == adult %}
        <h1>Show adult images here</h1>
    {% else %}
        <h1>No photo's yet</h1>
    {% endif %}
{% endfor %}

Alternatively, you can handle this logic in your views by serving different images to various templates. Here is an example of how to do that:

def teenageImages(request):
    teenageImage = Image.objects.raw("SELECT * FROM 
    photos WHERE tag = 'teenager' ")
    template = loader.get_template('teenager_photos.html')
    context = {
        'photos': teenageImage
    }
    return HttpResponse(template.render(context, request))

Another approach would be to utilize filters. More information on using filters can be found here.

For bootstrap cards, you can refer to this Github Repo showcasing bootstrap cards with images (no link provided): my webpage repo

Feel free to explore this repository for inspiration and ideas on implementing similar features.

Additionally, consider using Wagtail for a more streamlined approach. I have created a detailed Github repository related to Wagtail which can be accessed here.

Answer 3

Answer №2

If you're looking to enhance your home page functionality, consider implementing the RoutablePageMixin from Wagtail CMS (built on Django). For more information, check out the official documentation. This will allow your home page to accept categories as variables, similar to URLs like davidsonsblog.com/category/foobar

You can then create a queryset that is filtered by category and sorted randomly using the method .order_by('?'). If you only want to display one image, utilize the .first() method in the queryset.

The menu will automatically generate links based on these settings.

Answer 4

If you're looking to enhance your home page functionality, consider implementing the RoutablePageMixin from Wagtail CMS (built on Django). For more information, check out the official documentation. This will allow your home page to accept categories as variables, similar to URLs like davidsonsblog.com/category/foobar

You can then create a queryset that is filtered by category and sorted randomly using the method .order_by('?'). If you only want to display one image, utilize the .first() method in the queryset.

The menu will automatically generate links based on these settings.

Selecting specific categories to display on the homepage and limiting the number of images shown

Answer №1

Answer №2

Similar questions

Capturing URL parameters and their values in Django urlpatterns

Utilizing Cache Features in the XDK Application Framework API

What is the best way to connect or link to a HTML table row <tr>

Angular Update Component on Input ChangeEnsuring that the component is automatically

Creating a line with CSS is a straightforward process that involves using properties

Increasing the checkout date by one day: A step-by-step guide

Encountering issue when deploying multiple HTML files using Parcel

Navigate to a different page using a sliding transition

Eliminating unnecessary gaps caused by CSS float properties

Optimizing CSS across various pages and screens sizes with critical importance

Clicking on a button within the parent element will enable you to remove the parent element multiple times with the use of VanillaJS

Utilize a standard PHP script for every subdirectory within a domain

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

Adjusting the starting position of text within an HTML <li> element

Always take the lead with the first image in navigation

CSS navigation menu with drop-down functionality

What is the process for adjusting the switch size in react-bootstrap?

Struggling to locate the CSS needed to perfectly center my Wordpress lightboxes

The functionality of the button seems to be malfunctioning specifically in the Mac Firefox

The interaction between jQuery Masonry and Bootstrap results in unexpected grid behavior