Load dynamic content into your layouts and create site-wide templates for categories and articles using the YOOtheme Pro page builder.
YOOtheme Pro allows you to load content, which is managed in Joomla, from the database into your layouts. This can be the article's title or featured image. Whenever that content changes, it will be automatically updated across your entire website. This is not limited to article fields. Any content from Joomla can be loaded into your layouts.
All builder elements are able to load dynamic content. First, you need to select a content source which defines fields available for mapping. It can be selected in the Advanced tab of an element under Dynamic Content.
For elements which have multiple content items, for example the Grid or the Slideshow element, the Dynamic Content option can be found in the Advanced tab of each item and not of the element itself. This way each item can have a different content source.
The options under Dynamic Content are grouped depending on where the source comes from.
|Page||Content sources which are provided by the page you are browsing. On a single article page, it's the article itself, and on the category page, it's the category itself and its articles.|
|Custom||Content sources which are custom queried. They are independent of the current page. For example, you can load the latest articles or all blog categories into a page.|
|Site||A content source with general fields of your site.|
In general, a content source can be Articles, Categories, Tags or Users. YOOtheme Pro also differentiates between a source which contains a single item or multiple items. In addition, a source can have related content sources, for example the article author or tags. Let's go into details.
Depending on the page you are browsing Joomla provides different content sources. These sources are used when creating templates for those pages. For example, the template for the single article page will render content from each single article.
Following content sources are available on a single article page.
|Article||The article itself|
Following content sources are available on a category page.
|Category||The category itself|
|Articles||All articles of the category|
Custom sources allow you to load custom queried content which is not automatically available on the page you are browsing. For example, you can load the latest articles or all blog categories into a page. Following custom sources are available.
|Custom Article||Single||Manually select an article.|
|Custom Articles||Multiple||Select categories and tags from which articles should be loaded. Articles from sub categories are not included. Use the shift or cmd key to select multiple categories or tags. If no category or tag is selected, all articles will be loaded. Additionally, you can load featured articles only.|
|Custom Category||Single||Manually select a category.|
|Custom Categories||Multiple||Select the parent category from which categories should be loaded.|
A source can have related content sources, for example the article has a related author and tags. Fields of all related content sources which contain a single item, like the author, are available for mapping together with the fields of the chosen content source. On the other hand, related content sources with multiple items, like article tags, have to be selected under the Multiple Items Source option.
Following related content sources are available for an article.
|Author||Single||The article author|
|Category||Single||The category the article belongs to|
|Tags||Multiple||The tags the article belongs to|
|Category: Child Categories||Multiple||The child categories of the category the article belongs to|
|Category: Tags||Multiple||The tags of the category the article belongs to|
Following related content sources are available for a category.
|Child Categories||Multiple||The child categories of the category|
|Tags||Multiple||The tags the category belongs to|
Most builder elements can only render a single item. Multiple items elements, on the other hand, for example the Grid or the Slideshow element, have the ability to render multiple content items. The content item of the element will render as many items as available in the content source.
If you select a content source which has multiple items, there are two options available to define which items are rendered.
|Start||Set the starting point. If the value is
|Quantity||Limit the number of items. If the value is left empty, all items will be loaded. This option is disabled for elements which can only render a single item.|
The combination of the Start and Quantity options allows you to split content source items into different visual layout parts. For example, you can show a number of articles in a hero slideshow followed by a grid showing the rest of the articles.
Note When templating an index or a category page, the Quantity option should only be used when splitting content sources. This is because the number of articles on those pages is already defined in Joomla.
Custom sources have additional options to order their items. Mind that the item order of page sources are defined by Joomla. Depending on whether the custom source is a article or a category, there are different order options available.
|Published||Order by published date|
|Created||Order by created date|
|Modified||Order by modified date|
|Hits||Order by number of hits|
|Joomla Order||Order by the Joomla ordering|
|Custom Fields||Order by any custom field|
Set the order direction of the items.
|Descending||Start with the last item.|
|Ascending||Start with the first item.|
Once a content source is selected, its fields are available for mapping. To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
Select the content field to map it to the element's field. For example, you can map the article’s title and featured image to the title and image fields of the Panel element.
Instead of the former field, the dynamic field with its name and source is shown.
The following actions are available.
|Dynamic Button||Opens a dropdown with all content fields available for mapping.|
|Edit Icon||Opens the available field options.|
|Delete Icon||Removes the field mapping. The former field is shown again.|
YOOtheme Pro can load fields from an Article, Category, Tag and User. Custom fields from Joomla and 3rd party plugins are available for mapping as well. While most fields like title, published date or an image simply render their content, some fields are pseudo-fields. Their content depends on other fields.
|Teaser||Renders the excerpt field if it has content, otherwise the intro text. If the intro text also has no content, the whole article content is rendered. To use an excerpt field, create a custom field with the name excerpt.|
|Meta||Renders the published date, author and category fields in a formatted string. Category and author are automatically linked to the category page and author's profile page respectively. Mind that the author will only be linked if you create a contact page for the user under Components → Contacts in Joomla.|
|Tags||Renders a comma-separated list of all tags which are automatically linked to their tag page.|
The following pseudo-fields render content which is added by Joomla plugins to the articles. For example, this could be a 3rd party comments system.
|After Display Title||Renders the
|Before Display Content||Renders the
|After Display Content||Renders the
Important Mind that the Content and Teaser fields should only be mapped on templates and not on individual page layouts. This is because these fields are used to store the actual page content and the builder layout itself.
There are several options available to manipulate the content of a field. Some field types have additional options.
Note The order in which the options are applied is: Meta/Tags → Date Format → Content Length → Search and Replace → Before and After
All fields have options to add text before and after their content.
|Before||Add text before the content field value. For example, you can create a link that opens the user's email program. If the field content is
|After||Add text after the content field value. For example, you can add a unit to a text field. If the field content is
Note Text in the Before and After fields can be translated by using Translate Language Strings.
All fields have options to perform a search and replace on their content. This is very powerful and allows advanced manipulation of the field content.
|Search||Select a predefined search pattern or enter a custom string or regular expression to search for. The regular expression has to be enclosed between slashes. For example
|Replace||Enter the replacement string which may contain references. If left empty, the search matches will be removed.|
The predefined URL Protocol pattern (
/https?:\/\//) will remove the HTTP/HTTPS protocol from an URL, if the replacement string is left empty. For example
https://yootheme.com will convert to
yootheme.com. This is useful, if you want to link to an external page but have a shortened URL displayed because you can use just one custom field and not two.
Learn more about search and replace in the PHP preg_replace function documentation and about regular expressions in the MDN Regular expressions documentation. The best place to test regular expressions is Regex101.
Text fields have an additional option to limit the content length.
|Content Length||Limit the content length to a number of characters. All HTML elements will be stripped.|
Date fields have an additional option to format the date.
|Date Format||Select a predefined date format or enter a custom format, for example
Learn more about it in the PHP Date function documentation.
Meta fields have additional options to display their content.
|Format||Display the meta text in a sentence or a horizontal list.|
|Separator||Set a separator between fields if the format is a list.|
|Display||Show or hide fields in the meta text.|
Tags fields have additional options to display their content.
|Separator||Set a separator between tags.|
|Display||Show or hide linking tags.|
YOOtheme Pro can load custom fields from an Article, Category and User. All Joomla custom fields are supported and there is additional support for some 3rd party fields. Custom fields are available for mapping together with the default content fields and are grouped under Fields or the field group name if the field is part of a field group.
Joomla allows you to add custom fields and field groups to articles and categories in the Article manager and to users in the User manager. Learn more in the official Joomla Custom Fields documentation.
|Calendar||Single||Field with a date picker||View|
|Checkboxes||Multiple||Checkbox field providing
|Color||Single||Field with a color picker||View|
|Editor||Single||Field with an WYSIWYG editor||View|
|Integer||Single/Multiple||Select field for integers||View|
|List||Single/Multiple||Select field providing
|List of Images||Single/Multiple||Select field for images of a folder||View|
|Media||Single||Field with a media picker||View|
|Radio||Single||Radio field providing
|Repeatable||Multiple||Field to repeat a customizable set of fields||View|
|SQL||Single/Multiple||Select field for custom queried
|Url||Single||Input field for an URL||View|
|User||Single||Field with an user picker||View|
|Usergroup||Single/Multiple||Select field for user groups||View|
YOOtheme Pro has additional support for the following 3rd party fields.
|Article||Single/Multiple||Select field for related articles providing all their fields.||Regular Labs|