Creating a Bilingual Website with Foundation and Agent Stacks

Welcome to this tutorial. First things we need to say is that you need to have an understanding of the Foundation theme/stacks for RapidWeaver, and the Agent stack. The big one here is the Agent stack, so if you have not watched it yet, please watch this video:
https://youtu.be/zclGdCoQhQ4

This is tutorial put together by Gary Wann that he shared on the Weaver’s Space Community https://weavers.space/content/perma?id=51563. We wanted to have it easily found, so we made this FAQ and just copied and pasted his instructions. We have cut or added a little here and there, but most of it is exactly as it is on the community.

Part 1

I've had a number of questions regarding my bilingual English/Spanish website www.lapisa.co.uk so I though I'd start a thread here with details of how I did this. I'm not going to put all the details here in one go, I'll start off fairly broad-brush and then get into the details as required. I'll assume a good working knowledge of Rapidweaver and the Foundation stacks but I will cover the use of the Agent and Agent URL stacks.

I'm not saying that this is the only way to achieve a bilingual website, and I'm not an expert - particularly with regard to html coding - so please correct me if you see any errors or alternative ways of achieving this.

There are effectively 3 concepts to understand here.

• The Agent stack allows you to choose what web content is downloaded (and therefore viewed) by the browser on a particular device.
• The Agent URL stack allows you to display a particular stacks on a web page by adding a 'flag' to the page URL so that it appears that you are displaying 2 different pages, where in fact it is only one page with 2 lots of information.
• The third challenge is producing a site-wide menu that also changes depending on the 'flag' that is added to the page URL.

First of all, lets see how I created a bilingual website before I started using the Agent stacks.

I effectively had 2 websites within the one domain. Every page was duplicated, with one page being in English and one in Spanish. I used a Foundation Top Bar menu with 3 top-level options. Home, English and Spanish. The Home page was really just a big banner page in English with National flags set as links to go to either the English or Spanish 'half' of the site. Under the Top Bar English and Spanish menu items, the drop-down showed all the other pages in the appropriate language. This was all functional, but resulted it a lot of duplication of content that appeared on both language pages - pictures, links, contact forms etc.

Using Agent URL, I've been able to cut the site in half and no longer have the duplicate pages in the 2 languages.

Agent URL allows me to have one page containing both English and Spanish content, and English and Spanish Top Bar menus, but ONLY ONE language is displayed at a time, depending on which language was selected by the viewer. The language section is remembered 'per session' so after making the choice, only that language is shown for the whole site, unless the alternate language is selected. Selection can be made at any time using image icons on the Top Bar menu, as these are always visible.

The site was then tided up by using the Agent stack to choose what is seen by visitors using a mobile phone, including adding links that allow the contact number to be dialled.

End of part one!

Part 2

OK, lets start with the easy bit.

See the attached screenshots. This is the site's 'Welcome' page. I've collapsed much of the content so that we can see the 2 different language stacks on the one page. Also you can't see the Top Bar menus at the top of the page - I'll come back to those later.

You can see the structure of the site on the left, only one set of pages, no duplication.

In the RW edit window, you see a site banner which is common to all pages, so that's just a Partial containing an image stack to make it easy to add to every page.

I have 2 Agent URL stacks visible in the screenshots, each containing a One Column stack, a Header stack and 2 paragraph stacks. I've collapsed the paragraph stacks so that we can see both Agent URL stacks. The top Agent URL stack contains English content and the lower one Spanish.

Looking to the right to the Inspector pane, note the settings.

• Action = Show
• Rule = URL Parameters
• Key = lang (this could be anything, but it forms part of the URL 'flag' that will decide what the visitor sees in the web browser)
• Value = en (again, could be anything, but this is easy to remember as it's English content)
• Set as default = ticked as most of my visitors will be English
• Persistance = Session (the language choice will be remembered for the whole browsing session)

Look at the second screenshot, only the Value is different sp (for Spanish, could be es if you wanted as long as you remember what you've called it) and the Default box is left unticked.

Visit the live site www.lapisa.co.uk and select the 'Welcome' page. Click back and forward between the 2 languages using the national flags in the Top Bar. See the language change and note the change in the URL depending on the language selection.

/welcome/?lang=en

/welcome/?lang=sp

You see that the Key and the Value are being added to the page URL and ONLY showing the content of the appropriate Agent URL stack

This is all that is happening on all the pages. If the page content is common to both languages - say the site banner and all the pictures, then these are added to the page using 'normal' stacks and will therefore always show no matter what language is selected. If a language selection is made, only the Agent URL stacks with the matching Key and Value will show.

So, how to choose the language and have the bilingual menu bar? We’ll look at that next post.

Part 3

If you have watched Joe's excellent tutorial video, you will have seen that the Agent URL stack can make different content visible, depending on the Key and Value added to the page URL.

In Joe's sample project, he uses a button with a link that contains the Key and Value. Our 2 parameters are:

?lang=en
?lang=sp

We could have 'normal' buttons on every page of our bilingual site, each with one of the parameters above, to select the appropriate language. I suggest that when you are setting up a page using Agent URL, start simple with just one page and 2 buttons to switch between the content. This will help to see how everything works, and to make sure it does work!

A much more elegant solution would be to have a Top Bar that appears on every page and to have the language selection in the Top Bar. Also, we need the Top Bar to appear in the appropriate language.

So, what we need is 2 Top Bars on every page, one in English and one in Spanish, but we only want to show one at a time. How can we do that, well, using Agent URL of course!

The default setting for Top Bar - Menus Area is to show the 'Rapidweaver Menu' which normally does all the hard work for us and shows all our site pages without anymore work.

However, there is another option in the Top Bar - Menu Area which is 'Custom html Menu' and if you select this, you will see the content of the Top Bar in the RW edit window will change and when you click on the Top Bar in the edit window, you will see html that can be edited. The attached screenshot is Joe's Agent demo file with a Top Bar I dropped in just to demonstrate what you might see.

So, we need 2 Top Bar menus, each with custom html to show the English and Spanish menu and we need to put each of these inside an Agent URL stack so that we only show one at a time - and we need to have the language selection choices in the Top Bar too!

Part 4

First, lets take a look at the custom html menus. Again a warning, my html coding skills employ the 'trial and error' method - make one change at a time and see what happens and hope eventually to get something that works!

All I can really say here is look at the html for the 2 Top Bars and compare them with the site structure shown on the left and with the result on the live site at www.lapisa.co.uk

Note in particular the 2 lines at the end above the 'Remove all lines' instruction. These load 'warehoused' png files, en.jpg and sp.jpg which are the 2 National flag icons that appear in the Top Bar.

Note also that all my pages are named index.php or index.html so only the path to the page is required in the custom html and not the individual page name.

Nearly there, we'll look at putting the Top Bar menus inside an Agent URL stack to finish everything off next.

Part 5

So, looking at each Top Bar menu in turn.

I've created a partial for each menu so that I can add it easily to each page, Menu En and Menu Sp.

Looking at the screenshots, the partial consists of the Top Bar inside an Agent URL. Note the Agent URL settings in the inspector - just like we did with the page content, with the Key and Value being set to lang and en/sp with the English value being set as the default.

I forgot to mention in the previous post regarding the custom html Top Bars that the image icons (National Flags) are also the 'button links' that add either ?lang=en or ?lang=sp to web page URL to show the appropriate language.

Part 6

Putting all this together and looking at the 'Welcome' page we were looking at earlier, see the attached screenshot. We have the 2 Top Bar menu partials followed by the page content we looked at earlier. The English Top Bar will show as the default, along with every other Agent URL stack that has a Key = lang and a Value = en (adding ?lang=en to the page address). Click on the Spanish icon/link in the Top Bar and every Agent URL stack with Key = lang and Value = sp will show.

That's about it, start with a simple page and build the site as you go. It can be a bit 'mind blowing' when you start to add multiple Agent URL stacks to a page above and below 'common' content and then start adding Agent stacks to tailor the site for mobile and or tablet users. Note that there are separate settings in the Agent URL and Agent stacks in the RW Inspector to allow you to preview in RW so this can get a bit confusing.

Now go forth and make your websites great!