Yootheme WidgetKit & Form2Content

The Yootheme WidgetKit is great for adding effects to your website but has some limitations when it comes to using F2C to 'add' content to the galleries/tabs etc. Because the WidgetKit uses a component to add content, only the Media Player, Lightbox and Spotlight can be truly integrated into the F2C Template.

In this documenation we will show how you can integrate some of the WidgetKit functions.

WidgetKit documentation

We will try and add links as we find them to relevant WidgetKit documentation.

• In the component backend you will find HTML code examples for the lightbox, mediaplayer & spotlight.
• On the Yootheme widgetkit demo website you can find most documentation and examles under the latest template (go to the widgetkit menu item).

WidgetKit lightbox integration

If you want to create a popup slideshow of F2C (article) images you can only do this using the Widgetkit Lightbox option. For each image you can use the Widget syntax:

<a href="/image_lb.jpg" data-lightbox="group:mygroup"><img src="/image.jpg" alt="" height="120" width="180" /></a>

Change this to F2C template code and you get:

{if $YOURFIELDNAME}
<a href="/{$YOURFIELDNAME}" data-lightbox="group:mygroup"><img src="/%7B$YOURFIELDNAME_THUMB_URL_RELATIVE%7D" alt="{$YOURFIELDNAME_ALT_TEXT}" height="{$YOURFIELDNAME_HEIGHT_THUMB}" width="{$YOURFIELDNAME_WIDTH_THUMB}" /></a>
{/if}

(please ignore the / in the url's, these are added by the editor.)

Repeat this code for each image in your form, of course you can add layout etc.

(YOURFIELDNAME = name of your image field).

Make sure your images outputs are set to RAW. If you only want to show 1 image thumb, place the others in a hidden div tag. Yootheme needs the image references in order to group them into a popup slideshow.

I used the above effect also on this page (not with images but with text), you can see the tempate code in the right hand column:
http://documentation.form2content.com/documentation/f2c-template-parameters

Please note: Depending on your choice of template parameters, F2C Lite might have some limitations. The WidgetKit function does however work.