Community @ The Turning Gate

Works great in French but for some reason, not in English. No big deal, won't lose any sleep over it.

Thanks Rod.

P.S. I guess that from now on, it's gonna be the new forum platform. See you there.

Thank you for the kind words, Matthew. I hope I get to finish this "labour of love" so to speak. And, in the process, I'll probably be in touch through the Forum in order to straighten me out on some of the finer points of web publishing with Backlight.
Rod, Daniel, Ben and yourself have been instrumental in getting this big bird off the ground. I can't thank you enough!

I am using Safari 13.1 on a MacPro running High Sierra. I cleared the browser cache twice. Still the same display. I guess it must be a local problem then. Looks like this:

I think I may have found the culprit in "settings for this web site":

Both top items where checked. Un-checked them and refreshed the page. Voilà!

Hope this is a viable solution.

Good to know I am not alone!

Cheers

I am using this CSS I lifted from another site I designed. I adapted it to control these thumbnails:

/* album-set thumbnails */
.the__albumSet figure {
position : relative;
border-radius : 1px;
box-shadow : 4px 4px 4px rgba(0, 0, 0, 0);
height : 185px;
width : 320px;
}
/* album-set thumbnail border hover effect */
.the__albumSet figure {
padding : .1rem .1rem;
border : rgb(0, 0, 0) solid 1px;
background : transparent;
font-size : 0.6rem;
border-radius : 2px;
}
.the__albumSet figure:hover {
cursor : pointer;
background : rgb(206, 196, 182);
color : black;
}

Notice I set the thumbnail height to 185px and the width to 320px. That's because I want a 16:9 ration (this being a cinematographer's site). If you calculate, 16:9 should come to 320x180px. The extra 5px is used so that I have a symetrical border on hover in the Fr. But it creates a 1px grey line in the En. I'm still playing around the CSS to find the offending line, if any.
Also, these thumbnails should be ICONIC. I do not wish to have titles under the thumbnails. However, the space for a title is still there.

- 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.

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.

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.

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!