Masonry grid style size images

Can someone give me some Custom CSS to make the image standardised on the post page with masonry grid style?
At the moment they have all different sizes and it looks really messy.

my page is: http://www.freebirdnumberone.com

Hi,

If you want the post image displayed in same size, your image will not displayed in a good resolution. If its okay with you, you can use these css code below:

.entry-thumb img {
    height: 300px;
}

Alright, so there is no way to just determine the thumbnail size on the masonry grid without affecting the actual image size shown on the single post page?

Hey Awan,

ok so this CSS code also affected the thumbnail size of the “Latest News” section on the Homepage, so I undid it but then I thought, maybe we can apply the same “thing” that they apply, because these thumbnails show all the same size but still once you click on it you get the “normal sized” picture.

What do you think about that?

Hmm I see, please try this css code then:

.posts-layout.masonry .entry-thumb img {
    height: 300px;
}

Let me know how it goes

Hey Awan,

thank you,
it does look a lot better, the Latest news section isn´t affected anymore plus the single post page stays the same! So really much better.

Unfortunately it looks still messy though but I think not because of the different immage sizes (since they are all the same now).
Here can you see what I´m talking about:
http://freebirdnumberone.com/blog/page/2/

The first row looks perfect but then it´s getting messsy. Do you know how this can be fixed?

(The excerpt lenght is set to 20 words)

Hi,

Seems like the masonry layout has similar issue with this https://athemes.com/forums/topic/the-rank-beyond-three-posts/ and I don’t have any idea to fix it because those box post are positioned automatically by javascript.

Hey Awan,

alright, I might not be right at all but I think this is because the verification for the object hight is done before reading my CSS correction (the one you send me).

I thought about doing something in the function.php and the index.php but than I read the following in the function.php:

  • Note that this function is hooked into the after_setup_theme hook, which
  • runs before the init hook. The init hook is too late for some features, such
  • as indicating support for post thumbnails.

So there is no point of adding featured image support, right?..

Its different. the thumbnail on masonry layout is adjusted by the javascript after the thumbnail is generated by the queries. :slight_smile:

Ok, so I put the same size to all the pictures and uploaded them again and it looks a lot better.
But I wonder why the last row always shows only one picture instead of three?
http://freebirdnumberone.com/blog/

I Just visiting your site and looks like now is displayed as you expected?

But I wonder why the last row always shows only one picture instead of three?
> But I notice that the last row is displaying one content with picture and the excerpt. Did you already fix this?

Sorry I was talking about the fourth row.
The forth row only shows one picture instead of three (on all pages, so also on the different category pages)
Example:

http://freebirdnumberone.com/category/thoughts/

Oh I see…
as default every page only displayed 10 posts per page, and there should be an “older post” link at the bottom of the page.

You can find the settings at Settings --> Reading --> change Blog pages show at most to how many post (change the value you want here)

Oh thanks so much, that is awesome; now I can make like “infinite scroll”.
Really cool, I didn´t know that this was possible, but it´s working perfectly! :slight_smile:

Great! it doesn’t produce another issue, right? :smiley:

Feel free to ask here if you need more help.

Regards,
Awan

Hi there :slight_smile:

I hope it´s okay to post under this old post since this issue is related to the one I had a year ago.
I haven´t had any problems with masonry grid style for almost a year --> I always uploaded the pictures with the same size but now all of a sudden

the second picture in the second row moved downwards a little bit.
See here: http://freebirdnumberone.com/blog/

Any idea why or how that can be fixed?

Thank you in advance,
best wishes, Julia

Hi Julia,

Glad to see you back here :slight_smile:
Looks like the current issue is caused by the excerpt word. Your except word are set to display 20 words, but this post “Denkst du erfolgreich?” have long word which caused the issue, “(Wirtschafts-) psychologiestudium”

To fix the issue, please add this CSS code to your site:

.masonry-layout .entry-post {
    min-height: 115px;
}

Regards,
Awan

Oh wow! You´re amazing. Thank you so much Awan, you just made it look great again!

Hope you´re having a good day. Best regards,
Julia