-1

I need help with a CSS code. I run a photography website on wordpress and i have some problems displaying my pictures. There are 2 formats of pictures that are being displayed: landscape (1200 x 800 px) and portrait (595 x 853px). I want to group the tall ones 2 per row because they look so much better. I have about 40-50 images per post.

Is there any way to do this?

I've attached a demo of how i would like to result to be.

Thank you! demo layout

Thomas Smyth - Treliant
  • 4,993
  • 6
  • 25
  • 36
Sergiu
  • 1

2 Answers2

0

You can use a jQuery plugin such as Masonry or Isotope to do this - these are designed to arrange your items in a grid so that they fit nicely.

You will still need to get some HTML and CSS in place before adding the plugin to adjust the positions of the images, so you'll need to work off the plugin documentation or examples (or provide a code snippet).

Haroon R.
  • 302
  • 1
  • 8
0

It depends on how dynamic your posts are. If there's a way for you to know the structure of your HTML + CSS + content before-hand, then you can create a .tall-row class for the tall images and a .long-row class for the long images. And it's basically planning out the layout ahead of time. You can easily do this using traditional CSS, CSS FlexBox (newer), or CSS Grid (newest).

If the order of the images is going to be some-what dynamic (so you don't know when a tall image will render or when a long image will render) you can try CSS Grid'd grid-auto-flow: dense; property, which attempts to calculate the best overall fit for all of it's children. Only if this doesn't work would I suggest using a JS or jQuery plugin.

Here's an example of CSS Grid's grid-auto-flow: dense; https://jsfiddle.net/40p0q5xx/

TJBlackman
  • 1,895
  • 3
  • 20
  • 46