DP Masonry Photo Galleries

• Go to the appropiate page on the school’s website.
• Enable the Visual Builder.
• Click on the + to add a module.
  
• Select the ‘DP Masonry Gallery’ module.
  
• When the ‘DP Masonry Gallery’ module opens, under the ‘Content’ tab, the first item under ‘Configuration’ is ‘Images’. Clicking on the plus button in the middle will navigate to the media library where the images should have been uploaded, or they can be uploaded while accesssing the media library.
• Below the ‘Images’ section, is the option to select the ‘Number of Columns’. The module can include between 1 and 10 columns.
  

The aspect ratio of an image is the proportional relationship of the image’s width and height. When images with the same aspect ratio are added to the DP Masonry Gallery module, the images will display the same size regardless of the actual pixels. As such, images with too few pixels should not be included if they will be stretched when added to the gallery.

For galleries that all the images need to have the same aspect ratio, an online Aspect Ratio Calculator can be used, such as calculateapsectratio.com, or the steps below can be used.

Steps to Convert all Images to the Same Aspect Ratio

Step 1: Calculate the aspect ratio of an image

• Use the following equation to determine the aspect ratio of the image that will serve as the pattern ratio for the other images to be converted to.
• Width / Height = Aspect ratio
• For example: if the width of the image is 1000px and the height of the image is 200px then the equation would be 1000/200 = 5   The aspect ratio is ‘5’.

Step 2a: Calculate the cropping height of an image

• Using the aspect ratio from step 1 and the known width of the image to be cropped vertically, use those numbers to calculate what the height of the image should be cropped to.
• Width / Aspect ratio =  Cropping Height
• For example: if the next picture is 730px wide and 730px high and it is to be cropped vertically to a ratio of 5 (as per the example in step 1), then the equation would be 730/5 = 146. The height of the image would be cropped to a height of 146px.

Step 2b: Calculate the cropping width of an image

• Using the aspect ratio from step 1 and the known height of the image to be cropped horizontally, use those numbers to calculate what the width of the image should be cropped to
• Aspect ratio x Height = Cropping Width
• For example: if the next picture is 3000px wide and 400px height and it is to cropped horizontally to a ratio of 5 (as per the example in step 1), then the equation would be 5 x 400 = 2000. The width of the image would be cropped to a width of 2000px.

This is by far the easiest way to input images as it does not require any math or conversion. The desired images are simply added into DP Masonry Gallery. The DP Masonry Gallery will calculate the placement of some of the pictures based on the available space and sizes of the images being added. The order of the images may be different than what they are added in, however, the input order does play a role in the overall layout. The images in the gallery module can be rearanged with drag-n-drop.

Technically, the galleries cannot be combined. They simply are separate galleries that have been added one after another. The galleries may need to be moved up a bit to decrease the gap between them.

By default, the galleries are set to align at the top. The alignments of the images are controlled with JavaScript. To override the top alignment, the module needs to be given a class and a few lines of simple css to force the images to align at the bottom. Only one row can be adjusted to align at the bottom of the gallery in this manner. Attempting to have multiple rows in the same module will result in the images being stacked in front of each other, because they will all sit at the bottom of the gallery.

• With the ‘DP Masonry Gallery’ module open, select the ‘Advanced’ tab at the top.
• Under the ‘CSS ID & Classes’ heading, there is a box for CSS ID and CSS Class. In the box for CSS Class, add the class name of gallery-bottom-aligned
  
  
• After the class has been added, go down to the heading for ‘Custom CSS’. In the gray box labled ‘CSS” add the following CSS:
  .gallery-bottom-aligned .dip1_masonry_gallery_item {
       top: auto !important;
       bottom: 0;
  }
  
• Note: while the Visual Builder is open, the images that are being forced to work against the JavaScript setting will go up and down, but once the Visual Builder is closed, they will stay at the bottom.