How can one create a gallery that adapts to the different sizes of images?

Question

In this image: at this link:

http://www.autofinesse.co.uk/share-n-shine/

There are images of different sizes, the css seems to be generated automatically, i'd like a client to be able to upload to wordpress and not have to worry about the standard sizes of images too much. This gallery is fully aligned for every image, changes height between rows and doesn't make them all the same size.

Is there a library that will allow me to do this? The only way i've been able to do it is with the use of background positioning, which crops the image and also prevents the images being different sizes.

Or is there some sort of javascript algorithm to work this out?

Answer 1

HTML

<div>
    <img src="http://imgur.com/kj4qwHl.jpg">
    <img src="http://imgur.com/q6pFhhE.jpg">
    <img src="http://imgur.com/ngdnoYI.jpg">
    <img src="http://imgur.com/FkrSS5O.jpg">
    <img src="http://imgur.com/ux0Om6X.jpg">
    <img src="http://imgur.com/2ProEc9.jpg">
    <img src="http://imgur.com/iu39yRs.jpg">
    <img src="http://imgur.com/gx0iOdT.jpg">
    <img src="http://imgur.com/6kEuRYX.jpg">
</div>

CSS (SASS)

@mixin rspv($w) {
  @media screen and (max-width:$w) {
    @if $w==680px {
      img:nth-child(n1) {
        width:100%;
      }
    } @else {
      @content;
    }
  }
}
@mixin grid($pc...) {
  $len:length($pc);
  img {
    vertical-align:top;
    transition:all 0.5s;
    @for $i from 1 through $len {
      &:nth-child(#{$i}) {
        width: nth($pc,$i)+'%';
      } 
    }  
  }
}
div {
  margin:0 auto;
  padding:0 100px;
  +grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5);
  @include rspv(860px) {
    +grid(39,61,45,55,46,54,42.9,57.1,100);
  }
  +rspv(680px);
}

EXPLANATION

In the rspv mixin (responsive) it checks if width meets the 680px then (even) and (odd) images will have full size. If not, mixin grid will come into play.

Besides normal property:value pairs, grid takes width from a given parameter $pc (percent) and uses it in the for loop. It will iterate through $i depending on the length of $pc and returns every value from the $pc map.

Since all images are inside of the div, all mixins will be included there. First grid doesn't need a responsive requirement, the second one does, and the last +rspv(680px) doesn't need width calculation.

This should work what your link about cars is showing. Not much code. I recommend, get precompiler for CSS. Without that it would be much more code and a lot harder to make up a plan.

DEMO HERE

Answer 2

I could give you a css solution but you said for a client on WP.

For that I suggest using a plugin like Unite Gallery which I use for my WP and Joomla clients.

Here is a screen. It also allows for text overlays like the image you posted.

https://wordpress.org/plugins/unite-gallery-lite/

Here is a CSS sample using flex

.flex {
  background: #ddd;
  padding: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-4by3, .flex-3by4, .flex-1by1, .flex-2by1, .flex-1by2, .flex-3by1, .flex-1by3 {
  margin: 1px;
  background-color: #efefef;
  background-size: cover;
  position: relative;
}
.flex-4by3:before, .flex-3by4:before, .flex-1by1:before, .flex-2by1:before, .flex-1by2:before, .flex-3by1:before, .flex-1by3:before {
  content: "";
  display: block;
}

.flex-4by3 {
  flex-grow: 1.33333;
  flex-basis: 266.66667px;
  max-height: 320px;
  max-width: 426.66667px;
  background-image: url("http://lorempixel.com/267/200/food");
}
.flex-4by3:before {
  padding-top: 75%;
}

.flex-3by4 {
  flex-grow: 0.75;
  flex-basis: 150px;
  max-height: 320px;
  max-width: 240px;
  background-image: url("http://lorempixel.com/150/200/food");
}
.flex-3by4:before {
  padding-top: 133.33333%;
}

.flex-1by1 {
  flex-grow: 1;
  flex-basis: 200px;
  max-height: 320px;
  max-width: 320px;
  background-image: url("http://lorempixel.com/200/200/food");
}
.flex-1by1:before {
  padding-top: 100%;
}

.flex-2by1 {
  flex-grow: 2;
  flex-basis: 400px;
  max-height: 320px;
  max-width: 640px;
  background-image: url("http://lorempixel.com/400/200/food");
}
.flex-2by1:before {
  padding-top: 50%;
}

.flex-1by2 {
  flex-grow: 0.5;
  flex-basis: 100px;
  max-height: 320px;
  max-width: 160px;
  background-image: url("http://lorempixel.com/100/200/food");
}
.flex-1by2:before {
  padding-top: 200%;
}

.flex-3by1 {
  flex-grow: 3;
  flex-basis: 600px;
  max-height: 320px;
  max-width: 960px;
  background-image: url("http://lorempixel.com/600/200/food");
}
.flex-3by1:before {
  padding-top: 33.33333%;
}

.flex-1by3 {
  flex-grow: 0.33333;
  flex-basis: 66.66667px;
  max-height: 320px;
  max-width: 106.66667px;
  background-image: url("http://lorempixel.com/67/200/food");
}
.flex-1by3:before {
  padding-top: 300%;
}

<div class="flex">
  <div class="flex-4by3"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-1by2"></div>
  <div class="flex-2by1"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-1by2"></div>
  <div class="flex-3by1"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-1by3"></div>
  <div class="flex-4by3"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-4by3"></div>
  <div class="flex-2by1"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
</div>