Logo w szablonie Joomla w zależności od wersji językowej

06 Gru

Logo w szablonie Joomla w zależności od wersji językowej

Przez 
(1 głos)

 Witryna wielojęzyczna w Joomla! Możemy ją zrobić na conajmniej parę sposobów. Jeżeli chodzi o mnie, to możliwości są dwie.

Pierwszą z nich jest tworzenie wielojęzyczności na standardowym, corowym rozwiązaniu, które przy dużej ilości opcji wiąże się niestety z ogromem pracy - często niepotrzebnej. Drugim rozwiązaniem znacznie chyba prostszym i przyjemniejszym w obcowaniu jest dodatek Falang - jego wersja PRO jest niestety jak na polskie warunki droga, ale używanie go znacznie upraszcza sprawę wielu języków na stronie.

I o ile treści, pozycje menu, moduły w przypadku wielojęzyczności są w miarę proste do ogarnięcia, to problem pojawia się w przypadku logotypu zawierającego napis w danym języku. 

Jeżeli użyta zostanie wielojęzyczność wbudowana w Joomla wówczas problem jest do rozwiązania w miarę szybko. Wystarczy w oryginalnym szablonie wstawić jedno logo (np. polskie), utworzyć kopię szablonu i w niej ustawić logo dla drugiego języka (równocześnie przypisując szablon do danych pozycji menu). Czynność należy powtórzyć dla każdego kolejnego języka.

Problem pojawia się natomiast w przypadku użycia Falanga, aczkolwiek rozwiązanie go jest również nie tak skomplikowane jakby się mogło wydawać. Jako przykładowy szablon użyty zostanie GK News 2 firmy Gavick. Tak więc do roboty. :)

  1. Przygotować należy logotypy w każdym z języków znajdujących się na witrynie (ja opiszę akurat występowanie dwóch języków) oraz wersję mniejszą logo w przypadku użycia menu przypinanego do góry ekranu. U mnie będą to pliki logo_pl.png - dla polskiej wersji językowej, logo_de.png - dla niemieckiej wersji językowej oraz logo.png - wersja zmniejszona dla przypiętego do góry ekranu logo.
  2. Pliki należy przesłać przez FTP do katalogu /templates/gk_news2/images/styleX (w przypadku omawianej templatki dodatkowo dochodzi nazwa katalogu związana z wybranym w szablonie stylem)
  3. Pamiętaj! Wszelkich zmian i dopisków należy dokonywać w pliku override.css - w przypadku tego szablonu - w przypadku innych sprawa wygląda inaczej, ale to już kwestia na innego posta.
  4. Następnie konieczne jest zbadanie w kodzie strony, które klasy odpowiadają za wyświetlanie logo w szablonie. Tak więc w przypadku Firefoxa można to zrobić za pomocą Firebuga, lub naciśnięcia na danym elemencie i przyciśnięciu prawego przycisku myszy i wybraniu z menu, które się pojawi opcji Zbadaj element.
  5. Po szybkiej inspekcji dowiedziałem się, że za wyświetlanie pełnego logo odpowiada klasa  .svg #gkLogo.cssLogo:lang(de) , natomiast za menu zmniejszone, wyświetlane obok menu przyczepionego do góry ekranu - wyświetla się ono po zescrolowaniu strony w dół) - klasa .svg #gkLogoSmall.cssLogo
  6. Należy więc dodać obie klasy w pliku override.css (oczywiście zamiast nazwy logo może być użyta jakakolwiek inna)
    .svg #gkLogoSmall.cssLogo {background-image: url(../images/style1/logo.png);}
    .svg #gkLogo.cssLogo {background-image: url(../images/style1/logo_pl.png);}
    
  7. Teraz należy skopiować klasę odpowiedzialną za wyświetlanie logo pełnego rozmiaru z jednoczesną zmianą nazwy dla drugiego z plików językowych
    .svg #gkLogoSmall.cssLogo {background-image: url(../images/style1/logo.png);}
    .svg #gkLogo.cssLogo {background-image: url(../images/style1/logo_pl.png);}
    .svg #gkLogo.cssLogo {background-image: url(../images/style1/logo_de.png);}
    
  8. No i w tej chwili przechodzę do meritum sprawy, czyli wyświetlania danego loga dla danej wersji językowej. Logo skrócone zostaje takie samo dla obu wersji, gdyż nie zawiera ono tekstów. Natomiast do klas odpowiadających za wyświetlanie logotypów dla danej wersji językowej należy dodać do klas selektory :lang(pl) dla języka polskiego oraz :lang(de) dla języka niemieckiego. W przypadku kolejnych języków klasę należy skopiować powtórnie zamieniając w niej kod języka oraz nazwę pliku
    .svg #gkLogoSmall.cssLogo {background-image: url(../images/style1/logo.png);}
    .svg #gkLogo.cssLogo:lang(pl) {background-image: url(../images/style1/logo_pl.png);}
    .svg #gkLogo.cssLogo:lang(de) {background-image: url(../images/style1/logo_de.png);}
  9. Od tej pory po naciśnięciu flagi dla danego języka logotyp pojawia się w odpowiedniej wersji.
Czytany 605 razy Ostatnio zmieniany czwartek, 27 kwiecień 2017 00:51
Morphic

Webmaster, programista i core programmer z wieloletnim doświadczeniem. Z Joomla! związany od czasów Mambo.

Strona: www.morphic.pl