Search code examples
pythonhtmldjangopython-3.xamp-html

Setting a gallery in amp lightbox with Django

I have been working on a project with Django on the back-end and amp on the front-end; although I am having some troubles to link both tags like the lightbox one.

I would like to get a list of first images on my product page (I have done it) and by clicking on an image it displays me the other images of that object on a lightbox without going to the detail template.

The whole project is updated on GitHub at: https://github.com/lucasrf27/dealership

That is the amp code that I am trying to. I am trying this one on test.amp.html besides put on my category. (product template)

<body>
    <h1>lucas</h1>
    <div>
        {% for v in veiculos %}
        <h1>{{v.modelo}}</h1>
        <amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="" height="" layout="fill" alt="{{v.modelo}}">
            <amp-carousel lightbox="cars" width="350" height="350" type="slides">
    <div>
        {% for v in veiculos %}
        <h1>{{v.modelo}}</h1>
        <amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="300" height="400" alt="{{v.modelo}}">
            <amp-carousel lightbox="cars" width="350" height="350" type="slides">
                {% for p in veiculos.images.all %}
                <amp-img lightbox="cars" src="{{p.imagem.url}}" width="" height="" layout="fill" alt="{{v.modelo}}"></amp-img>
                {% endfor %}
            </amp-carousel>
        </amp-img>
        {% endfor %}
    </div>
            </amp-carousel>
        </amp-img>
        {% endfor %}
    </div>
    <!-- These will belong to a different lightbox gallery -->
    <div>
        <amp-img lightbox="another" src="image3.jpg" width="400" height="300" layout="responsive"></amp-img>
        <amp-img lightbox="another" src="image4.jpg" width="400" height="300" layout="responsive"></amp-img>
    </div>

When I open the images from the lightbox on a new URL,

I get this one: http://127.0.0.1:8000/veicles/image3.jpg (404)

However the image is in this one: http://127.0.0.1:8000/media/veiculos_imagens/bugat-logo-whatsapp-fundo-transparente3.png

Is there some sort of media_prefix or something like that?

Solution

  • i've got the results in a silly way. besides setting on my views or my template a set up a object in function like i did in first_image but for the second and the other 2 it got like:

    template
<body>
    <h1>lucas</h1>
    {% for v in veiculos %}
    <amp-carousel lightbox width="1600" height="900" layout="responsive" type="slides">
        <amp-img src="{{v.first_image.imagem.url}}" width="200" height="100"></amp-img>
        <amp-img src="{{v.second_image.imagem.url}}" width="200" height="100"></amp-img>
    </amp-carousel>
    {% endfor %}

    models:

        def first_image(self):
        return self.images.first()  

    def second_image(self):
        return self.images.all()[1]

    if anyone in the future is not understanding the project try to access: https://github.com/lucasrf27/dealership