Building Optimized Grid

Let's create maximally unique and optimized grid. Getting started with brief excursion of optimization.

Optimization

All aligning algorithms such as Justify, Masonry and others, building grid based on images sizes. Let's take Justify algorithm for an example. It's filling container(where gallery placed, in our case simple web page) by image rows:
1 row, 2 row and etc...

  1. Count how many images must be in row.
  2. Recalculating theres width and height.
  3. Place them into container.
  4. Resizing with CSS using new sizes recalculated in 2 step.

Repeating steps above until all rows will be justified and building grid ends.

As a result we have grid with overscreened images. That increases page load. Situation make worse on devices. Our Plugin helps to solve it.

Building Grid

Let's fix it using our plugin and powerful Device Previewer. Our steps:

1. Measurement. We need to measure the width where our gallery will be placed. We need Chrome browser.

  1. Open our page(where gallery will be placed) in WordPress admin editor and write some text like: "Demo description". Save and open it.
    Illustration of Demo text
    Illustration of Demo text
  2. Place mouse to text wrote before("Demo Description"). Click right button on it will popup context menu, select "Inspect the Element". Will open Chrome DevTools with selected element.
    Illustration of Container width measurement
    Illustration of Container width measurement
  3. Remember container width in our case it's 660 pixels.

2. Device Preview. Open gallery that we want to publish. Go to layout tab. In device selector choose "Custom" and set width that measured above is 660 pixels, but we see that indicator hightlight phone landscape device. Press fixed content button. Voila now its associated with desktop thumbnails.

Illustration of Device Preview custom settings
Illustration of Device Preview custom settings

Pro Tip

In custom device you can click to devices in indicator to associate thumbnails with devices you need with fixed content on, e. g. You need optimize gallery for ipad but your content container(where gallery placed) is 510 pixels width (not 768 default ipad resolution), you need to choose custom device then set width to 510 pixels, enable fixed content mode then click tablet icon in indicator and thumbnails will be shown for tablet.

3. Optimization. Okay. We almost done. If you choose pagination layout You just need press adjust button(magic wand icon, located near device indicator) or if it's load more you need to set in initial load field images amount or just 1000 to load all images for optimization then press adjust button(magic wand icon, located near device indicator).

Illustration of Grid Optimization
Illustration of Grid Optimization

After optimization ends set any initial load. All images info must be dark color(it means all images exactly same size as container where it placed).

Illustration of Optimization Result
Illustration of Optimization Result

Note

Some images might have blue info, sometimes it happens due to aligning algorithm then press adjust button again and all be perfect.
One more Tip: You can delete all unused thumbnails(which are not used for any device) button locates in sizes aside.

Result

Our gallery optimizied for desktops. You can optimize absolutely for all devices. Use Chrome DevTools Device Mode and repeat steps described above. You ll get maximally optimized gallery for all devices and maximal gallery load speed.

Illustration of Optimization Container and image have same sizes
Illustration of Optimization Container and image have same sizes