multi language support

Daniel Leu · 2020-05-15 00:54:28

aebolzan wrote:

rod barbee wrote:
Agustin,
I see that you've uploaded the css. There's a syntax error. You have:
html[lang="es"].fa-globe:before{
   content: "ES";
}
 
html[lang="en"].fa-globe:before{
   content: "EN";
}
There needs to be a space before .fa-globe. Change the code so it looks like this:
html[lang="es"] .fa-globe:before{
   content: "ES";
}
 
html[lang="en"] .fa-globe:before{
   content: "EN";
}
still not working....any ideas?
Agustin

I see that it is working now for you, Agustin

pideja · 2020-05-15 01:00:18

The captions under the video clips are coded this way:

<div data-lang="fr"> 
<center>HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden </center></div>

<div data-lang="en"> 
<center>A GOOD LIE<br>Feature film by Shawn Linden </center></div>

as seen here: https://pideja.ca/marco/productions/01-histoire/

Notice that the French version is off to the right but should be centred, like the English text.

Same code, different result.

UPDATE: I just noticed that if I put the English code over the French, it is this text that will skew to the right. Am I making sense here?

Last edited by pideja (2020-05-15 01:22:06)

aebolzan · 2020-05-15 01:06:02

Daniel Leu wrote:

I see that it is working now for you, Agustin

seems that I am in another channel I don't see any change in my PC, still the globe!

Agustin

UPDATE!!: I see the change in my IPad but not in my Windows PC!, or the Android mobile...so there is some kind of issue related to the operating system

Last edited by aebolzan (2020-05-15 01:12:11)

Daniel Leu · 2020-05-15 01:41:18

aebolzan wrote:

Daniel Leu wrote:
I see that it is working now for you, Agustin
seems that I am in another channel I don't see any change in my PC, still the globe!
Agustin
UPDATE!!: I see the change in my IPad but not in my Windows PC!, or the Android mobile...so there is some kind of issue related to the operating system

I think it is just a caching issue where the browser hasn't updated your latest CSS changes yet.

aebolzan · 2020-05-15 02:14:12

Daniel Leu wrote:

I think it is just a caching issue where the browser hasn't updated your latest CSS changes yet.

YOU ARE RIGHT!...I was using Opera....now I changed to Chrome and everything goes fine (although Opera still shows the globe!) ...thanks!

Agustin

Update...Opera is OK now, I cleaned the cache....

Last edited by aebolzan (2020-05-15 02:20:59)

Daniel Leu · 2020-05-15 02:41:23

rod barbee · 2020-05-15 03:05:29

pideja wrote:

The captions under the video clips are coded this way:
<div data-lang="fr"> 
<center>HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden </center></div>

<div data-lang="en"> 
<center>A GOOD LIE<br>Feature film by Shawn Linden </center></div>
as seen here: https://pideja.ca/marco/productions/01-histoire/
Notice that the French version is off to the right but should be centred, like the English text.
Same code, different result.
UPDATE: I just noticed that if I put the English code over the French, it is this text that will skew to the right. Am I making sense here?

<center> is deprecated html5. Instead, use inline styling:
<div style=“text-align:center:” data-lang=“en”......

not sure if using deprecated html is causing the problem but it would be best to eliminate that first

pideja · 2020-05-15 03:16:05

I changed the code to

<div style=“text-align:center:” data-lang=“fr”> 
HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden </div>

<div style=“text-align:center:” data-lang=“en”> 
A GOOD LIE<br>Feature film by Shawn Linden </div>

Now I have no text under the video!

pideja · 2020-05-15 03:24:30

Here is a strange one. I tried the code suggested, but no text appeared. Then desperate, I reverted to the previous code but removed the offending <center></center>

<div data-lang="fr"> HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden</div>

<div data-lang="en"> A GOOD LIE<br>Feature film by Shawn Linden </div>

. You would think that both Fr and En text would be aligned the same. But no: the Fr side is to the right and the En side to the left!

Daniel Leu · 2020-05-15 03:24:40

Look at the quotes you were using! You need a plain text editor!

rod barbee · 2020-05-15 03:51:55

your inline styling is a bit messy:

<div style=“text-align:center: data-lang="fr"> HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden</div>
<div style=“text-align:center: data-lang="en"> A GOOD LIE<br>Feature film by Shawn Linden </div>

You've still got the wrong style quote mark (slanted) and the css is written wrong, it should end with semi-colon followed by another quote mark:

<div style="text-align:center;" data-lang="fr"> HISTOIRE À FAIRE PEUR<br>Long métrage de Shawn Linden</div>
<div style="text-align:center;" data-lang="en"> A GOOD LIE<br>Feature film by Shawn Linden </div>

pideja · 2020-05-15 04:03:06

Maybe the quotes are slanted because my system is French. I tried using ATOM, SUBLIME TEXT and BRACKETS as well as writing directly in Backlight.
So, I copied the code Rod sent and...the French text is to the right but the good news is, the English text is centred.

Last edited by pideja (2020-05-15 04:03:21)

rod barbee · 2020-05-15 04:09:00

if you copy slanted quotes into a text editor, they will remain slanted. you need to delete slanted quotes and just type in new quotes. Those should be straight.

rod barbee · 2020-05-15 04:16:44

the reason that the FR text is floating to the right is lower is because of this rule in your custom css:

/* contact page */
.the__copy > .content > :first-child {
    float: right;
    margin-top: 40px;
}

which is apparently just for your contact page.

I'd suggest making that rule specific to the contact page so it doesn't affect other pages:

.slug-contact .the__copy > .content > :first-child {
    float: right;
    margin-top: 40px;
}

pideja · 2020-05-15 04:22:11

Re-wrote the code in Visual Studio Code. I inspected the quote marks with a loupe and they are as straight as they can be and yet, still the French text is to the right and the English text is centred!
As a matter of fact, the French code is above the English code.
But reversing this order, the English code line on top will generate English text to the right and, you guessed it, the French text dead center.

So, it's gotta be something else.

Last edited by pideja (2020-05-15 04:22:50)

rod barbee · 2020-05-15 04:23:12

see my post above.

pideja · 2020-05-15 04:54:34

I had not seen your previous post, sorry. I also had seen that bit of CSS but did not know how to make it specific.
I guess it's part of learning as you go, or as the French would say "sur le tas"!

It works fine now. Thanks

pideja · 2020-05-15 05:41:09

As for the album titles, I placed this code in the Album Title box of the Album:

<div data-lang="fr">UNE HISTOIRE À FAIRE PEUR</div> <div data-lang="en">A GOOD LIE</div>

All the code shows up in the title.

rod barbee · 2020-05-15 05:41:35

That feature has been a part of Backlight for a while now. I just wrote a post about it, in fact
https://ttg-tips-and-tricks.barbeephoto … -your-css/

pideja · 2020-05-15 06:18:29

I think I correctly identified the album set template but I'm not too sure how to use this. My album-set identifier is
marcogalleryset. I want to keep the thumbnail images, of course. So, for now all I have is

.album-set-template-identifier-marcogalleryset #albums

but of course, it doesn't do anything yet.
How can I apply this with the multi-language album titles?

Daniel Leu · 2020-05-15 07:02:09

Pierre, you have the labels reversed. When the page is in english mode, you really want to show 'EN' and not 'FR':

html[lang="en"] .fa-globe:before {
   content: "FR";
}

html[lang="fr"] .fa-globe:before {
   content: "EN";
}

rod barbee · 2020-05-15 07:09:28

pideja wrote:

How can I apply this with the multi-language album titles?

As far as I can tell, you can't

I don't think the album title fields can take html

rod barbee · 2020-05-15 07:12:52

pideja wrote:

I think I correctly identified the album set template but I'm not too sure how to use this. My album-set identifier is
marcogalleryset. I want to keep the thumbnail images, of course. So, for now all I have is
.album-set-template-identifier-marcogalleryset #albums
but of course, it doesn't do anything yet.

this is your css:

	/* Album titles */
	.album-set-template-identifier-marcogalleryset #album-title
	<div data-lang="en"></div>
      <div data-lang="fr"></div>

first, there is no bracket after the selector
Second, you have html after the selector, not css.

what are you trying to do?

pideja · 2020-05-15 08:09:50

- Daniel, I'm trying to get this language switch to be somewhat more direct. As it is, when showing "Fr" it's because you are on the English side and, I suppose, you want to go on the French side. I too think it's a bit convoluted. This method would work better if by clicking the FR or EN button, you could land on the corresponding language page directly. As it is, whatever language symbol appears on the button, you still have to select from a drop-down menu. So, I think I'll look for a suitable icon that would just say "language switch".

- Rod, I think you are right again about the album-titles. Not only the boxes are very small, but Backlight does not seem to take well to the HTML code. It takes it for part of the title. And that code you corrected was to be used to try to get the multi-language effect for the titles but sadly, it does not work.

Last edited by pideja (2020-05-15 08:10:16)

rod barbee · 2020-05-15 08:18:45

pideja wrote:

- Rod, I think you are right again about the album-titles. Not only the boxes are very small, but Backlight does not seem to take well to the HTML code. It takes it for part of the title. And that code you corrected was to be used to try to get the multi-language effect for the titles but sadly, it does not work.

Yep, you can't use html markup in css

Community @ The Turning Gate

#26 2020-05-15 00:54:28

Re: multi language support

#27 2020-05-15 01:00:18

Re: multi language support

#28 2020-05-15 01:06:02

Re: multi language support

#29 2020-05-15 01:41:18

Re: multi language support

#30 2020-05-15 02:14:12

Re: multi language support

#31 2020-05-15 02:41:23

Re: multi language support

#32 2020-05-15 03:05:29

Re: multi language support

#33 2020-05-15 03:16:05

Re: multi language support

#34 2020-05-15 03:24:30

Re: multi language support

#35 2020-05-15 03:24:40

Re: multi language support

#36 2020-05-15 03:51:55

Re: multi language support

#37 2020-05-15 04:03:06

Re: multi language support

#38 2020-05-15 04:09:00

Re: multi language support

#39 2020-05-15 04:16:44

Re: multi language support

#40 2020-05-15 04:22:11

Re: multi language support

#41 2020-05-15 04:23:12

Re: multi language support

#42 2020-05-15 04:54:34

Re: multi language support

#43 2020-05-15 05:41:09

Re: multi language support

#44 2020-05-15 05:41:35

Re: multi language support

#45 2020-05-15 06:18:29

Re: multi language support

#46 2020-05-15 07:02:09

Re: multi language support

#47 2020-05-15 07:09:28

Re: multi language support

#48 2020-05-15 07:12:52

Re: multi language support

#49 2020-05-15 08:09:50

Re: multi language support

#50 2020-05-15 08:18:45

Re: multi language support

Board footer