How to change Babellinks tpl into Country Flags?

33 Posts

deTuinman Reply #1, 12 years, 5 months ago

Hi,

I was looking for an solution to edit the babellinks tpl into country flags instead of text.

Maybe some already use a code like this?

Thanks

This question has been answered by Wanze. See the first response.

116 Posts

Wanze Reply #2, 12 years, 5 months ago

The way I would do it:
Name the Country-Flag images the same as your cultureKeys (en.gif, de.gif, fr.gif etc.). Then the Template for the BabelLinks Snippet could look like this:

<a href="[[+url]]" class="[[+cultureKey]][[+active:notempty=` [[+active]]`]]"><img src="pathToTheFlags/[[+cultureKey]].gif" alt="[[+cultureKey]]" class="flag" /></a>

Styling like padding etc. via the flag class

33 Posts

deTuinman Reply #3, 12 years, 5 months ago

But i can't just create snippet, because it will put

<?php

before my code when i save it

btw

#flag {
position:fixed;
top:30px;
right:30px;
}

i've put this in my style.css it has to float on the right top corner of my screen

discuss.answer

116 Posts

Wanze Reply #4, 12 years, 5 months ago

Hi deTuinman,

You don't have to write a Snippet. Just put the TemplateCode in a Chunk, let's say "MyBabelTpl".
Then call the BabelLinks Snippet with this template:

[[BabelLinks? &tpl=`MyBabelTpl`]]

This Tpl will be used for every language you have set up. To place them all on the right top corner you can use a container and call the Snippet inside:

<div id="flag">[[BabelLinks? &tpl=`MyBabelTpl`]]</div>

To style a class in css, you must use a dot in front of the nam, the "#" Symbol is to reference ID's.

33 Posts

deTuinman Reply #5, 12 years, 5 months ago

thanks learnfull and the perfect solution!

151 Posts

sitsol Reply #6, 11 years, 11 months ago

I have a familiair problem: http://forums.modx.com/thread/77294/babel-translation#dis-post-426758

Thx in advance for the help.

Answered How to change Babellinks tpl into Country Flags?