Multilingual using Joomla fields and pages

[parthlawate]

An opportunity to build a pages site has come up for Govt. Will have pretty high traffic.. The site itself is very small.. Just 3-4 pages as of now.. but it will scale up.. .

It will have to support for 13 languages at the outset . Our plan was to manage content using Joomla fields & manage translations there & manage the frontend with Pages..

Can you guide us on the best way to achieve this ?

Cc @manojLondhe

[johanjanssens]

Hi Parth, thats great news. I don't see any issues why you wouldn't be able to pull this off.

Multi-lingual

Pages offers support for multi-lingual content handling through the Joomla extension. You can filter content based on the language you set for the content. Pages also has a special lang route constraint to handle language codes in url's. This makes it very easy to setup a multi-lingual site.

Example

---
route: /[lang:language]
collection:
    model: ext:joomla.model.articles
    state:
        published: 1
        category: [foo, bar]
        sort: title
---

Here you will get all the articles from category foo or bar that are published and sort them by title, the language state is retrieved from the url through the route definition: /[lang:language]

More info in following PR's

• Joomla extension: Joomla extension #363
• Lang route constraint: Add route constraint for language codes #391

Caching

Pages is build to deliver superb performance out of the box. This works best if you use Pages to generate the frontend, and not rely on a decorating Joomla components or using Joomla modules.

If performance matters it's also advised (but not required) build your own theme. Joomla templates come with a lot of bells and whistles that will reduce your final page loading performance in the browser. By doing a custom theme you have full control over the css, js, fonts etc you are loading.

Handling menu items

For your menu items you have 3 options:

1. Hardcode them
2. Use pages and pagescollection
3. Use Joomla dummy menu items and the menus(alias for ext:joomla.model.menus) collection

In case of 3, if you do wish to use the Joomla menu items to create dummy items for easy management through the Joomla administrator, it's advised to use the ext:joomla.model.menus collection to render the menu items. You can find a partial snippet how to do this here: #601

If you don't use a Pages collection to handle the rendering the Pages smart cache will not be able to know the content of your page has changed, and then you get the issue that your page isn't fully updating when you revalidate the cache.

Setting up caching

1.Smart cache

Turning on the smart http cache, this will ensure that Pages are not regenerated for each request. Pages will cache the generated html internally and revalidate the page based on the cache settings you use.

Revalidation is the process of checking if the data on the page is still valid, if the data had changed, for example because you edited the article on the page, Pages will regenerate the page from scratch.

You can define how long a page is considered valid before its revalidated, or you can configure the cache in such a way that the page is revalidated for each request. A revalidation request takes +/- 100msec.

2. Static cache

Turning on the static cache means that Pages will store the html as a static page. You will add a few rewrite rules to Apache to allow it to serve the page bypassing PHP.

With static cache you get the same performance as a static site. You can run this on a very basic VPS, since PHP will not get hit and only Apache will be used to serve the site.

Using the static cache requires some additional setup with Apache rewrite rules and extra steps to update the static cache. Since PHP is not being used anymore once the Page is generated you need a way to update the static cache. You can do this:

• manually: simply by doing a browser reload or a hard reload, this will bypass the static cache
• automated: using Mason, which you can run locally or even automated as a Github action or using another process.

3. CDN cache

To further improve your site performance you can implement a CDN cache, with a CDN cache your server will be hit even Think about this as having your site running statically on 100+ edge server all over the world.

Using a CDN cache also requires a bit of extra work to make sure the cache is properly updated and Pages can receive revalidation (browser reload) and regeneration (browser hard reload) requests. How this works depends a bit on the CDN you use, and the config options it has. For some CDN's it will work out of the box, while other require extra config.

We are using CloudFlare CDN and I have build a CloudFlare Worker that can handle this. The worker makes the CloudFlare CDN smarter and integrates it with Pages to get the best possible performance.

Performance

If performance is a key consideration you can further optimise PHP and Pages:

Running Pages standalone

To be able to squeeze every bit of performance out of Pages you can consider running it standalone. This means that Joomla no longer needs to be loaded and it makes the overall setup +/- 3x faster on my initial tests. Pages revalidation requests go down to 40msec, page generation becomes +/- 3x faster.

See also: #750

Tweaking PHP for high-load

To get the best performance out of PHP you can further tweak PHP-FPM, for high load scenario's, and tweak Opcode caching for better performance.

[parthlawate]

Thanks a lot @johanjanssens We have got quite far on this now.. It seems there is an issue however where the language related class that should be set is not getting set @manojLondhe can you give an exact example ?

[manojLondhe]

The language() template helper function always returns "en-GB". So, we can't add lang attribute to html tag.

<html xmlns:og="http://opengraphprotocol.org/schema/" class="h-full" lang="en-GB" dir="auto" >

[johanjanssens]

Great to hear that. About the language tag, the language() template function is a callback for the getLanguage() method in the view. It returns the page language code or en-GB if none is set. See: https://github.com/joomlatools/joomlatools-pages/blob/master/code/view/trait/page.php#L43

If you do not want to set the language code through the Page there are a few approaches you can use:

1. Using the information from the route

---
route: /[lang:language]
---

If you use the above route you can do

<? $lang = route()->query['language']; ?>

To get the language code from the route. Html accepts language codes with or without region subtag, so it allows for both en and en-GB, that gives you the flexibility to use en in your URL's and set the language code that way.

2. Overriding the language()function

Template functions in pages are not fixed, you can override them in extensions. You can find the bootstrapper code here: https://github.com/joomlatools/joomlatools-pages/blob/master/code/event/subscriber/bootstrapper.php#L328

If you like to override the language()function the advised approach would be the override in the pages extension. You would add: extensions/pages/template/function/language.php

<?php
return function()
{
      //Get the language from the route, or fallback to page 
     return $this->route()->query['language'] ?? $this->language()
}; 

This wraps a custom language function around the core, you can then extend this as you see best fit. We could add a custom language()function to the Joomla extension, let me know what the code for that would best look like and happy to add it.

[manojLondhe]

thanks, approach 1 as

<html xmlns:og="http://opengraphprotocol.org/schema/" class="h-full" lang="<?= route()->query['language']; ?>" dir="<?= direction() ?>" vocab="http://schema.org/">

this works fine

[johanjanssens]

Great! I adopted the info about the function above, if you use it that way you can keep using language() function, just do

<?php
return function()
{
      //Get the language from the route, or fallback to page 
     return $this->route()->query['language'] ?? $this->language()
};