preview JavaScript API Module

jQuery.telligent.evolution.preview

The preview module enables client-side loading of scraped web previews of remote URLs.

Preview content is scraped from the remote URL, parsed in a way that prefers Open Graph Protocol metadata, and temporarily cached in Evolution.

Methods

load

Returns a Web preview JSON object for a remote URL and an options object.

$.telligent.evolution.preview.load(url, options)

options:

maxImageWidth: maximum preview image width
maxImageHeight: maximum preview image height
success: callback function invoked when the preview is returned. passed the preview data
error: callback function invoked when the preview cannot be generated

Passes the success callback a preview object with the keys:

url: Remote URL
statusCode: HTTP response code
title: Scraped title
excerpt: Scraped excerpt
imageUrl: Scraped image URL
resizedImageHtml: HTML representing the resized scraped image URL
siteName: Scraped site name

render

Renders a web preview object to an HTML fragment. Uses an internally-defined HTML template, but can optionally be passed a separate one.

$.telligent.evolution.preview.render(preview, options)

Options

template: client template string

Default Template

<div class="abbreviated-post-header shared-link"></div>
<div class="abbreviated-post shared-link <% if(imageUrl !== null && imageUrl.length > 0){ %> with-image <% } %>">
    <h4 class="post-name">
        <a href="<%: url %>" class="external-link" target="_new" rel="nofollow">
            <%= title %>
        </a>
    </h4>
    <% if(siteName !== null && siteName.length > 0){ %>
        <div class="post-application">
            <span class="label"></span>
            <span class="value">
                <a href="<%: url %>" class="external-link" target="_new" rel="nofollow">
                    <%= siteName %>
                </a>
            </span>
        </div>
    <% } %>
    <% if(imageUrl !== null && imageUrl.length > 0){ %>
        <div class="post-thumbnail">
            <a href="<%: url %>" class="external-link" target="_new" rel="nofollow">
                <%= resizedImageHtml %>
            </a>
        </div>
    <% } %>
    <% if(excerpt !== null && excerpt.length > 0){ %>
        <div class="post-summary">
            <%= excerpt %>
        </div>
    <% } %>
</div>
<div class="abbreviated-post-footer shared-link"></div>

Recommended