Why images got 0 dimensions whem masonry is appled?

[mstdmstd]

Hello,
I have pages with custom html/css design and haging grids with images I try apply masonry
when on page opned several rows are shown and any next click on “More photos” more rows are uploaded with ajax request.

container.blade.php :

        <div class="main_gallery__head">
            <p class="main_gallery__title"> {{ $defaultCompilation->title ?? '' }}</p>
        </div>

        <div id="div_compilation_with_photos_container" class="compilations-grid-images-container">
        </div>

    </div>

    <div id="div_show_more_photos">
        <a onclick="javascript:loadPhotosOfCompilation(true)" class="nomination-new__btn-more"
           style="cursor: pointer">
            <svg class="nomination-new__arr-down">
                <use xlink:href="/img/sprite.svg#arr-down"></use>
            </svg>
            Ещё фото
        </a>
    </div>
</div>

and file with rows added on any click “More photos” :

@foreach($photosOfCompilation as $nextPhotosOfCompilation)
    @if(!empty($nextPhotosOfCompilation->media_image_url) and !empty($nextPhotosOfCompilation->photo->name) )

        <div class="main_gallery__block grid-compilation-image">
            <div class="main_gallery__content">

                <a href="{{ route('one_photo', [ $nextPhotosOfCompilation->photo->slug.'.'.$nextPhotosOfCompilation->photo_id, 'compilations.' . $nextPhotosOfCompilation->compilation_id ]) }}" class="main_gallery__link"></a>

                <img src="{{ $nextPhotosOfCompilation->media_image_url }}" alt="">

                @foreach($nextPhotosOfCompilation->photo->photoNominations as $nextPhotoNomination)
                    <div data-tooltip data-tooltip-theme="theme-dark"
                         title="{{$nextPhotoNomination->nomination->title}}"
                         class="sticker_mark main_gallery__sticker_mark color-1"
                         style="fill : {{ $nextPhotoNomination->nomination->color }} !important; color: white !important;"
                    >
                        <svg class="sticker_mark__bg">
                            <use xlink:href="/img/sprite.svg#sticker_mark"></use>
                        </svg>
                        <svg class="sticker_mark__lightning">
                            <use xlink:href="/img/sprite.svg#lightning"></use>
                        </svg>
                    </div>
                @endforeach


                <div class="main_gallery__info">
                    <div class="main_gallery__user">
                        <img src="{{ $nextPhotosOfCompilation->avatar_media_image_url }}" alt="">
                        <p class="main_gallery__user-name"><a
                                href="photographer_page.html">{{  $nextPhotosOfCompilation->photo->id  }}->{{ $nextPhotosOfCompilation->photo->owner['name'] ?? '' }}</a>
                        </p>
                    </div>

                    @if($nextPhotosOfCompilation->photo_likes_count > 0)
                        <div class="main_gallery__likes">
                            <svg class="icon icon-like">
                                <use xlink:href="/img/icons.svg#like"/>
                            </svg>
                            <span> {{ $nextPhotosOfCompilation->photo_likes_count }}</span>
                        </div>
                    @endif
                </div>

            </div>
        </div>

    @endif
@endforeach

and when I run page without masonry I have grid of images. Please look at page :

http://photographers.my-demo-apps.tk/compilation_with_photos/лучшие-фото-месяца.2

But if to add 1 more parameter for debug mode :
LINKABOVE/1

then Masonry is inited (is is reflected in browser’s console) but all images have 0 width/height
and are not visible : https://prnt.sc/26kqajm

Why so and how that can be fixed ?

Thanks!

[tracknut]

This is a bit of a wild guess, but I used one of the popular JS masonry tools a bit ago and needed to have html width= and height= attributes in the tag for the tool to pick up the size. Perhaps you have the same situation?

[mstdmstd]

Any links confirming your guess ?

[tracknut]

The masonry tool I used was https://masonry.desandro.com if that’s the link you’re interested in.

[PaulOB]

We had a similar post concerning masonry a couple of weeks ago and I gave similar answers about width and height attributes being added to the images (as they should be for all images otherwise the browser has to wait for them to load before it can allocate space properly).

CSS position change on page load

I still can’t access the page but from the html posted it looks like a js problem anyway as the styles are being written inline which suggests they are dynamically added. I’m guessing some sort of addon like Masonry is being used and that is renowned for content overflowing on each other unless special precautions are taken. Another reason for content overflowing is when the images width and height are not being added in the html width and height attributes. e.g. <img src="img.gif" alt="pic…

Masonry also requires the images loaded script to work properly.

Masonry · Layout