Bilingual site

This site: https://nathaliemoliavko-visotzky.com/ is an OKAPI bilingual site using two separate sets of pages each accessible by selecting Fr or En on the top pallet of the portal page.
Now I am attempting two things: upgrading to PANGOLIN and simplifying the structure by building just one set of pages but using the language selector available for the top pallet.
But, because this is an upgrade and I want to maintain the existing Okapi site online until I’m ready to switch over, I’m having navigation issues. I’ll get to that later if it’s still an issue.
First, should I build templates or pages (based on the basic template) in order to create GALLERIES, ABOUT and CONTACT pages?

So, it seems I’ll have to address the navigation issue now.

I created two pages: a “bio” and a “contact” page. Since they are to be accessed from the TEST portal page, in the menu set I set the target for each to
PAGE NAME <div data-lang="fr">bio</div><div data-lang="en">bio</div> LINK TO: test_bio and PAGENAME <div data-lang="fr">contact</div><div data-lang="en">contact</div> LINK TO: test-contact
Obviously, this does not work.

the text inside the FR div needs to be written in French.

1 Like

You’ll need album and album set templates no matter what.

Do you have pages with those slugs?
And why do you want pages with those slugs? Why not just create the contact and bio pages?

I put both French and English text on the “test_bio” page. I use the line
<div data-lang="fr">bio</div><div data-lang="en">bio</div> at the top of the text, in the PAGE COPY>Main Copy section for the language selector. I also use that line in the menu set as the Name and Link to Page>test_bio. There is no text yet on the Contact page.
But I can’t see the result on the test_bio page because the navigation is off.
So I think I’ll have to create templates for the bio (about) gallery and contact pages.

are you trying to do this on Okapi based pages?
I’m confused about what you’re trying to do

OK, and before I get confused also: the original site is OKAPI https://nathaliemoliavko-visotzky.com/. Actually, these are two parallel sites in each of the two languages.
I am upgrading the site to PANGOLIN and using the language selector. For now the URL for this project is https://nathaliemoliavko-visotzky.com/test. So, the pages I refer to are for the PANGOLIN pages/templates in development. These are called “test”, “test_bio”, “test-contact” and “test-gallery” When the new PANGOLIN site is completed, I will re-assign the proper URLs.

The idea for the menu navigation comes from https://marccharlebois.com/
witch, I designed a few years ago, also as an upgrade from OKAPI. Here the menu set is built using as the NAME <div data-lang="fr">GALERIE</div><div data-lang="en">GALLERY</div> and the Link to Page is GALLERY. That’s because there is no proper HOME page. But it works.

On the bio page https://nathaliemoliavko-visotzky.com/test-bio, using the language selector, I can see the French text but alas, not the English text. Both texts are in the same PAGE COPY/Main copy box and both have the switch <div data-lang="en"> and <div data-lang="fr">

You have to close your divs!

<div data-lang="fr" style="text-align: justify"> 
...
</div>  <!-- End div data-lang="fr" -->

<div data-lang="en" style="text-align: justify"> 
...
</div>  <!-- End div data-lang="en" -->

And you can add your style attribute to the same div where you have the language selector.

2 Likes

Many thanks, Daniel

Any idea how to center the tagline in the Masthead? Right now, I’m using…
<h4 data-lang="en">cinematographer</h4> <h4 data-lang="fr">directeur de la photographie</h4>
You can see it here: https://nathaliemoliavko-visotzky.com/test-bio/

Have you tried the title/logo alignment control in the template?

Thanks Rod. I should have seen this.

That language selector button: it’s correctly placed on the Contact page (top right of the page) but on the Home and Bio pages, it’s to the left of the navigation.

Your contact page is using a different page template. Check the settings in that template or assign the contact page template to the other pages

Since the Contact page template is correct, I tried comparing side-by-side, the settings for the Contact page template with those for the Home page. All settings have been checked and made similar. But, no cigar.
Is there a problem if I assign my Home page with the Contact page template?
By assigning the Home page to the Contact page template, it works fine. There still some slight shifting when going from Home to Bio to Contact. And the nameplate seems to contract a bit on the Bio page. But progress has been made!

Thanks Rod.

No, that’s the whole point of using a template. Make one and apply it to all pages and album and album set templates for a consistent look.

The shifting you see is because of the length of the page content invoking the scroll bar.

The difference in the two settings was likely in the Top Pallet Text-align setting

One last thing for today:
On the original OKAPI contact pages ( https://nathaliemoliavko-visotzky.com/fr/contact/ ) or ( https://nathaliemoliavko-visotzky.com/en/contact/ ) there was a button leading to a pdf file.
I would now like to insert that button on the PANGOLIN Bio page. I can place the pdf logo on the page, but it escapes me how to link back to the actual file.

This is the code I’m trying to use on the bio page:
<a href="href:nathaliemoliavko-visotzky.com/backlight/custom/pdf/CV_2021-Fr.pdf"> <img src="https://nathaliemoliavko-visotzky.com/backlight/custom/img/CV.png" alt="CV" title="image or pdf title" class="aligncenter"> </a>
After I get this link to work, I will have to figure out how to switch from the Fr to the En language.

UPDATE: I got it! I now have the pdf logo and the correct language pdf file installed!

I don’t know what happened: the English text, as well as the pdf logo that is the link to the English CV, have disappeared! It was working but now…nothing.

there are two problems I see.
The first one is the same one you had before: you’ve not correctly closed the divs. Before you start the div for the pdf download, you need to close the div around the main text. The closing div is missing for both languages.

Second, none of your inline styling has a semi-colon at the end of the declaration.
Instead of style="text-align: justify" it should be style="text-align: justify;"
The semi-colon needs to be added to all your inline styling

Thanks a bunch, Rod.