2

I am facing a problem while coding my own Wordpress theme. I have featured images of each blog posts displaying on my home page. I would like to make it look like a gallery. So I want the images to display under each other and next to each other, though they are different sizes. See the picture to see how far I've come:

picture

So what I want to accomplish is, to display the blossom image under the New York one, and next to the 'c'est la vie' one. Is there any way to that?

I would really appreciate your help! My HTML code: 

<div class="post">

   <div class="outer-wrapper">
      <div class="imagefilter">
         <a href='<?php the_permalink(); ?>'><?php 
 the_post_thumbnail('mythumbnail');?></a>
       </div>

          <div class="text-wrapper">
          <span class="blogpost"><h2 class="post-title"><a href="<?php 
          the_permalink(); ?>"><?php the_title(); ?></a></h2></span>
       </div>   
    </div>

  </div>

My CSS looks like this: 

.outer-wrapper {
  position: relative;
  width: 470px;
  height: 100%;
  margin: 0px;
   padding: 0px;
  float: left;}


 .text-wrapper {
  position: absolute;
  width: 470px;
  text-align: center;
  font-size: 12px;
   display: table;
  top: 50%;
  height: 100%;
   line-height: 0px;
  opacity: 0;}
Sacha G.
  • 21
  • 2

2 Answers2

0

You are looking for a masonry gallery style? If so, this is more CSS related and here is an nice example.

The main idea is using display: inline-block instead of float. For example-

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}
Netanel Perez
  • 93
  • 6
  • Yes that's exactly the word I was looking for :) But for some reason the images are all underneath each other when I use inline-block – Sacha G. Apr 19 '17 at 14:04
  • If the images are inside a container (a div maybe) then you need to add the display: inline-block to the wrapping div. If they are still one under another then there is probably a div with 100% width or without any CSS at all – Netanel Perez Apr 19 '17 at 14:18
0

This is super simple to achieve using CSS columns. The GitHub project darlanmendonca/masonry-css does this with these few lines of Sass:

.masonry {
  $spacing: 2px;
  column-gap: $spacing;
  padding: $spacing;
  columns: 2;
  transform: translateZ(0);
  box-sizing: border-box;

  @media (min-width: 511px) {columns: 3;}
  @media (min-width: 769px) {columns: 4;}
  @media (min-width: 1440px) {columns: 6;}

  .masonry-item {
    width: 100%;
    display: block;
    border-bottom: $spacing solid transparent;
  }
}

The result is something like the image below (taken from darlanmendonca/masonry-css).

enter image description here

Here's his live demo. (The reflows you see on screen resize are due to the responsive breakpoints changing the number of columns.)

For the lazy, here's the pure-CSS compiled-and-beautified version of his Sass:

.masonry {
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    column-gap: 2px;
    padding: 2px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box
}
@media (min-width: 511px) {
    .masonry {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3
    }
}
@media (min-width: 769px) {
    .masonry {
        -webkit-columns: 4;
        -moz-columns: 4;
        columns: 4
    }
}
@media (min-width: 1440px) {
    .masonry {
        -webkit-columns: 6;
        -moz-columns: 6;
        columns: 6
    }
}
.masonry .masonry-item {
    width: 100%;
    display: block;
    border-bottom: 2px solid transparent
}

If you don't need it to be responsive, you can safely kill the media query bits and set your number of columns directly on .masonry.

Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80