使用 Django 在 amp 灯箱中设置画廊

Question

我一直在做一个项目，后端使用 Django，前端使用 amp；尽管我在 link 两个标签（例如 lightbox 标签）方面遇到了一些麻烦。

我想在我的产品页面上获得第一张图片的列表（我已经做到了），通过点击一张图片，它会在 lightbox 上向我显示该对象的其他图片，而无需去详细信息模板。

整个项目更新于 GitHub 于： https://github.com/lucasrf27/dealership

这就是我正在尝试的 amp 代码。除了放在我的类别中之外，我还在 test.amp.html 上尝试这个。（产品模板）

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

当我在新 URL 上打开 lightbox 中的图像时，

我明白了： http://127.0.0.1:8000/veicles/image3.jpg (404)

不过这张图片是这样的： http://127.0.0.1:8000/media/veiculos_imagens/bugat-logo-whatsapp-fundo-transparente3.png

是否有某种 media_prefix 或类似的东西？

Answer 1

我以一种愚蠢的方式得到了结果。除了在我的视图或我的模板上设置一个功能对象，就像我在 first_image 中所做的那样，但对于第二个和另一个 2 它变成了：

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 %}

型号：

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

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

如果以后有人不了解该项目，请尝试访问： https://github.com/lucasrf27/dealership

使用 Django 在 amp 灯箱中设置画廊

Setting a gallery in amp lightbox with Django

html

python

django

python-3.x

amp-html