Tutorials

Table of contents
Close

How to Add masonry.js to Flexible Columns

This tutorial requires understanding of jQuery and how to implement a third-party Javascript reference.  If you'd like to check out their respective documentation, head to masonry.js & jQuery .


masonry.js is a cascading grid library that organizes items based on their respective columns widths. Sites use this design to organize images and content as bricks in columns. Take a look at some examples of how masonry.js has been used.

2014-03-19_11_09_15-Tumblr_Staff__Archive

Once installed you must address styling issues so the columns widths match your site. 

The documentation provided by masonry.js are sufficient for implementing a wide variety of styles. Please refer to them when modifying your style sheet.

masonry.js Options

masonry.js Methods

Step 1 - Add masonry.pkgd.min.js to your File Manager 

Download http://masonry.desandro.com/masonry.pkgd.min.js

Upload to File Manager

2014-03-19_11_16_29-File_Manager___HubSpot

 

Step 2 - Reference and initiate script on page (or in Content Settings for global usage)

Your reference and initiating script will look something like this.

image2014-3-18_14-44-2

 To note: 

  • The jQuery selector $('#container') chooses the element with id="container" as the container element. See step #3 for where to put this id.
  • The itemSelector option targets the elements you'll be using as bricks within columns. Since we're targeting all HubSpot modules, we'll want to use '.hs_cos_wrapper_widget'. (All modules have this class. See picture.)

Untitled_drawing_(1)_(1)

Step 3 - Wrap Flex Column with your id

You will need to target the wrapper of the Flex Column as shown here.

flex-column

Step 4 - Add modules to the Flex Column on your Page

flex-column1

You can add as many modules to the Flex Column as you'd like.

Just note a few things.

  • Larger images will increase page load time. Either reduce image size or limit the amount of images in your column.
  • Style different module types - Rich Text, Images, and CTAs - by targeting their module-type class. For example, image modules have a unique class - "hs_cos_wrapper_type_linked_image." Target these to modify column item modules.
This tutorial requires understanding of jQuery and how to implement a third-party Javascript reference.  If you'd like to check out their respective documentation, head to masonry.js & jQuery .


How to Add masonry.js to Flexible Columns

masonry.js is a cascading grid library that organizes items based on their respective columns widths. Sites use this design to organize images and content as bricks in columns. Take a look at some examples of how masonry.js has been used.

2014-03-19_11_09_15-Tumblr_Staff__Archive

Once installed you must address styling issues so the columns widths match your site. 

The documentation provided by masonry.js are sufficient for implementing a wide variety of styles. Please refer to them when modifying your style sheet.

masonry.js Options

masonry.js Methods

Step 1 - Add masonry.pkgd.min.js to your File Manager 

Download http://masonry.desandro.com/masonry.pkgd.min.js

Upload to File Manager

2014-03-19_11_16_29-File_Manager___HubSpot

 

Step 2 - Reference and initiate script on page (or in Content Settings for global usage)

Your reference and initiating script will look something like this.

image2014-3-18_14-44-2

 To note: 

  • The jQuery selector $('#container') chooses the element with id="container" as the container element. See step #3 for where to put this id.
  • The itemSelector option targets the elements you'll be using as bricks within columns. Since we're targeting all HubSpot modules, we'll want to use '.hs_cos_wrapper_widget'. (All modules have this class. See picture.)

Untitled_drawing_(1)_(1)

Step 3 - Wrap Flex Column with your id

You will need to target the wrapper of the Flex Column as shown here.

flex-column

Step 4 - Add modules to the Flex Column on your Page

flex-column1

You can add as many modules to the Flex Column as you'd like.

Just note a few things.

  • Larger images will increase page load time. Either reduce image size or limit the amount of images in your column.
  • Style different module types - Rich Text, Images, and CTAs - by targeting their module-type class. For example, image modules have a unique class - "hs_cos_wrapper_type_linked_image." Target these to modify column item modules.