Introduction to Passle jQuery plugin and layout examples

The Passle jQuery plugin allows simple embedding of Passle posts on your website. Add a simple code snippet, and the plugin will handle the rest.

The plugin is designed to give you a great deal of flexibility in how you integrate Passle content with your site. There are a number of options and preset styles to choose from, and if necessary allows you to customise the look and feel of the content from scratch so it fits in perfectly with your site – all without using an iframe or restricting your design choices. You can view full documentation here.

The plugin uses AJAX to dynamically fetch styles, scripts, and content directly from the Passle CDN and/or website. It provides methods for fetching, refreshing, and removing content as required, and allows both chaining and callbacks.

Below, you can preview a few examples of the plugin integration using various layout options.

Default (“full”) layout

The “full” layout option is designed for the full page width, and appears as a series of tiles. The number of tiles in a row will depend on the width of your container.

“Compact” layout

The “compact” layout option is designed to be used at smaller widths, and appears as a list of articles, automatically shrinking down to a super compact view at less than 300px designed for page sidebars.

“Minifeed” layout

The “minifeed” layout option is also designed for use at smaller widths, but displays thumbnail images rather than a text snippet.

“None” layout – how to strip Passle styling

The “none” layout option inserts minimal HTML content without any CSS styling, allowing you to create your own custom design of a Passle feed.

The markup provided by this layout option is shown below:

<div class="passle-plugin-content">
<div class="passle-post-container">
<div class="passle-post-image"></div>
<div class="passle-post-title"></div>
<div class="passle-post-author"></div>
<div class="passle-post-date"></div>
<div class="passle-post-content"></div>
<div class="passle-post-quote"></div>

Use CSS to hide elements you don’t need, or highlight what’s most important to you, tying the design in seamlessly with that of your own site.

The example, below, shows what can be achieved using custom CSS to style the content provided.