Plugins – OpenCities

Our templates use a variety of out-of-the-box and third-party plugins, so your site visitors can have the best possible experience across all devices. We use the following plugins:

JQuery
Modernizr
Metaquery
Google Analytics wrapper
Masonry

jQuery

jQuery is a feature-rich, but fast and extensive JavaScript library, which makes it easier to use JavaScript on your site. You can find more information from the jQuery website.

The CMS uses JQuery 3.6.0 or 3.7.1. If you choose a new plugin to use or write your own JavaScript, please make sure it supports this version of JQuery. If you do write custom code please keep an eye out for any updates on JQuery used in this platform.

Modernizr

Modernizr detects the HTML, CSS, and JavaScript features of a user's browser, so you can tailor the user's experience based on their browser's capabilities.

When a page on your site loads, Modernizr will add specific CSS classes to the <html> tag. You can use these in your CSS or JavaScript to perform specific actions based on the features available on that device and browser.

For example, devices that have touch capabilities will have the CSS class "touch" on the <html> tag, while on other devices there will be the "no-touch" class.

Metaquery

Metaquery allows you to perform additional JavaScript when the user has moved from one breakpoint to another.

This adds the following CSS classes to the <html> that represents the current breakpoint:

breakpoint-sc-size-1: Larger than 992px (desktop and tablets in landscape mode)
breakpoint-sc-size-2: Smaller than 992px and larger than 768px (tablets in portrait mode)
breakpoint-sc-size-3: Smaller than 768px and larger than 480px (mobiles in landscape mode and smaller tablets)
breakpoint-sc-size-4: Smaller than 480px (mobiles)

If you want to perform additional actions when the user switches between breakpoints, use the following code:

// size : sc-size-1, sc-size-2, sc-size-3 or sc-size-4
// isComingIn : boolean
// lastIn : Breakpoint the user is leaving
OpenCities.Plugins.BreakpointChange.onBreakpointChange(function (size, isComingIn, lastIn) {
	if (isComingIn) {
		if (size == 'sc-size-1') {			
			// User is entering size 1
		}
	}
	else {
		if (size == 'sc-size-1') {
			//User is leaving size 1 
		}
	}
});

Google Analytics Wrapper

The Google Analytics wrapper allows you to submit custom events so Analytics can report on specific metrics. Events are user interactions with content that are not page views, for example, downloads, form submissions, and video plays. To use this wrapper, you will first need to connect your website with Google Analytics. 

Use the code below to submit custom events to GA using the CMS wrapper. The wrapper will make sure GA is configured for your site before trying to submit the new event. You can pass any of the optional parameters allowed in GA event tracking, and even use custom events.

OpenCities.Analytics.Send('event', [Optional parameter]);

Masonry

Masonry is a JavaScript grid layout library, which places elements in the optimal position based on the available vertical space. In the CMS platform, certain libraries are loaded on demand, which improves the performance of your sites.

To use the Masonry plugin, use the following JavaScript code:

var masonryPath = OpenCities.Paths.SiteTemplate + 'masonry.imagesloaded.min.js'
var callbacks = (function () {
	return {
		masonry: function () {
			// Execute code when masonry library is loaded
			$(‘selector’).masonry();
		}
	};
});
OpenCities.Dependencies.GetScript(masonryPath , callbacks.masonry);