Include external widgets with 'generic' plugin

↑ info  #

You can insert external widgets with the 'generic' plugin.

Note: This plugin is new since 13.10.2010!

There is always useful if you have a little piece of html and use this in several places with some changed variables. e.g.: The html code for integrate a YouTube: The html code can always be the same, only the ID of the video changes.

There exist two boilerplate:

• YouTube
• ohloh

But you can also create our own widget, see: How to use own templates in "generic" plugin

↑ How it works  #

The plugin is very simple. It just render a template and fill some variables, defined in the lucidTag.
e.g.:

1

{% lucidTag generic.ohloh project="pylucid" js_file="project_users.js?style=gray" %}

The tremplate for ohloh is:

1

<script type="text/javascript" src="http://www.ohloh.net/p/{{ project }}/widgets/{{ js_file }}"></script>

the generated html code is this:

1

<script type="text/javascript" src="http://www.ohloh.net/p/pylucid/widgets/project_users.js?style=gray"></script>

The result is:

↑ ohloh  #

↑ basic example:  #

The default used widget is the Thin Badge:

1

{% lucidTag generic.ohloh project="pylucid" %}

result:

↑ change widget:  #

You can change the widget type with the js_file argument.
existing widgets are:

• project_users_logo.js
• project_users.js?style=green (styles: "green", "red", "blue", "rainbow", "gray")
• project_thin_badge.js (default)
• project_partner_badge.js
• project_languages.js
• project_factoids.js
• project_cocomo.js
• project_basic_stats.js

Examples, see:

• http://www.ohloh.net/p/PyLucid/widgets

1

{% lucidTag generic.ohloh project="pylucid" js_file="project_basic_stats.js" %}

result:

↑ YouTube  #

↑ basic example:  #

1

{% lucidTag generic.youtube id="XL1UNmLDLKc" %}

Generated HTML code:

1
2
3
4

<object width="480" height="385">
    <param name="movie" value="http://www.youtube.com/v/XL1UNmLDLKc?fs=1&amp;hd=1&amp;rel=0&amp;hl=en"></param>
    <param name="allowFullScreen" value="true"></param>
    <embed src="http://www.youtube.com/v/XL1UNmLDLKc?fs=1&amp;hd=1&amp;rel=0&amp;hl=en" type="application/x-shockwave-flash" allowfullscreen="true" width="480" height="385"></embed>

result:

↑ change size:  #

1

{% lucidTag generic.youtube id="XL1UNmLDLKc" width=480 height=385 %}

permalink