Why images got 0 dimensions whem masonry is appled?

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 id="div_compilation_with_photos_container" class="compilations-grid-images-container">


    <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>
            Ещё фото

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"
                         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 class="sticker_mark__lightning">
                            <use xlink:href="/img/sprite.svg#lightning"></use>

                <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>

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



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


But if to add 1 more parameter for debug mode :

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 ?


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?


Any links confirming your guess ?

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


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).

Masonry also requires the images loaded script to work properly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.