I’ve actually come up with a shorter version.
The company I’m at has six languages to switch between, but just add/remove in the “codes” array as necessary.
This is for a dropdown menu, which displays the current language with the flag of that language (but you can delete that) as the item to hover on to show the dropdown. It then adds as many list items as you have languages to the dropdown, with the appropriate href, language name, and flag generated.
*Edit: was able to cut a line out of this:
{% if content.translated_content|length %}
<ul class="dropdown menu" data-dropdown-menu>
<li>
{% set currLang = locale_name(locale) %}
{% set codes = {'English': 'en', 'Español': 'es', 'Deutsch': 'de', 'Français': 'fr' ,'Italiano': 'it' , 'Nederlands' :'nl'} %}
<a class="lang-select" href="#"><img class="lang-flag" src="[our assets url]/{{codes[currLang]}}-flag.png">{{ currLang }}</a>
<ul class="menu desktop-lang">
{% for key, val in codes.items() %} {% set URL = "/"~content.translated_content[val].slug || val %} <li><a class="lang-option" href="{{ URL }}"><img class="lang-flag" src="[our assets url]/{{val}}-flag.png">{{key}}</a></li> {% endfor %}
</ul>
</li>
</ul>
{% endif %}
It looks like this on our site:
