Outlayer

Brains and guts of a layout library.

Integrates Outlayer for layout libraries like Isotope, Masonry, Packery with Blazy and GridStack. Outlayer will make awesome GridStack, including native CSS Grid (8.x-1.3+), or custom defined grid layouts filterable, sortable, searchable.

Requirements

1. Gridstack 2.x
2. Isotope library:
   • Download Isotope
   • Extract it as is, rename it to isotope, so the assets are at:
     /libraries/isotope/dist/isotope.pkgd.min.js
3. Two fields found at Standard profile:
   field_image and
   field_tags.
   If they don't exist, simply create them at any Content type.

OPTIONAL INTEGRATION

1. Packery library:

• Download Packery
• Extract it as is, rename it to packery, so the assets are at:
  /libraries/packery/dist/packery.pkgd.min.js

2. Masonry library:

• Download Masonry
• Extract it as is, rename it to masonry, so the assets are at:
  /libraries/masonry/dist/masonry.pkgd.min.js

3. Other Isotope and Masonry related layout modes:

• https://github.com/metafizzy/isotope-masonry-horizontal
• https://github.com/metafizzy/isotope-horizontal
• https://github.com/metafizzy/isotope-fit-columns
• https://github.com/metafizzy/isotope-cells-by-column
• https://github.com/metafizzy/isotope-cells-by-row
• https://github.com/metafizzy/isotope-packery

Not all is needed. You may want one of the above which fits your need.
However to avoid broken displays, simply download them all. Only the required
one will be used on the page, anyway.

Use Composer to download them all at ease. If things are broken, be sure the
library is installed correctly.

USAGE / CONFIGURATION

1. As Views style plugin:
Visit admin/structure/outlayer to build an Outlayer optionset.
Visit admin/structure/views:

• Add a new page or block with Outlayer Isotope, Outlayer Filter, or Outlayer Sorter styles on the same view.
• Associate one to another via the provided options, so they can work together.
• Put the 3 blocks on the same page at /admin/structure/block

Use the provided sample to begin with.

RICH BOX

Replace Main stage/ image if a node has one. It can be any entity reference,
like Block, etc. Use block_field.module for ease of block additions.
How?
Create a sticky (or far future created) node or two containing a Slick carousel,
video, weather, time, donations, currency, ads, or anything as a block field,
and put it here. Be sure different from the Main stage. While regular boxes are
updated with new contents, these rich boxes may stay the same, and sticky
(Use Views with sort by sticky or desc by creation).

Read more about the usage instruction at GridStack module.

RECOMMENDED

1. Block field module to have rich boxes.

EXAMPLE

The Outlayer sample requires a "field_image" normally at Article content type
and automatically created when using Standard profile.

If no field_image, simply create a field named Image.

Adjust the provided views:

/admin/structure/views/view/outlayer_x/edit

KNOWN ISSUES

1. Grids may have weird aspect ratio with margins.
   Solutions:

   `Vertical margin` = 0
   `No horizontal margin` enabled
   Adjust `Cell height`

2. To have gapless grids, be sure to have the amount of contents similar to the amount of grid items minus stamp, if provided. The same rule applies to either GridStack or custom-defined grids. This is easily fixed via Views UI under Pager.

DIFFERENCE

There are few similar modules: Isotope, Masonry, Packery, Vews Isotope. What makes this worth a separate effort are:

• Outlayer considers Masonry, Isotope, Packery as parts of Outlayer library. Each is treated as an Outlayer plugin by the original library, so is by this module. They all share the same options and methods.
• It has integration with GridStack to have rock-solid layouts. It is a known issue, at least to me, that original library layouts are dynamic/ unpredictable. It sometimes changes on page reload. With GridStack, this never happens.
• Lazyload images via Blazy.
• We, these modules, all require Imagesloaded, but this module does not actually use it, at least so far, as it appears we can solve the original layout issue with some aspect ratio works. Unless proven otherwise.

TROUBLESHOOTING

• Checkout Outlayer or Gridstack.
• There is a breaking change at GridStack:8.x-2.3 related to Masonry/Packery, not Isotope. The only needed fix are here and there, the rest is ignorable till you have time to upgrade to Drupal 8.8. Ignore if using Outlayer 8.x-1.3+.