The EasyLayouts demo site is a good example of the sort of site that can be easily created using Joomla articles, Joomla custom fields and the power of EasyLayouts to generate the output. You will be surprised how easily it was put together - this article will give you a step by step guide to how it was done.
1. The Requirements
We wanted to create an imaginary website to showcase recipes from famous chefs from around the world.
1.1 Content Types
In addition to regular articles it would need to have different special content types:
- Chefs - including information about their qualifications, experience, biographies, awards, the restaurants they run and their favourites recipes etc.
- Recipes - including descriptions, ingredients, preparation instructions, photos, difficulty ratings, the chefs who created them etc.
- Restaurants - including geographic information/maps, the chefs that run them, photos etc.
These three content types would need to be associated with each other - recipes linked to chefs linked to restaurants etc.
1.2 Content Type Specific Menus and Modules
We would need menu items and modules showing specific content types e.g. pages dedicated to chefs, and also the ability to filter further e.g. pages showing Vegetarian recipes or even recipes that don't include certain allergens.
1.3 Searching and Filtering Content by Custom Field
We would need to be able to search for content based on custom field values e.g. recipes that include chicken. We also wanted a custom field filter module to allow the content visible on a menu item to be filtered by custom field values.
1.4 Content Type Specific Layouts
It was essential that we could control the presentation and layout of content based on its type. Our Chef related pages needed to look quite different to Recipe pages.
2. Tools Required To Implement The Demo
Traditionally this type of site could only be done in Joomla by using some fairly complex addons to manage the custom fields, layouts and filtering. But now all that we needed was:
- Joomla!
- Joomla custom fields
- EasyLayouts
3. Creating Different Content Types with Joomla Custom Fields
We were able to create the three different content types (chefs, recipes and restaurants) using Joomla custom fields and categories.
We used categories to classify Joomla articles by content type:
We then created a series of custom fields to hold information specific to each content type e.g. recipes needed ingredients, allergens, description etc. For convenience we use different field groups to group the custom fields together so recipe specific fields were added to the 'Recipe Fields' field group etc.
The CRITICAL step, though, was to make the fields specific to the content types by using the Joomla custom fields category constraints. For example the Allergens field only applies to content in the 'Recipes' category:
This way we were able to create a distinct set of custom fields for each content type that we defined using Joomla content categories.
So now, when we create a Joomla article and specify the category we are given a different set of custom fields e.g.
So now we are able to create our recipe, chef and restaurant content types with their own specific custom fields.
4. Generating Content Specific Layouts
We were therefore able to create the different different content types (chefs, recipes and restaurants) using Joomla custom fields and categories and associating specific fields with specific categories/content types. The next step was to generate different layouts for each of the content types.
We wanted specific layouts for:
- Regular Joomla articles - Single article view, featured articles view (and items within it), category blog (and items within it)
- Recipes - Single article view, featured articles view (and items within it), category blog (and items within it), category list view, category articles module
- Chefs - Single article view, featured articles view (and items within it), category blog (and items within it)
- Restaurants - Single article view, featured articles view (and items within it), category blog (and items within it)
Normally we would need to resort to coding these up in PHP as Joomla template overrides but this is where EasyLayouts comes to the rescue. We can customise these layouts without the need for any coding at all (its as if we can create Joomla template overrides without the need for coding !!).
4.1 Specific Layouts for Specific Content Types
When we open up EasyLayouts on the demo site we can see the list of layouts we have created:
The layouts can be made category specific - so the first 6 layouts control the output of articles where there is no category specific layout - in this case our regular Joomla articles. You'll see we have customised layouts for each of our requirements - single article view, featured articles view (and items within it), category blog (and items within it).
We can filter the list by layout Type - e.g. to show all the single article view layouts:
You'll see that we have layouts specific to Chefs and Restaurants. The layout for Recipes applies to multiple categories which you can see by hovering your mouse over the 'folder' icon.
This would allow us to create different layouts for specific sub-categories e.g. a different presentation for savoury dishes and sweet dishes if we wanted to. The EasyLayouts demo site is only in English but if it was multi-lingual we could create different layouts by category and language.
4.2 Editing a Layout
You can view a video demonstration of layout editing at "EasyLayouts backend use" and the documentation pages for a detailed explanation of how to edit a layout in EasyLayouts (see Creating Layouts) you can find information there about the configuration options available. To give you a flavour of how this is done we can look at the layout page for the Chef's Single Article view:
The layout editor consists of a grid split into rows and columns - you can choose how many rows you want and how many columns in each row (and how they are to be sized). You can add fields/page elements into any columns by clicking the '+' icon in the top right of each column. The elements on the page can be dragged and dropped to make it really easy to customise the layouts.
If you log in to the backend of the demo site at https://demo.easylayouts.net you can take a look at how all the layouts have been set up and play with them.
5. Special Custom Field Requirements
Joomla! comes with 15 native field types out of the box (as of Joomla 3.8) - these allow us to meet most of our custom field requirements for this demo site but not all.
Specifically we also need:
- Related Article custom field - to link recipes to a specific chef and chefs to their restaurant.
- Map/Location custom field - to show the location of a restaurant on a Google Map
- Embedded Video custom field - to show preparation steps in a YouTube of Vimeo video
EasyLayouts comes with a related article custom field and an embedded video field built in - the map/location custom field is available in the managed locations addon for JEvents, though we will make a similar field available as part of EasyLayouts soon.
6. Filtering Menu Items and Modules
One of the clever features of EasyLayouts is that is allows you to filter your Joomla content menu items and modules by custom field values.
For example - the demo site shows a list of recipes that don't include wheat (see https://demo.easylayouts.net/recipes/excluding-wheat ) - this is easily configured in the Joomla menu item edit page.
In this case we have chosen to hide items when all constraints are satisfied and our constraint is that allergens should be equal to 'Wheat'. There is documentation on this options available in the documentation pages (Filtering and Conditional Display of Articles ).
7. The Filter Module
The recipes pages of the demo site demonstrate the EasyLayouts filter module which allows us to find menus that contain specific ingredients or include keywords in the title.
It is easy to customise this module using the EasyLayouts layout editor
As you can see it was straightforward to create the EasyLayouts demo site using Joomla, Joomla Custom Fields and EasyLayouts - no coding needed!
Try EasyLayouts today!