Dynamic images and dynamic attributes

Wappler General How To
#1

But how does it work with dynamic images? I’m using Dynamic Image Attr. SRC and get that in my lightbox which opens…

image
image.png1474×1111 5.13 KB

image
image.png1232×449 57.3 KB

Dynamic images?
#2

What does your dynamic binding return? Are you sure you the url is right?

#3

returns this here

image
image.png1270×170 20.7 KB

#4

But you need to bind the url of the image to open to the a tag as a dynamic href :slight_smile:

#5

hmm how you mean? Is it correct to use the dynamic attributes? or I need the classic SRC for that image??

#6

No Freddy, select the A tag you applied “open in lightbox” to. Click dynamic attributes - link - href and add the link to the image to be loaded there!

Just as explained here, but with dynamic link Using Lightbox

#7

Ahhhh okay I got it now. :ghost:

image

Moved now these params to Dynamic Attributes… but why the hell we still use in Wappler documentations these classic src / non dynamic attributes… theyre not so cool :smiley:

#8

Because in most of the cases it’s easier to show people static pages with static values :slight_smile:

#9

@Teodor Can this be used with externaly hosted images ?

I have the following code:

 <body is="dmx-app" id="index">
<dmx-lightbox id="lightbox1" buttons="show" noscrollbars="true"></dmx-lightbox>
<dmx-serverconnect id="content" url="api/getContent"></dmx-serverconnect>
<section>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>{{content.data.home[0].data.titre[0].text}}</h1>
                <h1>{{content.data.home[0].data.sous_titre[0].text}}</h1>
            </div>
        </div>
        <div class="row" is="dmx-repeat" id="pictures" dmx-bind:repeat="content.data.peintures">
            <div class="col">
                <a dmx-bind:href="data.peinture.url" dmx-lightbox:pictures=""><img dmx-bind:src="data.peinture.url"></a>

                <h1>{{data.titre[0].text}}</h1>
            </div>
        </div>
    </div>
</section>

That creates the following code on the live server:

> <div class="row" is="dmx-repeat" id="pictures">
>                 <div class="col">
>                     <a href="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706" rel="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706"><img src="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706"></a>
> 
>                     <h1>Mouton Rouge dans Forêt</h1>
>                 </div>
>             
>                 <div class="col">
>                     <a href="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706" rel="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706"><img src="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706"></a>
> 
>                     <h1>Lampadaires dans la nuit</h1>
>                 </div>
>             </div>

But the Lightbox shows: “Url not supported”

Do you have any idea ?

Thanks