Jump to content

Multi-lingual site - slide translation

Go to solution Solved by colin.irwin,

Recommended Posts

Hi there, 

I would like to ask for your support.

I have a multilingual site:

Hungarian: https://www.teteatete.hu/

English: https://en.teteatete.hu/

On the main page I have 3 slides (3 images with Hungarian script on it).

I have prepared the English version of these slides.

I would like to make sure that once the visitor chooses English, the slides appear in English.

I spent the last 5 days contacting Weglot and Squarespace support, but they could not provide a solution for it.

Could you please help on this matter? I suppose a code injection would be the solution, but did not find a related article on the forum.

Thank you in advance for your support.

 Viki

Link to comment
  • Solution

The way to do it is to have 2 sections - one with the Hungarian language slides and the other with English language. 

Then we use css to show the appropriate section for the current language.

The following assumes that the first section contains the Hungarian slideshow and the second section has the English version

It also has a check so that both sections will appear when editing the page. 

It uses LESS notation so should be inserted into the sitewide Custom CSS area

html {
  body:not(.sqs-edit-mode) {
  &.homepage section {
      &:nth-of-type(1) {
        display: flex;
      }
      &:nth-of-type(2) {
        display: none;
      }  
    }  
  }
  
  &[data-wg-translated = "en"] body:not(.sqs-edit-mode).homepage section {
      &:nth-of-type(1) {
        display: none;
      }
      &:nth-of-type(2) {
        display: flex;
      }
  }
}

If you have any problems with this, drop me a line. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Thank you so much! I appreciate it so much!!!!

I could set it, now what I experience is that the slides are on the top of the site on the English version. 

Could you please help on how to set the slides on the same level in both Hungarian and English versions? 
 

Kind regards, 

Viki

Link to comment

Hi, 

Try this

html {
  body:not(.sqs-edit-mode) {
  &.homepage section {
      &:nth-of-type(1) {
        display: flex;
      }
      &:nth-of-type(2) {
        display: none;
      }  
    }  
  }
  
  &[data-wg-translated = "en"] body:not(.sqs-edit-mode).homepage section {
      &:nth-of-type(1) {
        display: none;
      }
      &:nth-of-type(2) {
        display: flex;
		padding-top: 160.797px;
      }
  }
}

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.