用Djang在amp lightbox中设置画廊

2024-05-16 18:28:28 发布

您现在位置：Python中文网/ 问答频道 /正文
719 3

我一直在做一个项目，后端是Django，前端是amp；尽管我在链接两个标签（如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之类的吗？你知道吗


Tags： 图像divsrcimgforwidthh1cars
1条回答
网友
1楼 · 发布于 2024-05-16 18:28:28

我得到了一个愚蠢的结果。除了在我的视图或模板上设置外，在函数中设置一个对象，就像我在第一个图像中所做的那样，但是在第二个和其他两个图像中 它就像：

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

相关问题 更多 >

    编程相关推荐