Hi, hope someone can help me.
What is the best way to add icons with links to other versions of the blog.
What kind of code snippet should I use and where is the best place to put it?
Here is a illuratration of how I’m trying to get it to look like with flag icons:
and this is the code snippet on the top of the listingpage:
<div class=“bloglist-container”>
{% if topic %}
<div class=“topic-title”>
<h1>
You’re now reading more about: {{ topic|replace(‘-’,’ ')|title }}
</h1>
</div>
{% endif %}
Can you explain more about what you mean by “other versions of the blog”? Are you saying you have a separate blog for French, English, Spanish and you want to add links to the top of the page for those?
Yes, I have created Norwegian and Swedish versions that I would like to link up to the blog. (found in another post that this was the best solution for having the blog in different languages)
So, english blog links to NO and SWE and Norwegian to SWE and ENG and Swedish to NO and ENG. Using flag icons with links.
I have nothing pre-built, although I’m in the process of translating my site (I haven’t reached the blog yet), so maybe soon!
I think there are different ways of doing it and it depends on how you have the blog set up. Asumming your blogs are called ENG, SWE and NOR, for example, these should appear in the URL (www.website.com/ENG, www.website.com/ENG/post-name… etc.) so you could do something like this:
{% if 'ENG' in content.absolute_url %}
{# Code that displays SWE and NOR flags #}
{% elif 'SWE' in content.absolute_url %}
{# Code that displays ENG and NOR flags #}
{% elif 'NOR' in content.absolute_url %}
{# Code that displays SWE and ENG flags #}
{% endif %}
I’m wondering if it’s more efficient to have a loop where you can just have all three flags and exclude the one that matches the URL using “display: none”. Something like:
{% set languages = ['ENG', 'SWE', 'NOR'] %}
<div class="flags">
<!-- ENG flag-->
<a class="ENG" href="#"><img src="/link-to-ENG-flag"></a>
<!-- SWE flag-->
<a class="SWE" href="#"><img src="/link-to-SWE-flag"></a>
<!-- NOR flag-->
<a class="NOR" href="#"><img src="/link-to-NOR-flag"></a>
</div>
<style>
{% for language in languages %}
{% if language in content.absolute_url %}
.{{ language }} { display: none; }
{% endif %}
{% endfor %}
</style>
(I haven’t tested this so tweaking is probably needed).
I’m having problems getting them visable on a live page it’s induvidual who can see the flags, I’m thinking mabye it’s because of screen size as a colleauge could see the flags straight over the top left box.
I will try to test further to see how I can get it to appear on every type of screen. If anyone see anything that could be done differently regarding the placing of the code, please shout out
No problem! That link requires that we log in to your portal, but when you click on preview you should have a “Preview without display options” as well that can be shared publicly.
I can see it when I open the preview on my screen.
The only reason I can see that one wouldn’t appear is if the name of the language appears in the URL (ENG, SWE or NOR). They’re set to appear by default otherwise.
Also, I believe that code is for the Blog Listings template, have you added it to the Blog Post template as well? (Or you can create a custom module and add it outside of the two).
