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

问题描述 投票:0回答:1

我一直在开发一个项目,后端使用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>

当我从lightbox中的图像打开新的URL时,>

我得到这个: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或类似的东西?

我一直在与Django在后端和amp在前端进行项目;尽管在链接两个标签(例如灯箱标签)时遇到一些麻烦。我想获取第一个列表...

python html django python-3.x amp-html
1个回答
0
投票

我以一种愚蠢的方式得到了结果。除了在视图或模板上设置对象外,还像在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 %}
© www.soinside.com 2019 - 2024. All rights reserved.