[SOLVED/SOLVED] How to have a diferent header logo and Carouselinc slide for each language?

[JRGandara]

My logo has a text and I just realize when changing languages, the header logo is always the same! There´s no upload option for each language! Anyone knows how to do that?

Thank you in advance.

[shokinro]

you do as following

1. create logo for each language and save it to /img folder, with following name

logo_en.jpg
logo_es.jpg
logo_fr.jpg
...

2. change following line in /themes/YourSiteTheme/header.tpl

From

To

[JRGandara]

V.I.P.

Hello! Thank for your help! I did exactly what you suggested and just one language (br) logo is showing. Both es and sp show no image, instead shows a text with the name of store. Do you have any idea what can be wrong?

[DevNet]

Hi,

Have you created the images for the respective languages​​ ?

logo_es.jpg
logo_fr.jpg

etc.

Best regards

[JRGandara]

I did the following:

1) Created the extra two images logo_sp.jpg and logo_br.jpg. Renamed the original logo.jpg to logo_us.jpg. All in the folder /prestashop/img, which was where the original one is;

2) Copied and pasted the code you provide me over the original one in the header.tpl which I found in /prestashop/template080/; BTW, my Dreamweaver warned me about an unrelated sintaxe problem in line 26. I put a missed ' and the warning stopped;

3) Tested and the result was which the only image working as expected is the logo_br.jpg in Portuguese language selection. Both spanish and english show no image, but a text link instead.

I'm using Wamp in a PC for test before production. And I tried to change the files to not be read only, but Windows say it is ok but when you check again, still read only. I searched the web and looks like everybody have this problem. You think could be this preventing the code to work? The rest of the code in my web site is working ok.

Here is the portion of the code in the new header.tpl:

...



       <!-- Header -->

  

               {$HOOK_TOP}





...

[shokinro]

you are using the wrong the language iso_code.

English is "en" not "us"
Spanish is "es" not "sp"

[JRGandara]

How I could miss that! Sorry! Maybe because I´m working on this project only after mid night. Now is working like a charm! Thank you very much for the great help!

One more question if you don´t mind. My template use Carouselnc module for a big slide show in the front page which is very nice. The problem is the same, the images have English texts and are the same for all languages. I looked at the files php and tpl files, and could not figure out how to apply the same technique you show me here. Any suggestion?

[shokinro]

glad you sorted it out.
please mark it as solved by adding SOLVED to the beginning of your first post of this thread.

for question on "Carouselnc", it is better contact the author of module.

[JRGandara]

I will! Thank you again.

[salko]

you do as following

1. create logo for each language and save it to /img folder, with following name

logo_en.jpg
logo_es.jpg
logo_fr.jpg
...

2. change following line in /themes/YourSiteTheme/header.tpl

From

To

Thank you for this tip, works like a charm!
Now I'm wondering if it is possible to do the same thing with invoice logo, to have different logo for each language?

[AKJV]

One more question if you don´t mind. My template use Carouselnc module for a big slide show in the front page which is very nice. The problem is the same, the images have English texts and are the same for all languages. I looked at the files php and tpl files, and could not figure out how to apply the same technique you show me here. Any suggestion?

Great topic! I'm working towards complete bi-langual setup for my Prestashop installation so the info in this thread really helped me out. As it happens, I'm also using CarouselNC (v1.2) and figured out how to get the slides and their respective links change depending on the language. It really is just a workaround and I understand that the author is planning an update of this module in the future (not sure if that will include a language config though).

If you can't wait for the update then here are the steps:

1) First, replace the default 'agile_carousel_slides' folder (that contain the slides) with separate folders for each language. In my case: agile_carousel_slides_en and agile_carousel_slides_nl. These folders contain customized slides in English and Dutch, resp. Note that the folder names include _xx that represents the language code.

2) Second, modify the file 'carouselnc.tpl'. For both the 'path_to_slides' and 'slide_directory' options, replace "agile_carousel_slides" with "agile_carousel_slides_{/literal}{$lang_iso}{literal}". Finally, for the 'slide_links' option, add {/literal}{$lang_iso}{literal} in every link. For instance, http://www.website/{/literal}{$lang_iso}{literal}/product1. This directs the link (when clicked on the slide) to http://www.website/en/product1 and http://www.website/nl/product1 for English and Dutch, resp.

For clarity, I replaced these lines:

path_to_slides: "agile_carousel_slides",
slide_directory: "agile_carousel_slides",
slide_links: "http://www.website/en/product1",

with:

path_to_slides: "agile_carousel_slides_{/literal}{$lang_iso}{literal}",
slide_directory: "agile_carousel_slides_{/literal}{$lang_iso}{literal}",
slide_links: "http://www.website/{/literal}{$lang_iso}{literal}/product1",

Notes:
- Make sure that the folder names for the slides follow this structure: agile_carousel_slides_xx
- The file names for the slide images in each folder should be the same
- I don't know yet how to do language-dependent captions but I plan to remove captions and embed text in the slide images anyway
- Surely there is a better and more elegant method for all this, but this is what I have achieved with my limited coding skills.

[JRGandara]

AKJV,

What pleasant surprise find out which someone have the very same problem I have, but with programming skills! I used to program firmwares using assembly language. Although I have some language skills, I´m not familiar with PHP or Javascript. I was able to change a lot of things in my web template, but this one was freaking me out. But with you explanation, was a piece of cake. Now my site is working like as expected from a 3 different languages site.

Thank you for this big help, saved my weekend, which I reserved to fix this problem and now I can move to the next step. This topic solved two problems at once.


[]s

JR

[AKJV]

AKJV,

What pleasant surprise find out which someone have the very same problem I have, but with programming skills! I used to program firmwares using assembly language. Although I have some language skills, I´m not familiar with PHP or Javascript. I was able to change a lot of things in my web template, but this one was freaking me out. But with you explanation, was a piece of cake. Now my site is working like as expected from a 3 different languages site.

Thank you for this big help, saved my weekend, which I reserved to fix this problem and now I can move to the next step. This topic solved two problems at once.


[]s

JR

Thanks for your kind words. Glad to be of any help!
I have also figured out how to do language-dependent captions. As I mentioned before, I probably won't be using captions myself but I have successfully tested this modification. I've provided the solution in the appropriate module thread:
http://www.prestashop.com/forums/viewthread/31444
That seems a better place to discuss modifications to this module. Hope you don't mind!
Andreas

[fishermanwyner]

This also what I was looking for. It worked for me. Thanks everyone!
I love this community!!

[thebroadys]

Does it work with 1.4.1 ?

I tried it and it still try to load logo.jpg for each language

my code

[salko]

I can confirm it works with 1.4.0.17 so I think it should work with 1.4.1. also ...

Edit: Be sure you make a Force compile before changes will take affect ...

[thebroadys]

Thanks it works now

[kajkolahkhan]

I want to change the logo for different languages. But, the codes are not shown. :-s

I would appreciated if anyone can post the codes again.

[ssservice]

not work on prestashop 1.4.0.17

becouse presta have different header check this:

<!-- Header -->

<div id="header">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">{$shop_name|escape:'htmlall':'UTF-8'}</a>

<div id="header_right">

 

Have any solution how change header logo for each language?

[goulader]

hello,

 

can you please give the above code again for changing the header.tpl so when you select a lanquage to change the logo?

 

thanks

[benknackan]

I need this too please could u provide the code again?

[AKJV]

For language dependent header logo in Prestashop version 1.4.x, find this line in header.tpl:

<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

 

And change that into this:

<img class="logo" src="{$img_ps_dir}logo_{$lang_iso}.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" width="100px" height="80px" />

 

This modification means that uploading your logo in the back office doesn't work anymore. Instead, you'll have to upload your logos manually (via FTP) to the /img folder. Make sure to add underscore and language code to your logo filenames, for instance logo_en.jpg and logo_fr.jpg. Also, change the width and height in the modified code to match your logo dimensions (in the example above: width="100px" height="80px").

 

The advantage of this modification is that you can use any image format for your logo. For instance, if you want to use the png file format then change jpg to png in the modified code.

 

Don't forget to enable 'Force compile' in your back office to apply the changes in header.tpl.

[benknackan]

Thx u so much!

[adem32]

How to change logo in different language in ps1.5?

[vekia]

in this case you have to edit the header.tpl file located in your theme directory. Before this upload your logos to img/cms/ drectory (with FTP client).

 

then in header.tpl instead of simple logo code use something like this:

{if $cart->id_lang == 1}
<img src="URL_TO_LOGO_1" />
{/if}
{if $cart->id_lang == 2}
<img src="URL_TO_LOGO_2" />
{/if}
...

 

$cart->id_lang == 1 - this is the language check code, 1 is an ID number of the language, you can create as many if conditions as you want

[maca_eglarest]

   		
            <div class="fixed_width">
            
            
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
				</a>
		
					{$HOOK_TOP}
	
                </div>
			</header>

			<div id="columns" class="clearfix">
               <div class="fixed_width">
               {if $page_name != 'index'}
               {include file="$tpl_dir./breadcrumb1.tpl"}
				{/if}
				<!-- Left -->

                


				<!-- Center -->
   
				<div id="center_column">
                	{if $activeColumn == "enable_left" || 
			$page_name == 'product'}
                <section id="main_section" role="main">
                {/if}
	{/if}

This is the header.tpl of the theme. Where must I put it?

What are the name of the image file?

Edited September 18, 2013 by maca_eglarest (see edit history)

[vekia]

instead of:

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

use:

{if $cart->id_lang == 1}
<img src="URL_TO_LOGO_1" />
{/if}
{if $cart->id_lang == 2}
<img src="URL_TO_LOGO_2" />
{/if}

and of course use FULL URL PATH to image that you want to display

[maca_eglarest]

Thanks. It works.

[vekia]

you're welcome may i ask for url? im so curious how it works in "real" store

[maca_eglarest]

http://caprichosdelamancha.com. It's a traditional spanish food and wine store.

[remona]

it is working thank u...

I have q... Is it possible change "Title" for image "logo" with changing logo images? Each picture has own Title name.

[vekia]

what about translations? i think that translations will help in this case

[remona]

what about translations? i think that translations will help in this case

 

where I can find it? BO? Preferences -> data of shop?

[remona]

Is anyone able to help in this topic?

[vekia]

localization > translations 

from first dropdown select front office translations

then click on flag

[remona]

localization > translations 

from first dropdown select front office translations

then click on flag

I cannot find "section" for "logo title" in "translations"...

<title> for logo image is the same as "name of shop" for two languages... i can change "name of shop" in Preferences->contact... but it is not solutions... hmmm....

[vekia]

in header.tpl file you've got:

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
</a>

change {$shop_name|escape:'htmlall':'UTF-8'} to

{l s='This is my description'}

 

then you will be able to translate it with translations feature

[Innar.Hunt]

Hi Vekia,

I trying to implement same solution to PS 1.6.0.6 I can tell that is works

 

I can't only figure out small detail. Next to the logo, there is symbol "<", as shown on screenshot below. How to remove it?

 

Code from header.tpl, as it is after modifications.

						<div class="row">
							<div id="header_logo" class="col-xs-12 col-sm-4 {if isset($warehouse_vars.logo_position) && !$warehouse_vars.logo_position} col-sm-push-4 centered-logo  {/if}">
							
								<a href="{$base_dir}" title="{l s='This is my title description'}">
									
<{if $cart->id_lang == 1}
<img src="http://test.nailin.ee/innar/img/logo_en.jpg" />
{/if}
{if $cart->id_lang == 6}
<img src="http://test.nailin.ee/innar/img/logo_et.jpg" />
{/if}
								</a>
							</div>

Thanks!

[vekia]

strange that this code "<" appears there

 

that's all what you/ve got in this file>

 

this "<" appears right before <img src=""> with logo

lol i see it there

<{if $cart->id_lang == 1}

<{if $cart->id_lang == 1}

[Innar.Hunt]

strange that this code "<" appears there

 

that's all what you/ve got in this file>

 

this "<" appears right before <img src=""> with logo

lol i see it there

<{if $cart->id_lang == 1}

<{if $cart->id_lang == 1}

 

Solved, thank you Vekia!

[Neekkola]

instead of:

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

use:

{if $cart->id_lang == 1}
<img src="URL_TO_LOGO_1" />
{/if}
{if $cart->id_lang == 2}
<img src="URL_TO_LOGO_2" />
{/if}

and of course use FULL URL PATH to image that you want to display

 

Hello everybody

Simple and efficient : thank you very much Vekia ! I confirm it works perfectly with PS 1.6.1.0

[miquel.cabrera]

hey where are de variables located for example $cart or $logo_url?

 

Hey i got the solution, another one at least. 

 

first of all by noobs as me the directory where you are going to find header.tpl is this /opt/prestashop-1.6.1.0-2/apache2/htdocs/themes/default-bootstrap  

 

I am using ubuntu and my own server, the shop is public in a domain.com. (buydron.com)

 

Second thing .tpl is just a php template.

 

then you open header.tpl

 

change

 

<div id="header_logo">

<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

</a>

</div>

 

by this

 

<div id="header_logo">

<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

<img class="logo img-responsive" src="http://buydron.com/img/{$cart->id_lang}prestashop-logo-1441835297.jpg" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

</a>

</div>

 

explanation 

$cart->id_lang variable in my case 1 is for english 2 for catalan 3 for spanish. I didn't chose this, is just for default in prestashop. To know your order enter to your prestashop administration and just for example click in one product (just as if you wanted to change some product text) and see your language order. If english go first then is the one, if another language is the second (catalan in my case then catalan is 2) if spanish is the third then is number 3 and now you know how $cart->id_lang works.

 

Then you just have to create 3 image logos diferents in any language, and write languege number first. for example 1logoenglish.jpg 2logocatalan.jpg 3logospanish.jpg.

 

Finalilly you just have to use php. I concatenate 2 strings {$cart->id_lang}prestashop-logo-1441835297.jpg . "string"{Svariabletoconcatenate}"string".

You have to save logos here /opt/prestashop-1.6.1.0-2/apache2/htdocs/img.First write your shop domain and then/img/ and then   {$cart->id_lang}prestashop-logo-1441835297.jpg .

 

Easy but you maybe need to read again this post. I explain all as good as i could for make understand how does it works.

Edited September 10, 2015 by miquel.cabrera (see edit history)

[Vlcventy]

How to change logo in different language in ps1.6.1.16? 

[rogue0104]

in this case you have to edit the header.tpl file located in your theme directory. Before this upload your logos to img/cms/ drectory (with FTP client).

 

then in header.tpl instead of simple logo code use something like this:

{if $cart->id_lang == 1}
<img src="URL_TO_LOGO_1" />
{/if}
{if $cart->id_lang == 2}
<img src="URL_TO_LOGO_2" />
{/if}
...

$cart->id_lang == 1 - this is the language check code, 1 is an ID number of the language, you can create as many if conditions as you want

 

Hey there Vekia I know this is old one but its not working in my case...what did I missed? using presta 1.7.2.2

modified file :  /korektor.org/themes/classic/templates/_partials/header.tpl

here is what i did>

{block name='header_top'}

  <div class="header-top">

    <div class="container">

       <div class="row">

        <div class="col-md-2 hidden-sm-down" id="_desktop_logo">

          <a href="{$urls.base_url}">

            {if $cart->id_lang == 1}

<img src="http://korektor.org/logokorektor1.png" />

{/if}

{if $cart->id_lang == 2}

<img src="http://korektor.org/logokorektor2.png" />

{/if}

          </a>

        </div>

        <div class="col-md-10 col-sm-12 position-static">

          <div class="row">

            {hook h='displayTop'}

            <div class="clearfix"></div>

          </div>

        </div>

      </div>

Edited October 6, 2017 by rogue0104 (see edit history)