Bakitai Bakitai - 1 month ago 11
Javascript Question

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

In this image:
http://www.autofinesse.co.uk/share-n-shine/
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

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.

enter image description here

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>

Comments