How to use Anchor image in Masonry

Wappler General Need Help
1

I got Masonry component to work with an image but now I would like to have images open in a lightbox.

So i added an Anchor image instead and configured for lightbox (this part works)

However the Images are not listed in Masonry style, just large images one after the other.
Removing the Anchor, the image get processed as Masonry and display correctly.

I can only imagine that the component is trying to process the a tags and not the img tags to determine the dimensions.

Is there a better way to do this?
thanks

2

Please paste the masonry code so we can see what you are doing exactly?

3 
<div id="masonry1" is="dmx-masonry" dmx-bind:repeat="getpublicphotos.data.getphotos" preserve-order="true" columns="3" key="$index">
                                <a dmx-bind:href="'../thelastclan'+photos_file" dmx-lightbox:photos=""><img dmx-bind:src="'.'+photos_file"></a></div>
                        </div>

Result:
Large photos listed in order. Lightbox working.

Without the anchor, (just Img tag) i get correct masonry layout

thanks!

p.s also I am unable to ADD Anchor Image into Masonry, have to do it by code.

4

Well there is a reason why you can't do that using the UI and you see the result on your page.
If you want to do this you need to make sure the anchor elements are block elements (not inline) and also use the responsive image option for your images ...

<div id="masonry1" is="dmx-masonry" dmx-bind:repeat="getpublicphotos.data.getphotos" preserve-order="true" columns="3" key="$index">
    <a class="d-block" dmx-bind:href="'../thelastclan'+photos_file" dmx-lightbox:photos="">
        <img class="img-fluid" dmx-bind:src="'.'+photos_file">
    </a>
</div>

And actually the easiest way to achieve this without having to add classes in code is to use the standard row > col structure in bootstrap. I.e. add a row, add a col inside, add the anchor image inside the col. Then select row > make masonry and you are done.