#1 2010-08-04 22:34:36

porga
Ion Tester
From: Croatia
Registered: 2010-07-16
Posts: 164

Multilingual image manipulation

Since Ionize is multilingual by its core I suggest following improvement.

Add possibility to call image regarding which language user looks.

Why? This way If we make multilingual logo of some kind which is Image and has some text written in it on different languages (which cannot be handled through css and custom_translation, because it is "hard coded" in image, we could call different image regarding which language user is watching.

This could be interesting for designers.

Offline

#2 2010-08-05 08:56:22

toopixel
Ionize Core Team
From: Geneva
Registered: 2010-04-20
Posts: 272
Website

Re: Multilingual image manipulation

What you can do easily is adding a class to your body:

<body class="french">
<h1 id="logo">My Company</h1>

then in the CSS, using an image replacement solution, for example for the logo:

#logo { text-align: left; text-indent: -5000px; width: 200px; height: 120px; overflow: hidden; }
.french #logo { background: url(../images/logo_french.jpg} no-repeat; }
.english #logo { background: url(../images/logo_english.jpg} no-repeat; }

As other images which are not decorative belongs to the content, then Ionize handle this perfectly in the cms.

Last edited by toopixel (2010-08-05 08:59:25)


Too Pixel is a web agency located in Geneva, Switzerland

Offline

#3 2010-08-05 22:55:16

porga
Ion Tester
From: Croatia
Registered: 2010-07-16
Posts: 164

Re: Multilingual image manipulation

Thank you very much. As I said somewhere before, this little tricks must find some place in the manual.

Offline

#4 2010-08-05 22:56:51

toopixel
Ionize Core Team
From: Geneva
Registered: 2010-04-20
Posts: 272
Website

Re: Multilingual image manipulation

Hmm not really, this is purely a designer/html integrator question and skills, absolutly not related to the CMS itself.


Too Pixel is a web agency located in Geneva, Switzerland

Offline

#5 2010-08-05 23:44:09

porga
Ion Tester
From: Croatia
Registered: 2010-07-16
Posts: 164

Re: Multilingual image manipulation

If not in documentation, then in "hints book"

One question if you are still awake:

in <ion:translation term="some_term" /> I cannot include html?

Why? I have three terms that I want to position in a DIV. term1 term2 term3 (beter said split up sentence).

So I tried to use one translation term with 2 <br /> tags:   term1<br />term2<br />term2, but ir doesnt work...

This is OK and I should use three <ion:translation> or this is some error?

Offline

#6 2010-08-05 23:52:03

toopixel
Ionize Core Team
From: Geneva
Registered: 2010-04-20
Posts: 272
Website

Re: Multilingual image manipulation

Yeah I can agree for a helpful hints book, but regarding that I would say the forums and community will play their role normally when there will be more people.

About static translations, it's not a bug, they can't include html and you'll have to use 3 <ion:translation>.

What you may learn is that static terms in fact write the terms to CodeIgniter language files (which you can find in /theme/languages/). That's where snippets will be useful because they'll be able to handle html + anything you want (static translations, other tags or whatever), but having html in static translation is discussable why not.

Last edited by toopixel (2010-08-05 23:55:24)


Too Pixel is a web agency located in Geneva, Switzerland

Offline

#7 2010-08-06 11:00:53

RomanSolomatin
Ion Tester
From: Tallinn, Estonia
Registered: 2010-04-26
Posts: 50

Re: Multilingual image manipulation

To include language specific CSS file, use this example:

<link rel="stylesheet" href="<ion:theme_url/>assets/style/<ion:current_lang/>.css" type="text/css"/>

To show language specific image, use this example:

<img src="<ion:theme_url/>assets/image/<ion:current_lang/>/header.jpg" alt="<ion:translation term="header"/>"/>

Things should not be more complicated than these examples.
If they are - well, then you are probably over-thinking, in my humble opinion. ;-)

Last edited by RomanSolomatin (2010-08-06 11:03:35)

Offline

#8 2010-08-06 13:57:11

RomanSolomatin
Ion Tester
From: Tallinn, Estonia
Registered: 2010-04-26
Posts: 50

Re: Multilingual image manipulation

You can use CSS white-space property for that:

<div style="white-space: pre">term1
term2
term3</div>
porga wrote:

If not in documentation, then in "hints book"

One question if you are still awake:

in <ion:translation term="some_term" /> I cannot include html?

Why? I have three terms that I want to position in a DIV. term1 term2 term3 (beter said split up sentence).

So I tried to use one translation term with 2 <br /> tags:   term1<br />term2<br />term2, but ir doesnt work...

This is OK and I should use three <ion:translation> or this is some error?

Offline

#9 2010-08-06 14:16:31

toopixel
Ionize Core Team
From: Geneva
Registered: 2010-04-20
Posts: 272
Website

Re: Multilingual image manipulation

From a markup point of view I would say an unordered list of words <ul><li> list.


Too Pixel is a web agency located in Geneva, Switzerland

Offline

#10 2010-08-06 14:53:24

RomanSolomatin
Ion Tester
From: Tallinn, Estonia
Registered: 2010-04-26
Posts: 50

Re: Multilingual image manipulation

toopixel wrote:

From a markup point of view I would say an unordered list of words <ul><li> list.

Ok, I should write a better example:

<div style="white-space: pre;">
<ion:translation term="term"/>
</div>

Offline

What's Ionize ?

Ionize is an Open Source Content Management System created by webdesigners for webdesigners.

Created and maintained by Partikule and Toopixel, Ionize wants to be the easiest and most powerful CMS.

Can I help ?

Because talent is nothing without involvement, we are looking for motivated coders and webdesigners to join the project team.

Resources

Website : ionizecms.com
Documentation : doc.ionizecms.com

Development : Ionize on GitHub
Translations : Ionize Translations