Installing jQuery Passle plugin

Read jQuery plugin introduction & integration examples

Installation Instructions

  1. Make sure your page already includes jQuery version 1.5 or above.
  2. Include the Passle jQuery plugin script in your page:
    <script type="text/javascript" src="https://sdk.passle.net/jquery.passle.js"></script>
  3. Add a container element for the plugin content to your page. For example:
    <div id="passle-plugin-container"></div>
  4. Activate the plugin by including the following javascript after the container element:
    <script type="text/javascript">
    $('#passle-plugin-container').passle({ passleId: "2dmr" });
    </script>

    where #passle-plugin-container is the selector of the container you added above, and 2dmr is your Passle’s unique ID. Alternatively, you can choose to display posts for a particular user instead:
    $('#passle-plugin-container').passle({ userId: "vp37wl" });
    This is similar to the above, except instead of a passleId you are specifying a userId: the unique ID for the user whose posts you want to display.
  5. Note for WordPress users:If installing the plugin on a WordPress site a declaration of var $ = jQuery must be included above the activation code:
    <script type="text/javascript">
    var $ = jQuery;
    $('#passle-plugin-container').passle({ passleId: "2dmr" });
    </script>

passle( options [, callBack ] )
Returns: jQuery

options (type: Object)

An object whose properties are used to specify details or override default options. When passed as an object this then retrieves scripts, stylesheets, and content via AJAX and inserts them into this.first(). You must specify either a passleId or a userId (but not both).

Documentation

passleId String No Default The unique ID of the Passle you want to retrieve posts from.
Read how to find your Passle ID
userId String No Default The unique ID of the user whose posts you want to retrieve.
Read how to find your User ID
numberOfPosts Number Default: 20 The number of posts you would like to display.
layout String Default: “full” Specifies layout mode, choose from "full" (default), "compact", "minifeed" or "none".
cssId String/Boolean Defaults to passleId if provided, else false Specifies which Passle’s custom CSS to retrieve, alternatively set to false for default CSS styles.
isotope String/Boolean Default: “center” Specifies isotope mode, choose from "center" (default), true, or false.
filter String No Default Filters retrieved posts by tag name. You can use up to 3 tags, separated by commas. When multiple tags are separated by commas, the plugin will only return posts which have all of those tags. For more advanced filtering, you can also use a regular expression.

options (type: String)

A string (either “refresh” or “remove”) specifying an operation other than insertion – this is used instead of the Object above. Options set on initialisation will be remembered for each individual instance.

"refresh" Reloads content in target element. Does not fetch scripts and stylesheets.
"remove" Cleans up after target instance (clear element, remove timers etc.).

callBack (type: Function)

A function that will be called once the operation has completed.

FAQ

Which versions of jQuery are supported?

The plugin supports jQuery v1.5 and greater. Please ensure you are not working in .noConflict() mode or otherwise reassigning the $ alias.

Do I need to include anything else alongside the script (for example, a stylesheet)?

For most layout modes the plugin will retrieve stylesheets via AJAX, so you do not need to manually include styles.

I’m getting the error “Options argument is not valid. Refer to docs for more details.” What do I do?

You must include a valid options argument, either a javascript Object containing either a passleId or userId property, or a string specifying an alternate operation.

How do I get my passleId or userId?

Contact our sales team at sales@passle.net for further details on getting these IDs.

The styles look weird or broken. What’s wrong?

The plugin will add stylesheets for the Passle content, depending on the layout option you are using. All our CSS is scoped to only apply to the HTML provided by the plugin, so our styles should not conflict with or influence the rest of your content.

However, it is possible that existing style rules might override or conflict with the imported styles, altering the look of the Passle content.

The most common cause of css conflict is when existing stylesheets contain overly broad selectors (for example, element selectors such as header or div). These selectors then apply their rules to the plugin content accidentally.

To resolve this form of conflict, you can do one of the following:

  • Make your CSS selectors more specific by scoping your selector within a parent selector, using the :not() pseudo-class, or targeting a more specific classname or id.
  • Correct the error manually by targeting the affected elements using the plugin classes and overwriting the style rule causing the conflict.

If neither of these is possible, get in touch and we may be able to provide a solution.

How do the various IDs work? What happens if I combine them?

The passleId specifies a particular Passle to retrieve posts from. The userId retrieves that user’s posts. Currently you can only specify either one or the other, not both.

In addition to the default styles, you can also bring in a Passle’s custom styles (colours, etc.) by specifying a cssId. If no cssId is specified this will default to the passleId property (if provided). If neither are provided or the cssId is explicitly set to false, only the default plugin styles will be retrieved.

What layout options do I have?

The "full" layout option is designed for the full page width, and appears as a series of tiles.

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

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

Finally, the "none" layout option inserts minimal content (image, post title, author name) and does not insert Passle CSS. This last option is recommended in cases where you only need the very bare bones of content or where there are serious conflicts with page styles.

Example:
$('#plugin-user').passle({ userId: "vp37wl", numberOfPosts: 6, layout: "compact" });

What isotope options do I have?

The "center" and true isotope options arrange the tiles in the full layout option in a grid. In particular, "center" applies the margin: 0 auto; CSS rule to the container, while true leaves the block left aligned. The false option disables isotope, leaving the tiles unarranged.

Can I filter posts by tag?

You can use the “filter” option to restrict the posts the plugin displays to those which use the specified tag. You can filter by up to three tags, separated by commas. If this option is not provided (the default) the plugin will fetch all posts regardless of tags.

For instance, a single tag (will only display posts tagged with “technology”):

$('#passle-plugin-container').passle({ passleId: "2dmr", filter: "technology" });

Multiple tags (will only display posts tagged both with “technology” AND “finance”):

$('#passle-plugin-container').passle({ passleId: "2dmr", filter: "technology,finance"});

Multiple tags with regular expression (will only display posts tagged either with “technology” OR “finance”):

$('#passle-plugin-container').passle({ passleId: "2dmr", filter: "technology|finance"});