In the third part of our tutorial, we build the homepage of our fictional agency website and thereby learn how we can create blog layouts and give creative freedom with the help of custom fields and template overwrites.

The current work status after completion of this tutorial part as a ZIP download: Template-Folder [WIP]

Let's start with the homepage and look at the desired structure of the page:

Homepage structure

The website starts with a mission statement that is placed prominently at the top of the page. This mission statement is integrated into the source code of our index.php. The actual text is maintained with the help of a language string, which can then be conveniently maintained and modified by the site's administrators.

Below is an overview of the services offered by our fictional web agency. In the following, we will add another blog layout to our website template to display the services offered.

In the lower part of the page, some case study highlights are presented in the form of a slider. This slider will contain the "most important" case studies of the agency, before further case studies are presented below the slider in the form of a simple three-column grid.

For both types of case-study presentation, we will use the module " Articles - Latest" and will create two individual layout overwrites for this.

Let's go.

Introarea

Since, from a technical point of view, there is not much left to do in the introarea and it only requires a bunch of CSS styling to adjust the styling according to the designs, we skip this step and move on to the services.

Services - create your own category layout as menu item types

Unlike for article-layouts, it is not possible to create an alternative layout for blog layouts. Instead, however, we can copy the already existing menu item type "category blog" at this point and create our own menu item type based on it.

To do this, we first copy all files with the prefix "blog_" from the folder "/components/com_content/views/category/tmpl" and place a duplicate in each case as a template overwrite in our already existing folder /templates/TEMPLATENAME/html/com_content/category.

Since we have already created a template overwrite for the blog view (see Part 2 of the tutorial), the folder looks like this:

services 1

In the second step, we rename the created duplicates in a way that they match our requirements and describe the layout descriptively. The reason for this is that we may want to make changes to this layout after some time and a descriptive name makes it easier to identify the corresponding files that need to be edited. In this context, I decide to use the name serviceblog and rename the files accordingly. It is also important that the XML file is also renamed, as it is the manifest of our new menu item.

The file structure then looks as follows:

services 2

Perfect, now only one small step is missing to be able to select the newly created menu entry type in the administration area of our website. We have to modify the manifest file "serviceblog.xml". This file contains meta information about the menu entry type (e.g. the name) and all parameters that can be adjusted in the administration area for the respective menu entry type.

If we now change the layout name in the XML file, we can then select the new menu item type in the administration area of the page.

It is advisable at this point to also store the name of the layout in a language string, but for the sake of simplicity we have stored the title directly in the XML file.

services 3

Done - we have created our first own menu item type and can now select it, which we do.

services 4

Afterwards, as described in part 2 of our tutorials, we have the possibility to customise the layout according to our needs. With regard to the design, the following functionality and layout should be achieved:

A headline and introductory text should be displayed one below the other and linked to get to the detail page of the respective service. For this purpose, an appealing mouseover effect is to be implemented. On mobile devices that are navigated by touch, a small arrow is also displayed below the introductory text to make it clear that further information on the respective service is available.

Since it should be clear by now how overrides can be used to customise layouts to one's own needs, I will now briefly present the final result for the file serviceblog_item.php, which is responsible for displaying the individual blog entries:

services 5

With the help of a few lines of (S)CSS, the rather unattractive basic layout structure is transformed into a visually appealing brief introduction to the services offered by our fictional web agency.

Case studies as a slider - using custom fields for styling purposes

In the next step, we want to focus on the "highlight case studies", which are to be presented in the form of a slider. Of course, we will not develop the actual slider functionality ourselves, but will use the wonderful "Tiny Slider" (https://github.com/ganlanyuan/tiny-slider) - a vanilla JS slider that can be used flexibly.

Let's first take a look at how a single slide is structured:

slides 1

Each slide displays the name of the project ( article title), an image ( article image), the month and year of publication of the project ("Published"). In addition, the background colour should vary for each slide and is defined using a custom field.

As already described, we build the slider on the basis of the module Articles - Latest and thus show a certain number of articles of the category "Cases", which have also been marked as a featured article.

slides 2

After we have created the module, we create a template overwrite for mod_articles_latest and then rename it to "slider.php" to create an alternative layout (see case study layout in part 2 of the guide).

The desired layout can then be selected in the Advanced tab.

As we can see, the standard output of Joomla! consists of a simple (unsorted) list in which the articles are displayed as a list-item. In the following, we would like to change this so that our much more complex layout can be displayed with all its contents.

In the first step, we want to output all the necessary information and then integrate it into the desired HTML structure.

We need the following building blocks per article:

  • Custom-Field-Value to define the background-color of the slide
  • Article Title (2x)
  • Publishing Date  in the format MM-YYYY
  • Readmore-Link
  • Article Image (image_fulltext)

With the help of the allready known method

<?php var_dump($item); ?>

we first display all entries of the corresponding article object. This way, we can easily select the entries that are relevant for the development of the desired layout. In addition, we use the familiar method for outputting and mapping custom field content to integrate the article background colour as an inline style. The result is roughly the following structure:

 

slides 3

Let's now quickly break down the code:

slides 4

All article-items are located within a container, which serves as a slider-container for our Tiny-Slider-Script. Within the container, we render all posts as child elements of the container through a foreach loop. 

In addition to some classes, a unique ID is assigned, which makes it possible to uniquely identify the slider. Without the assignment of a unique ID, it would subsequently not be possible to display several slider instances on one page because there is no unique selector available.

slides 5

The markup of the actual items is relatively simple. In addition to the text and image content, we also output the colour value defined in the custom field "Backgroundcolor" as the inline style of the corresponding post container. This way we achieve a nice effect when changing the slides on our page.

 

As you can see, with the help of template overwrites and custom fields, it is possible to implement even complex layouts without any problems on the basis of the Joomla! core functionalities and without third-party extensions.

With a view to the performance of our website and the introduced core web vitals, we then add the width and height attributes of the image to avoid a layout shift. To do this, we add the following code:

slides 6

To do this, we first store the dimensions of the image in an array and then output them in our markup.

Done, we have added a slider to the start page based on the posts-news module.

More case studies - create a second layout for mod_article_latest

Following the already known pattern for creating overwrites, we now create the last missing overwrite to display the content on our start page. First we create another copy of the standard Joomla output for the module „ Articles -  Latest" and name the file according to our wishes.

morework 1

Then we modify the markup in such a way that we are able to create the required structure for our content and assign the layout we created to the module.

morework 2

Done, the homepage of our fictional web agency is ready. We have learned how to create additional layouts for components and modules and how to expand them flexibly and creatively with custom fields.

Overwrites are, as already described in part 2 of our tutorial, the most important tool when building individual Joomla templates. Once you have mastered this tool, there are no limits to your creativity - so it's worth becoming familiar with overwrites.

We hope that this part of our series will also give you an exciting insight into the construction of individual Joomla templates. Part 4 of our series continues with the team page.

If you have any questions or suggestions, we will of course be happy to help you via email or social media. Until then, have fun trying it out.