[Resolved] Creating a responsive image grid

[Author]

Posts

[russellH-3]

Tell us what you are trying to do?
Create a responsive image grid within a page that has been made using Toolset layouts. I know Layouts is not the way to do page designs anymore, but the client already started it that way and I'm just trying to help out. I'm also trying to avoid using more plugins.

Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/create-image-galleries-using-toolset-and-custom-fields/#using-views-shortcode-to-display-images-as-a-gallery

Because my layout isn't using Blocks, I'm not sure how to do this using Views. I guess I need a bit more help.

Is there a similar example that we can see?
hidden link

or:

https://wordpress.org/plugins/responsive-gallery-grid/

What is the link to your site?
hidden link
Password: inky

Near the bottom is a grid of images just using Image cells in rows, but the alignment is sloppy because the image sizes vary. I'm wondering if there's a tidier solution. Otherwise I'll have to use another plugin.

[Waqar]

Hi Russel,

Thank you for contacting us and I'd be happy to assist.

You can use the CSS code from the example you've shared ( hidden link ), to make the images wrap evenly within their rows and columns.

Example:

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.row .col-sm-3 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.row .col-sm-3 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .row .col-sm-3 {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row .col-sm-3 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

Tip: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

I hope this helps.

regards,
Waqar

[russellH-3]

All right, thank you. I was hoping I wouldn't have to hard-code in the image URLs, but I realized I didn't mention that. I'll either use your solution or go for a gallery plugin. Thanks for your help!