Introducing New Elements

Elements are the hands down winner for the most powerful Odin Assemble block type. While elements can act as a basic server side includes they can also be elements of or even complete web applications! Don't take our word for it, review the sites in our growing examples area [Ed: currently phonefeeds.com is my favorite Odin Assemble based web-site].

Authoring Elements

Odin Assemble currently supports type forms of elements. Elements can be either:

• HTML Based
• PHP Based

HTML Based Elements

HTML elements are very similar to server side includes. You can call external HTML documents and have the contents interpolated into any Odin Assemble page.

An example of a HTML based element is used to be the navigation block found on the top right hand portion of this web-site. By using a single HTML element for site wide elements such as site navigation you can minimize update time and improve overall consistency.

PHP Based Elements

Using PHP based elements gives developers the ability to easily integrate external scripts or complex PHP functions. A very basic example of a PHP based element is the "© Odin Metatech, Inc {date}" footer element. The year will change as required because it is PHP element based. The source code of the date element is listed below:

	echo date("Y");

Using PHP based elements you can easily accomplish more difficult tasks such as random image display. Here is the source code for rnd_image_basic:

	$rndImage[] = "http://www.domain.com/example-1.png";
	$rndImage[] = "http://www.domain.com/example-2.png";
	$rndImage[] = "http://www.domain.com/example-3.png";
	$rndImage[] = "http://www.domain.com/example-4.png";	

	echo "<a href='".$rndImage[rand(0, (sizeof($rndImage)-1)]."'>";

As an added benefit, because of their component like nature, its easy to transfer PHP based elements between web-sites.

Values can also be passed to PHP based elements further expanding their capabilities. Consider the following source code example for rnd_image_complex:

	$rndImage['group_a'][] = "http://www.domain.com/example-1.png";
	$rndImage['group_a'][] = "http://www.domain.com/example-2.png";
	$rndImage['group_a'][] = "http://www.domain.com/example-3.png";
	$rndImage['group_a'][] = "http://www.domain.com/example-4.png";	

	$rndImage['group_b'][] = "http://www.domain.com/example-4.png";
	$rndImage['group_b'][] = "http://www.domain.com/example-5.png";
	$rndImage['group_b'][] = "http://www.domain.com/example-6.png";
	$rndImage['group_b'][] = "http://www.domain.com/example-7.png";	


	echo "<a href='".
	     $rndImage[$element_passed_value][rand(0, (sizeof($rndImage)-1)].
	     "'>";

Installing Elements into your Odin Assemble web-site

Before you can reference any element you'll first have to install it into your Odin Assemble based web-site. Similar to installing a template or page, to install an element, upload the valid PHP script with a .php extension or HTML file with a .html extension. To test the examples above, save them to your drive as date.php, rnd_image_basic.php and rnd_image_complex.php then upload the files to you /elements directory.

Referencing Elements in your Page or Template

We just covered three basic PHP based elements.

• date.php
• rnd_image_basic.php
• rnd_image_complex.php

To reference date.php add {date} somewhere in either your template block or page block. If you have a matched date.php file in /elements/ and Odin Assemble encounters a {date} tag while assembling your page then date.php will be executed. In this case the current year is the result and will replace the tag {date}.

Our second example is slightly more complex, but it is referenced in the same fashion. To reference rnd_image_basic.php add {rnd_image_basic} somewhere in either your template block or page block as you did with {date}. If you have a matched rnd_image_basic.php file in /elements/ and Odin Assemble encounters a {rnd_image_basic} tag while assembling your page then rnd_image_basic.php will be executed. In this case a random image tag is the result and will replace the tag {rnd_image_basic}.

The third example increases complexity again. In this case the element (as many commonly do) expects an argument to be passed to it prior to it's execution. The ability of elements to take arguments, both from the developer and from the web-site visitor, further expands capabilities.

To reference rnd_image_complex.php add {rnd_image_complex value='group_a'} or {rnd_image_complex value='group_b'} somewhere in either your template block or page block. If you have a matched rnd_image_complex.php file in /elements/ and Odin Assemble encounters a {rnd_image_complex value="SOMEVALUE"} tag while assembling your page then rnd_image_complex.php will be passed SOMEVALUE and then executed. In this case a random image tag from one of two pre-defined groups is the result and replaces the tag {rnd_image_complex}.

Available Pre-built Elements

To reduce the development cycles involved with deploying Odin Assemble web-sites we're constantly developing new elements and offering them for free download. Check our element collection frequently for new additions.