Chapters

11 Chapters | 45:05 |

01

Installing the Translation Component

4:49
02

Localized Routes

5:07
03

Create a Language Switcher

4:02
04

Translating Content

4:19
05

Translation "Keys"

4:29
06

Placeholders and Pluralization

3:17
07

HTML in Translations

3:24
08

Debugging & Linting Translations

3:35
09

`translation:extract` Command

3:33
10

Translation Providers

4:09
11

Pushing & Pulling Translations

4:21

> Symfony 7 > Bonjour-> Hello-> Hola: Translate your Site

Buy Access to Course

11.

Pushing & Pulling Translations

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Our "Space Bar" project on Crowdin is all set up and configured for our app's locales. Let's push up our translations!

At your terminal, run:

symfony console translation:push

Ok, all our enabled locale's translations are pushed up, but of course, only English has any.

Jump back over to Crowdin and refresh... Doesn't look like anything changed, French and Spanish are still at 0% translated.

Automatic Translations

Click "View Strings". Here we can see all our English translations on the left. On the right, we have the French and Spanish versions, which are empty. If you don't see our alternate locales, click "Languages" at the top, select them, and click "Apply".

If you have a translation team, you can invite them to this project, and they can start filling in the missing translations!

My translation team is off planet on leave... but we can automate the translations with Crowdin's suggestions feature. Then my team can review when they return.

Select the empty "French" input for the first string. This panel on the right shows suggestions from various translation engines. These all look pretty much the same, so hover over this one and click this "Disk" button to apply it.

Sweet! The French translation for "Local Asteroids" is now filled in and it auto-switched to the Spanish input. Do the same for this one.

Now it jumped to the next French input - "Apply" this suggestion. Hmm, looks like Crowdin is telling us there's a spelling mistake... I'm going to just go with it as is. This is a good spot to note that with automatic translations, you should always have someone fluent in the language review them. Also, with translations, context matters, and these small text snippets often lack this. For instance, expressions like "The man on the moon" might be translated literally and not make sense in the target language.

There's probably a way to bulk-apply these suggestions, but I think Crowdin is designed to encourage manual review. I'll quickly go through and apply the rest of the suggestions. Notice how it knows not to translate the placeholders?

Saving and Pulling Translations

Looks like this is all auto-saved so just hit the "back arrow" to return to the project dashboard. Awesome, 100% for both languages! Time to pull them back to our project!

Head back to your terminal and run:

symfony console translation:pull --domains=messages --format=yaml --as-tree=3

When we pushed, it knew to push all domains, but for pulling, you need to specify the domain. We want them in the YAML format, and the "as-tree" option will indent the translations for us.

Green means good! Let's check them out!

Back in your IDE, in the translations directory, messages.fr.yaml was updated and a new messages.es.yaml was created. Open them up! Oh yeah, sweet, sweet translations!

            Copy Code

                        9 lines
            |
            translations/messages.fr.yaml
        
            base:
        
                local_asteroids: 'Astéroïdes locaux'
        
                footer: 'Fabriqué à partir de %heart% par les gars et les gaux à %link%'
        
                weather: Météo
        
                journal: Quotidien
        
            article:
        
                show:
        
                    comments: '1 commentaire| Commentaires %count%'

            Copy Code

                        9 lines
            |
            translations/messages.es.yaml
        
            base:
        
                local_asteroids: 'Asteroides locales'
        
                footer: 'Hecho con %heart% por los chicos y gales en %link%'
        
                weather: Clima
        
                journal: Diario
        
            article:
        
                show:
        
                    comments: '1 comentario|%count% comentarios'

Testing Your Translations

Moment of truth! Switch back to our app and change the language to "French". Awesome! The menu is French, and if we scroll down, here's the French footer!

Switch to Spanish, menu's Spanish, footer's Spanish, nice!

You can repeat this push, translate on Crowdin, and pull process, over and over as you add more translations. Crowdin will keep track of what you've already translated, so you can just focus on the new strings.

And that's a wrap for the basics of translations with Symfony, but you can certainly dive deeper.

UX Translator Component

For instance, if you need translations in JavaScript, there's a Symfony UX Translator component. You manage your translation files like we've shown here, but can also include the keys in your JavaScript files. Neat stuff!

Database Translations

There's a big space cat in the room that we haven't really addressed yet: Database translations... As I said earlier, Symfony's translation component doesn't handle database translations. We'll need to rely on a third-party solution for that. A popular one is this Doctrine Extensions package. It has a "Translatable" behavior that allows you to translate your entities. There's also a Symfony Bundle to wire it all up.

It works just fine, but can be a bit heavy and complex. Thinking out loud, creating a new, modern bundle for translating Doctrine entities would be an awesome addition to the Symfony ecosystem!

Alright, 'til next time! Happy coding!

2 Comments

Sort By

giorgiocba 1 month ago

After taking this course, I still don't quite understand its meaning.
Nowadays, all popular browsers (Chrome, Firefox, etc.) have automatic translation of the entire page built into their menus (not just titles or footers, as in this course).
I'm tempted to ask for my money back; it was a disappointing course.

| Reply |

kbond SFCASTS giorgiocba 1 month ago edited

Hey @giorgiocba,

I'm sorry you didn't find this course useful. You're right, all modern browsers support translation natively and I'm guessing there's some browser extensions that improve these translations further.

Just a personal anecdote about this: I worked for a company that required French translations (in Canada, we're required to provide both English and French for all content). I suggested exactly what you did: letting users use the native browser tools. After some digging, we found it wasn't good enough (in Canada). We needed "real" translations. We also had generated PDFs and using the browser to translate wouldn't work here.

I do still feel that the Translation component is a good tool for your Symfony toolbelt - even if you don't require it today.

--Kevin