masonry layout block
The masonry layout block in the morethanthemes.com Drupal implementations integrates with the masonry.js library, and uses Views, with rewrite field output to generate the block content.
The approach is to use views rewrite, plus the existence of one or the other of the two types of images from which to build the layout.
Isotope and Masonry Library Background
The masonry and isotope javascript library were invented by and are developed by David DeSandro, and are available on github.
Selective Image Display Implementation
Upon first perusing the configuration of the masonry view, it is not at all obvious how the view is able to alternatively display either the square content image or the landscape content image. The manner in which this behavior is implemented is not at all obvious. It involves a combination of view features.
The first aspect of the view implementation that implements the selective display is the use of the views - rewrite results - feature. However, it is the views - no results behavior - settings that implement the selective image type display output. Two settings within the - no results behavior - settings implement this. First, there is a cascade of fall backs when there aren't any results to display. What happens is that if the content has a landscape image {{ field_mt_landscape_image }}, the view displays the landscape image, using its rewriting formatting. If the landscape image is empty, the no results behavior outputs the regular in page image, using {{ field_image }} as the no results content in the landscape image field's settings. This directive, overrides the fact that the {{ field_image }} field is set to hidden in its settings. The same cascade occurs in the settings for the {{ field_image }} field, which will then fall back to a video if one exists. The masonry layout will only display video thumbnail if the viewed content does not include any in page images and does not include a masonry landscape image.
The second aspect of the masonry view, the aspect that implements the selective output width is a unique usage of hidden fields and use of the field name as a variable in the settings. Note that the last field in the view's list of fields is a hidden copy of the landscape image field, whose twig output name in the view configuration is the {{ field_mt_landscape_image }} variable. This field entry doesn't ever provide any output directly. Instead, the contents of this hidden field, which uses rewrite results, are bootstrap CSS column width directives! When there is a landscape image the value of this field is col‑md‑8 col-sm-12, which will display the landscape image 2/3s of the width of the area in which it is displayed. If the landscape image is empty, the value of this hidden field is determined by the - no results - contents. The no results behavior contents for the extra landscape image field is - col-md-4 col-sm-6 - which will display the image as 1/3 the width of the output area in which it is displayed. The unusual way this is put to work is within the view's main html list style output settings, where the value of the hidden landscape image copy field is output as a variable into the CSS class settings, see the Row class settings form field, for each of the rows in the HTML list. So, the value of the field variable {{ field_mt_landscape_image_1 }} will be either col-md-8 col-sm-12 or col-md-4 col-sm-6, depending on whether a landscape image or the in-page image is being displayed for a given element of the view output. Significant perusal and resultant deduction was required in order to analyze and understand these views features from the configuration of this interesting view type within the morethanthemes distributions.
Masonry Javascript Support Initialization
In order to attach the masonry layout javascript library with this view, and to initial the javascript library when the view is displayed, some code and settings are required in the theme module. The [theme-name].theme file must include a preprocess hook function which provides the glue that provides directives that inject the needed code into the page when the page is loaded. In this instance the function name requires the view type and its view machine name. For example the preprocess function name would in the form:
function corporateplus_preprocess_views_view_list__articles_masonry()
where - articles_masonry - is the machine name of the view and - view_list__ - is the view type, an HTML list view.
The CSS styles need Customization
The height on the images in the masonry layout all need to be the same height. To implement this feature, the CSS directives on the images need to include the min-height style.
