Bilingual site

Backlight Customization
#42

To avoid this, I always use the same browser to log into Backlight. The other browsers are only used to verify visuals.

3 Likes
#43

I am trying to have bilingual titles on the Gallery thumbnails…
This code:

<div data-lang="fr"><p>LE RÈGNE DE LA BEAUTÉ</p></div>

<div data-lang="en"><p>A EYE FOR BEAUTY</p></div>

just will not show as intended. I put in the Album Title of the Base Settings of the Album. Tried it in Lightroom and directly in Backlight to no avail.
https://nathaliemoliavko-visotzky.com/galleries/

#44

you can’t use html in title attributes. As you can see, it’s just rendered as written.
The only option I can see is using both languages in the album title field:
French title / English title

#45

If there is no other option, then so be it. Just hope I won’t have to truncate long titles.
But it would be nice to be able to have separate titles.

#46

Or is it possible to have two lines for the thumbnail album title?

#47

No, not in the same Title field.
But I think you can also use the Description field in the iconic layout

#48

I am trying that right now but although both titles can be included, the compromise on design is important.
Do you know why we can’t use HTML in the Base Settings?

Alternatively, is it possible to have Iconic thumbnails without titles?
That would solve the problem. All info would be contained on the theater page where I can have bilingual-friendly info.

#49

No html in the titles because the information is being placed in the img element’s title attribute. The content of the attribute is contained in quote marks, which means it’s displayed as written.

You can eliminate the titles all together with custom css.

#50

Thanks Rod

#51

I am now using the DESCRIPTIVE style of thumbnails. The maximum width is 250px. But my actual images are all 954px wide. How can I get a larger image within that 250px box?

#52

Thumbnail max width in the Descriptive layout is 500px

#53

I am aware of this. But, I’m trying to size the image relative to the (black) box.
As a matter of fact, at the page width of 1920 px and breakpoint for this width set at three columns, from 300px to 500px, I always get three columns and the image is small relative to the background. Are there options such as fit or cover for these thumbnails?

UPDATE: I settled (for now) on an iconic page with larger thumbnails capable of handling more text.

Thank you, Rod.

#54

The Galleries page is looking nice.
If needed, you can always change the size of the font used to make room for more text. There’s a setting for that in the template.

#55

Thanks for the kind words, Rod. I can now consider this “first draft” of the upgraded site completed. In the days to come there will be a revision of everything before definitely going online. Only then, will I take down the Okapi version.
Thanks to you everyone who gave me help and solace on this project.

#56

One thing that bothers me is tha Instagram icon I placed at the bottom of the bio page. I want it aligned with the Acrobat icon to the left of it. It looks good at most screen sizes but at below 640px the Instagram logo is much lower. I could use CSS but I can’t find the correct class or identifier.

#57

the page gets very narrow at mobile sizes. I’d fix that first. Looks like lots of left/right padding in the page template.

#58

The reason that the Instagram image is dropping low is because it’s getting pushed down by all left/right margin applied to the PDF and the Instagram images. Combine all that margin with the padding on the content area and there simply is no room for both on the same line as the browser width gets narrower.
Your html inline styling contains all that margin.
So in addition to perhaps changing the left/right padding settings, you might consider reducing margins.

Also, check your html. Much of your in-line styling is missing the semi-colon at the end of the rule. For example:
"text-align: center" should be "text-align: center;" and “margin: 0 60px” should be "margin: 0 60px;"

(it’s that margin that’s actually messing things up. Seems like you would only need margin-left for the pdf image and margin-right for the Instagram image)

#59

The 200px padding is killing your layout. Set a max-width: 800px or so to restrict the width your your text.

You might want to add a max-width constraint to the div for the text with the PDF and Instagram icon as well. Margin-left/right will center the div:

<div data-lang="fr" style="text-align: center;margin-left: auto;margin-right: auto;max-width: 400px;">...</div>

#60

That solved that: the margin-left and margin-right, both set to “auto” seem to be ok for the pdf and instagram icons.

#61

For some reason, the masthead and text on the bio page shrinks all through the 640px mark and the expands to almost fill the page, As a matter of fact, all pages act like that. Maybe I set the break point to 640px! Looking for that setting…

UPDATE: changed the break point to 1440px. Looks better at small screen sizes except for the language selector.