Yootheme Custom Elements

The YOOtheme Pro page builder comes with a collection of ready-to-use elements to build your content. You can save configured elements with their content and settings into the element library and reuse them later.

Open the YOOtheme Pro page builder and click the Plus icon to add an element to the layout. The element library will open in a modal.

Elements

The element will have a name, author, creation date, etc. All of that is pretty self-explanatory. Important are the attributes of the element tag. Type needs to be the same as the element class in the php file and group will be used to group the elements in the edit elements screen. After the elements metadata the parameters are set. To understand custom elements, first look at the given basic UML elements: each such element is merely a graphical Java component that interprets its own property text and draws itself. For example, the following figure illustrates how the property text of a UML class element is interpreted by that class element to draw itself. Set a custom HTML class that will be added to the widget element in the rendered output. Custom Link Target: Open all links in a new window.

The Elements tab shows all available elements. Click the element icon to load it into the layout. Elements are grouped into Basic, Multiple Items and System elements. Custom elements added by a child theme are grouped under Custom. Use the search to easily find the needed element.

Basic Elements

Basic elements are the default elements in YOOtheme Pro. They have their own content fields and settings. Learn more in the basic elements documentation.

Multiple Items Elements

Multiple items elements have multiple content items. Learn more in the multiple items elements documentation.

System Elements

System elements add Joomla functionality into your layouts. Learn more in the system elements documentation.

My Presets

The My Presets tab shows a list of your configured and saved elements with their content and settings. To load a preset element into your layout, simply click on it. Use the Rename, Download and Delete icons which appear on hover to rename, download or delete the preset. The last modified date shows when the preset was changed. Additionally, the search can be used to easily find the needed preset.

To save one of your elements including its content and settings as preset, hover it and click the Save in Library icon.

To upload downloaded presets to the element library, use the Upload Preset button in the upper right corner. Once the preset is uploaded, it will be available along with other saved presets.

Layout Techniques

To keep your layout clearly arranged, it's recommended to use as few elements as possible. For example, if you want to display a heading, an image and a text, use a Panel instead of three separate elements. If you have multiple panels side by side, use the Grid or Gallery elements which can display multiple items. If a specific combination of settings is needed, you may have to use the basic elements like Text and Image. Mind that this also means that you will have more settings to adjust if you want to change your layout later.

Custom elements are the easiest way to extend the functionality of the YOOtheme Pro page builder. Copy an existing element and customize its markup and settings, or create a new element from scratch.

Custom elements can be added to the page builder by using a child-theme or a Joomla plugin. The easiest way to add an element is by using a child theme. This is typically used for client projects. A Joomla plugin should be used when developing a third-party extension for YOOtheme Pro. Take a look at the extensions page to see what is available from the developer community.

Getting Started

The easiest way to get started is to try out the example element or take a look at the included YOOtheme Pro elements. Once the element is added to the page builder, it will appear under Custom in the element library.

Example Element

The example element on Github demonstrates how to configure an element, extend its functionality and make use of the different field types. Simply download and unzip the element. The quickest way to try it out is using a child-theme.

Included Elements

Included elements can be found in the respective module directory under vendor/yootheme in YOOtheme Pro.

To create a new element by customizing an existing element, simply copy one of the included elements and give it a unique name in the element.json configuration.

File Structure

An element has its own directory with configuration and template files.

JSON Configuration

The element.json defines the element's name, icons, fields and how the editing interface should look like inside the builder. Make sure to set a unique element name, for example my_element, that is not taken by an existing element. The following example shows a simple element configuration without any fields.

Group Property

By default custom elements are grouped under Custom in the element library. To create a dedicated group for elements, set the group property. This is recommended if elements are shared across different projects or when developing a third-party extension for YOOtheme Pro.

Fields

Fields of an element can be defined in the fields object in the element.json file. Just add a field name and its field definition.

Additionally, set all fields in the default fieldset object to define their order and layout when editing the element in the page builder.

Properties

Every field is defined by its type and further properties. The following properties are available for all field types.

In the following example an input field named Content is shown.

In the following example the style option can only be selected if the content field is filled out. The icon picker is only shown if the content field is filled out and the style is set to primary.

Tabs

Optionally, the fieldset object type can be set to tabs which defines different tabs in which the fields are shown. The following example has two tabs – Content and Settings. The Content tab includes the content field, and the Settings includes the two option fields.

Default Values

Fields can be set to a default value when the element is added to the page builder. Simply set the field key to the default value in the defaults object in the element.json file. In the following example the text field content will be filled out with Some default value..

Preview Placeholder

Fields can show a placeholder in the page builder preview while it has no content. Once the field is filled out, the placeholder disappears, and the field value is shown. Simply set the field key to the placeholder value in the placeholder object under props in the element.json file. In the following example the element will show a Lorem ipsum placeholder text as long as the content field is not filled out.

Interpolation Syntax

YOOtheme Pro comes with powerful interpolation syntax to reference values and to call functions. These interpolations are embedded within strings and wrapped in ${}, such as ${var.foo}.

For example, this is used for general element settings which are often the same across elements. Those fields are defined in the vendor/yootheme/builder/config/builder.json file. Their field definition can be referenced as ${builder.NAME}. The following example sets the field name maxwidth to the field definition defined in the builder.json file.

Here is the referenced field definition from the builder.json file.

Another example is the advanced settings tab which is also the same across all elements. The order and layout of these fields are also referenced from the builder.json file.

Yootheme Custom Elements Names

Here is the referenced value from the builder.json file.

Dynamic Content

To add the dynamic content field which allows selecting a content source, reference the source fields from the builder.json file. Referencing the advanced settings tab as in example above also defines the source field.

To allow a field to map dynamic content, set the field source property to true.

Elements

The element will have a name, author, creation date, etc. All of that is pretty self-explanatory. Important are the attributes of the element tag. Type needs to be the same as the element class in the php file and group will be used to group the elements in the edit elements screen. After the elements metadata the parameters are set. To understand custom elements, first look at the given basic UML elements: each such element is merely a graphical Java component that interprets its own property text and draws itself. For example, the following figure illustrates how the property text of a UML class element is interpreted by that class element to draw itself. Set a custom HTML class that will be added to the widget element in the rendered output. Custom Link Target: Open all links in a new window.

The Elements tab shows all available elements. Click the element icon to load it into the layout. Elements are grouped into Basic, Multiple Items and System elements. Custom elements added by a child theme are grouped under Custom. Use the search to easily find the needed element.

Basic Elements

Basic elements are the default elements in YOOtheme Pro. They have their own content fields and settings. Learn more in the basic elements documentation.

Multiple Items Elements

Multiple items elements have multiple content items. Learn more in the multiple items elements documentation.

System Elements

System elements add Joomla functionality into your layouts. Learn more in the system elements documentation.

My Presets

The My Presets tab shows a list of your configured and saved elements with their content and settings. To load a preset element into your layout, simply click on it. Use the Rename, Download and Delete icons which appear on hover to rename, download or delete the preset. The last modified date shows when the preset was changed. Additionally, the search can be used to easily find the needed preset.

To save one of your elements including its content and settings as preset, hover it and click the Save in Library icon.

To upload downloaded presets to the element library, use the Upload Preset button in the upper right corner. Once the preset is uploaded, it will be available along with other saved presets.

Layout Techniques

To keep your layout clearly arranged, it's recommended to use as few elements as possible. For example, if you want to display a heading, an image and a text, use a Panel instead of three separate elements. If you have multiple panels side by side, use the Grid or Gallery elements which can display multiple items. If a specific combination of settings is needed, you may have to use the basic elements like Text and Image. Mind that this also means that you will have more settings to adjust if you want to change your layout later.

Custom elements are the easiest way to extend the functionality of the YOOtheme Pro page builder. Copy an existing element and customize its markup and settings, or create a new element from scratch.

Custom elements can be added to the page builder by using a child-theme or a Joomla plugin. The easiest way to add an element is by using a child theme. This is typically used for client projects. A Joomla plugin should be used when developing a third-party extension for YOOtheme Pro. Take a look at the extensions page to see what is available from the developer community.

Getting Started

The easiest way to get started is to try out the example element or take a look at the included YOOtheme Pro elements. Once the element is added to the page builder, it will appear under Custom in the element library.

Example Element

The example element on Github demonstrates how to configure an element, extend its functionality and make use of the different field types. Simply download and unzip the element. The quickest way to try it out is using a child-theme.

Included Elements

Included elements can be found in the respective module directory under vendor/yootheme in YOOtheme Pro.

To create a new element by customizing an existing element, simply copy one of the included elements and give it a unique name in the element.json configuration.

File Structure

An element has its own directory with configuration and template files.

JSON Configuration

The element.json defines the element's name, icons, fields and how the editing interface should look like inside the builder. Make sure to set a unique element name, for example my_element, that is not taken by an existing element. The following example shows a simple element configuration without any fields.

Group Property

By default custom elements are grouped under Custom in the element library. To create a dedicated group for elements, set the group property. This is recommended if elements are shared across different projects or when developing a third-party extension for YOOtheme Pro.

Fields

Fields of an element can be defined in the fields object in the element.json file. Just add a field name and its field definition.

Additionally, set all fields in the default fieldset object to define their order and layout when editing the element in the page builder.

Properties

Every field is defined by its type and further properties. The following properties are available for all field types.

In the following example an input field named Content is shown.

In the following example the style option can only be selected if the content field is filled out. The icon picker is only shown if the content field is filled out and the style is set to primary.

Tabs

Optionally, the fieldset object type can be set to tabs which defines different tabs in which the fields are shown. The following example has two tabs – Content and Settings. The Content tab includes the content field, and the Settings includes the two option fields.

Default Values

Fields can be set to a default value when the element is added to the page builder. Simply set the field key to the default value in the defaults object in the element.json file. In the following example the text field content will be filled out with Some default value..

Preview Placeholder

Fields can show a placeholder in the page builder preview while it has no content. Once the field is filled out, the placeholder disappears, and the field value is shown. Simply set the field key to the placeholder value in the placeholder object under props in the element.json file. In the following example the element will show a Lorem ipsum placeholder text as long as the content field is not filled out.

Interpolation Syntax

YOOtheme Pro comes with powerful interpolation syntax to reference values and to call functions. These interpolations are embedded within strings and wrapped in ${}, such as ${var.foo}.

For example, this is used for general element settings which are often the same across elements. Those fields are defined in the vendor/yootheme/builder/config/builder.json file. Their field definition can be referenced as ${builder.NAME}. The following example sets the field name maxwidth to the field definition defined in the builder.json file.

Here is the referenced field definition from the builder.json file.

Another example is the advanced settings tab which is also the same across all elements. The order and layout of these fields are also referenced from the builder.json file.

Yootheme Custom Elements Names

Here is the referenced value from the builder.json file.

Dynamic Content

To add the dynamic content field which allows selecting a content source, reference the source fields from the builder.json file. Referencing the advanced settings tab as in example above also defines the source field.

To allow a field to map dynamic content, set the field source property to true.

Field Types

Here is a list of all available content field types in YOOtheme Pro.

Field types which have additional properties are described below.

Checkbox Field

The checkbox field has an additional property text Is the elder scrolls v skyrim special edition worth it. to set the text next to the checkbox.

Editor Field

The editor field has an editor property which loads only the code editor when set to code. An additional mode property explicitly defines the code language css, js or text/html.

The following example shows an editor with the Visual and Code tabs.

The following example shows only the code editor with syntax highlighting for CSS.

Note To prevent the customizer preview from updating while typing in the editor, set the debounce attribute to around 500 milliseconds.

Select Field

The select field has the options and default properties for its options and the default value.

Radio Field

The radio field has the name, options and default properties for its name, options and the default value.

Range Field

The range field has no additional properties, but it is necessary to set the min, max and step HTML attributes.

Field Layouts

Some field types are only used to layout fields in the page builder and have no content themselves. They are typically used in the fieldset object. The containing fields are defined in a fields object.

Grid Field

The grid field has a width property to define the width for each grid cell.

Note Inline field definitions in the fieldset object need a unique name. By default, the label property is used as fallback for the name. But if a field definition doesn't have a label like in the example above, a unique name must be set. We mark names which are not used anywhere with a _ prefix.

Group Field

The group field has a divider property to set a divider at the bottom of the group.

Note Opposite to the grid field, groups usually have a label which is why a name doesn't have to be set.

Template Files

The following variables are available when rendering an element node in the templates.

Field Properties

All element fields defined in the element.json file can be accessed as properties using the $props variable. Their type is defined by the field type, or null if the user has not entered a value yet.

Template Partials

Rendering the element layout is often split into template partials prefixed with template- using the helper function $this->render(). The following example renders the template-content.php file and passes the element properties $props.

Template Engine

The YOOtheme Pro template engine provides an HTML helper function $this->el() to create HTML elements using a compact interpolation syntax for the $props variable. It also allows merging attributes easily.

There are severals arguments which are passed to the HTML element rendering.

Transforms and Updates

Yootheme Custom Elements Design

The optional element.php file extends the element functionality with custom transforms or update functions. It has to be imported through the element.json file.

Here is an example on how to define transforms and updates for the element node. It also shows which objects and parameters are available.

Collapsing Layout

Make sure to prevent the element from rendering if its content fields are empty to behave according to the collapsing layout cascade.

Mind that for a single content field, the return value has to be casted to a boolean.

Difference between 8086 and 8088 Microprocessor 1. 8086 has 16-bit data lines. 8088 has 8-bit data lines. 8086 is available in three clock speeds, 5 MHz, 8 MHz and 10 MHz. 8088 is available in two clock speeds, 5 MHz and 8 MHz. Compare 8086 and 8088 microprocessors. The difference between the 8086 and the 8088 is that the 8086 has a 16 bit data bus and that the 8088 has an 8 bit data bus. Both processors are the same 16 bit processor, and both have a 20 bit. 8088 has an IO/ pin to differentiate between memory and I/O operations. 8085 has no pre-fetchqueue. 8086 BIU will fetch new bytes into the pipelining queue when 2 bytes of the queue are empty. 8088 BIU will fetch a new byte into the pipelining queue when 1 byte of the queue is empty. 8085 has 5 flags. 8086 has 9 flags. 8088 has 9 flags.

Updates

Define element updates for new versions of YOOtheme Pro.

Note Currently element updates are tied to the updates of YOOtheme Pro. They don't have their own version numbers and can only be updated when the YOOtheme Pro version number changes.

Content Items

Elements which have content items, like the Grid element, are parent elements which contain child elements. To create a parent element, set the container property to true in the element.json file. To add a field which shows an interface to manage the content items, use the content-items field type and set the item property to the name of the child element.

Just like any other element a child element has its own directory, JSON configuration with a unique element name and template files. It's not shown in the element library which is why it also has no icons. Typically a child element also has an advanced setting tab which is the same across all child elements. Its fields order and layout are referenced from the the builder.json file.

The child element should have at least a title field and an optional image field. Both will be shown in the list of content items created by the content-items field in the parent element.

Template Files

All child elements can be accessed with the $children array and rendered using the helper function $builder->render().

Typically the $props variable of the parent element is passed as $element to the child element, so all fields of the parent element can be accessed in template files of the child element.

Add Media Button

By default, the content-items field shows an Add Item button to create a new content item. Optionally, add an Add Media button which allows picking images in the media manager. For each selected image, a new item is created. The image and title fields are automatically filled out.

Simply define the media object and set its type property to image. Use the item object to define to which fields the image title and src are set.

Preview Placeholder

Elements can show placeholder items in the page builder preview while they have no content items. Once a content item is added, the placeholder items disappear, and the content item is shown. Simply set the placeholder items in the placeholder object under children in the element.json file. Create an object for each placeholder item by setting the type property to the name of the child element.

Make sure placeholders are defined in the child element.

If necessary, different placeholder values for fields of the placeholder item can be set in the props object.