Setting only categories to be view on homepage/set amount of images-CodePudding

<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/[email protected]/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 >CHARLIES LIFE</h1>


<body >
    <div >


        <div >
            <div >

                <div >
                    <div >
                        Categories
                    </div>
                    <ul >
                        <li >
                            <a href="{% url 'gallery' %}">All</a>
                        </li>
                        {% for category in categories %}
                        <li >
                            <a href="{% url 'gallery' %}?category={{category.name}}">{{category.name}}
                            </a>
                        </li>
                        {% endfor %}
                        <a href="{% url 'add' %}"  type="button"">Add Photo</a>
                    </ul>
                </div>
            </div>


            <div >
                            <div >

                                {% for photo in photos %}
                                <div >
                                    <div >
                                        <img  src="{{photo.image.url}}" 
                                            alt="...">
                                        <div >
                                            <p >{{photo.category.name}}</p>
                                        </div>
                                        <div >
                                            <a href="{% url 'photo' photo.id %}" 
                                                type="button">View</a>
                                        </div>
                                    </div>
                                </div>
                                {% empty %}
                                <h3> No Photos...</h3>
                                {% endfor %}


</body>

</html>

Hi, I'm currently trying to make a photo blog to record the life of my son with photos as he grows. The above is my code for the "home" page (name as gallery).

So at the moment I have a for loop which adds a "card" class to my gallery page every time I upload an image.

Ideally I'd like to make it so it only showed each category I create with only one picture from that category rather than showing every picture I upload to the website. I just didn't think a head on how many photos I would upload and the home page will just turn into a HUGE photo dump.

If any one has any ideas how I could accomplish this or any other recommendations it would be greatly appreciated.

TYIA

CodePudding user response：

Correct me if i'm wrong, but what i think you're trying to accomplish is to have different section i.e. 'young', 'teenager', 'adult' or something like that, and only show images in those sections with the section name as a tag in the image itself? If that is the case, you can do something like this:

{% 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 do this in your views and serve different images to different templates if you wish to do so.

It would look something like this:

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))

You can also go a different route and use filter, more information on filter can be found here.

EDIT for bootstrap cards

Here is an example Github Repo on bootstrap cards with image (without a link) my webpage repo

You can clone this repo and look around in it, that way maybe you can get some inspiration / ideas on how to do certain things.

Alternatively, you can use something like Wagtail for this, I have also made a Github repo regarding that, which can be found here

CodePudding user response：

I suggest that you look at the RoutablePageMixin, see documentation here. With it you could make your home page accept the category as a variable like the following URL is representing: davidsonsblog.com/category/foobar

Than you could define a queryset filtered by category and ordered randomly (e.g. by the queryset method .order_by('?')). If you only want to show one image of it, add the .first() method to the queryset.

The menu would generate the links accordingly.