@piersg So instead of using
{% set url = '' %}
{% if request.domain is string_containing 'us' %}
{% set url = 'www.domain.nl' %}
{% else %}
{% set url = 'www.domain.us' %}
{% endif %}
I would replace this with
{% set translated_page = content_by_id(item.id) %}
replace the href on the li item with
{{ item.absolute_url }}
The href has to be {{ translated_page.absolute_url }} not {{ item.absolute_url }}, but yes.
{{item.absolute_url}} was for blog homepages, sorry if that was confusing.
Hey @piersg ,
Sorry to revisit this, just setting it live now for the client.
I have an issue on the blog listing pages. This is the code I’m using. The issue is the current language appears twice and the dropdown no longer works. It works fine on normal pages. Am I missing something?
<div class="lang">
{% if content.translated_content|length %}
{% for item in content.translated_content|sort(False, False, 'language') %}
<!-- you can set the text next to the flag here. -->
{% if item.language == 'en-us' %}
{% set name = 'USA' %}
{% elif item.language == 'nl' %}
{% set name = 'NL' %}
{% endif %}
<!-- this grabs the current lang switcher you are on, you can edit the text next to the flag here -->
{% set currLang = content.language.languageTag %}
{% if content.language.languageTag == 'en-us' %}
{% set currLang = 'USA' %}
{% endif %}
<!-- this sets the translated page URL based on content Id -->
{% set translated_page = content_by_id(item.id) %}
<!-- this is the current switch you have selected -->
<a id="lang-toggle" class="lang__option lang__option--current" href="#">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{ content.language.languageTag }}.png" width="15px" style="margin-right:5px;">
{{ currLang }} <span class="lang__chevron">›</span>
</a>
<!-- this is the sub menu of the language switcher, it auto populates once you create language variable pages -->
<ul class="lang__list" style="min-width: 6rem;">
<li>
<a href="https://www.fulfilmentcrowd.com" class="lang__option">
<img src="https://f.hubspotusercontent40.net/hubfs/8149498/en.png" width="15px" style="margin-right:5px;">GB
</a>
</li>
<li>
<a class="lang__option" href="{{ translated_page.absolute_url }}">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{item.language}}.png" alt="{{ name }} flag" width="15px" style="margin-right:5px;">
{{ name }}
</a>
</li>
</ul>
{% endfor %}
<!-- this is for the blogs, slightly different code to get the switcher to work but the only thing you need to edit is the item language -->
{% elif group.translations|length %}
{% for item in group.translations|sort(False, False, 'language') %}
<!-- this is the item language where you can change the text next to each flag -->
{% if item.language == 'en-us' %}
{% set name = 'USA' %}
{% elif item.language == 'nl' %}
{% set name = 'NL' %}
{% endif %}
<!-- this grabs the current lang switcher you are on, you can edit the text next to the flag here -->
{% set currLang = content.language.languageTag %}
{% if content.language.languageTag == 'en-us' %}
{% set currLang = 'USA' %}
{% endif %}
<!-- this is the current switch you have selected -->
<a id="lang-toggle" class="lang__option lang__option--current" href="#">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{ content.language.languageTag }}.png" width="15px" style="margin-right:5px;">
{{ currLang }} <span class="lang__chevron">›</span>
</a>
<!-- this is the sub menu of the language switcher, it auto populates once you create language variable blogs -->
<ul class="lang__list" style="min-width: 6rem;">
<li>
<a href="https://www.fulfilmentcrowd.com" class="lang__option">
<img src="https://f.hubspotusercontent40.net/hubfs/8149498/en.png" width="15px" style="margin-right:5px;">GB
</a>
</li>
<li>
<a class="lang__option" href="{{ item.absolute_url }}">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{item.language}}.png" alt="{{name}} flag" width="15px" style="margin-right:5px;">
{{ name }}
</a>
</li>
</ul>
{% endfor %}
{% endif %}
</div>
You have the current language inside the for loops that are looping over translations, so for every translation you’ll generate a new current languauge toggle. You have two languages currently (NL and en-US right?) so that’s why you’re getting current language twice. This needs to be separate/outside of you looping over translations (and I’m assuming that you don’t want a new “GB” in the lang list for each item so I’ve put that outside the loop). See if this works for you:
<div class="lang">
<!-- this grabs the current lang switcher you are on, you can edit the text next to the flag here -->
{% set currLang = content.language.languageTag %}
{% if group.language %}
{% set currLang = group.language.languageTag %}
{% endif %}
{% if currLang == 'en-us' %}
{% set currLang = 'USA' %}
{% endif %}
<!-- this is the current switch you have selected -->
<a id="lang-toggle" class="lang__option lang__option--current">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{% if group.language %}{{ group.language }}{% else %}{{ content.language.languageTag }}{% endif %}.png">
{{ currLang }} <span class="lang__chevron">›</span>
</a>
<ul class="lang__list" style="min-width: 6rem;">
<li>
<a href="https://www.fulfilmentcrowd.com" class="lang__option">
<img src="https://f.hubspotusercontent40.net/hubfs/8149498/en.png">GB
</a>
</li>
{% if content.translated_content|length %}
{% for item in content.translated_content|sort(False, False, 'language') %}
<!-- you can set the text next to the flag here. -->
{% if item.language == 'en-us' %}
{% set name = 'USA' %}
{% elif item.language == 'nl' %}
{% set name = 'NL' %}
{% endif %}
<!-- this sets the translated page URL based on content Id -->
{% set translated_page = content_by_id(item.id) %}
<!-- this is the sub menu of the language switcher, it auto populates once you create language variable pages -->
<li>
<a class="lang__option" href="{{ translated_page.absolute_url }}">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{item.language}}.png" alt="{{ name }} flag">
{{ name }}
</a>
</li>
{% endfor %}
<!-- this is for the blogs, slightly different code to get the switcher to work but the only thing you need to edit is the item language -->
{% elif group.translations|length %}
{% for item in group.translations|sort(False, False, 'language') %}
<!-- this is the item language where you can change the text next to each flag -->
{% if item.language == 'en-us' %}
{% set name = 'USA' %}
{% elif item.language == 'nl' %}
{% set name = 'NL' %}
{% endif %}
<!-- this is the sub menu of the language switcher, it auto populates once you create language variable blogs -->
<li>
<a class="lang__option" href="{{ item.absolute_url }}">
<img class="lang-flag" src="https://f.hubspotusercontent10.net/hubfs/8149498/flags/{{item.language}}.png" alt="{{name}} flag">
{{ name }}
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</div>
Also minor point but I removed the inline styling, as updating that in the future might get annoying. Add this to your global css:
.lang__option img {
width: 15px;
margin-right: 5px;
}
Thanks for this, the blog now shows EN-US instead of USA.
To change this I could target group.language?
{% if group.language == ‘en-us’ %}
{% set currLang = ‘USA’ %}
{% endif %}
Sorry, forgot the languageTag:
{% set currLang = content.language.languageTag %}
{% if group.language %}
{% set currLang = group.language.languageTag %}
{% endif %}
{% if currLang == 'en-us' %}
{% set currLang = 'USA' %}
{% endif %}
Amazing thank you so much!
{% set blog_id = module.blog %}
{% set posts = blog_recent_posts('{{ module.blog }}', 3) %}
{% for post in posts %}
<a href="{{ post.absolute_url }}" class="card blog-single">
{% if post.featured_image %}
<div style="background-image:url('{{ post.featured_image }}'); background-size: cover;
height: 184px;
background-repeat: no-repeat;
background-position: top center;"
loading="lazy">
</div>
{% endif %}
<div class="card-body d-flex flex-column align-items-start">
{% for topic in post.topic_list|first %}
<span class="tag">{{topic.name}}</span>
{% endfor %}
<h3>{{ post.name }}</h3>
<p>{{ post.meta_description|safe|striptags|truncate(60, False, '…') }}</p>
{% set initialPostWords = post.post_body|striptags|wordcount %}
{% set calculatedPostWords = (initialPostWords/100) * 100 %}
{% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
{% set number = finishedPostWords|round %}
{% if number < 1 %}
{% else %}
<div class="d-flex align-items-center read-time">
<img src="https://f.hubspotusercontent40.net/hubfs/8149498/clock.svg" loading="lazy" width="18" height="18" alt="clock"/> {{ finishedPostWords|round }} min read
</div>
{% endif %}
<button class="no-style cta pointer">Read the full story</button>
</div>
</a>
{% endfor %}
@piersgYou wouldn’t happen to know how to get the language variation for recent posts would you?
@ScottD22 What do you mean by language variation? What language the recent post is written in? Or if the recent post has a translated version?
@piersgWe have translated the blogs on a client site and I have a custom module ( code above ) on the homepage of the site which grabs 3 recent blog posts. Works great on the www.domain.us version of the site. We also have www.domain.nl site and the module still brings in the english version of the blogs even though I have a selector to switch to the blog ID to the dutch blog.
How can I use the code above to bring through the translated versions of the posts for the dutch site? Thank you. I’ve tried content.translated.content.absolute_url etc etc but that doesn’t seem to work.
@ScottD22 Assuming that module.blog gives you the id correctly, i.e. a number as a string, you just need to change your blog_recent_posts to (no apostrophes, no delimiters):
{% set posts = blog_recent_posts(blog_id, 3) %}
I tried this but it still outputs the English translation even though the blog ID matches the dutch ID
This is what I’ve just tested with and it works, giving me the three most recent posts of whatever blog is selected in the editor.
{% set blog_id = module.blog_field %}
{% set posts = blog_recent_posts(blog_id, 3) %}
{% for post in posts %}
{{post}}
{% endfor %}
Are you sure your blog field’s id is ‘module.blog’ and not ‘module.blog_field’, which is the default, and that you have
(blog_id, 3)
or
(module.blog_field, 3)
and not
(‘{{blog_id}}’, 3)
?
FIXED.
@ScottD22 Cool 
what was it in the end?
I deleted the blog field, re-added it with out the brackets and quote marks and it worked.
Great, glad we got it sorted!
Thanks for all your help piersg, I owe you a beer.
@piersg is owed a lot of beers by a lot of people 
