Propojení jazykových mutací webu pomocí vlaječek

V minulém článku jsme si ukázali, jak si v systému Inpage vytvořit cizojazyčný web za pomoci domén III. a II. řádu. Dnes si představíme, jak na tyto domény odkazovat přímo z hlavní stránky. Nejosvědčenějším způsobem prezentace jazykových verzí webu, jsou odkazy pomocí vlaječek tohoto státu. V tomto textu si ukážeme dva způsoby, jak tyto vlaječky vložit na náš web a propojit je se stránkami jazykových mutací.

Vložení obrázků vlaječek

Nejprve musíme do administrace inPage vložit ikonky vlaječek. Potřebné obrázky dnes můžeme získat v celé řadě fotobank zdarma (iconfinder.com, freepik.com apod.) Vždy pamatujme na respektování licenčních ujednání pro použití takto získaných obrázků. Obrázky vlaječek do administrace nahrajeme běžným způsobem:

Obrázky → Přidat obrázek nebo Hromadné přidání obrázků

Následující část vám ukáže dva způsoby, jak integrovat vložené obrázky vlaječek do vašeho webu. Volba použití varianty 1) nebo 2) závisí na tom, jakou máte šablonu a jaké je uspořádání vašich stránek. 

Zmíněné kroky níže a přidání obrázků vlaječek je třeba provést v administraci všech webů, které budou sloužit jako jazykové mutace.

1) Vlajky jako položky v menu

Tento způsob doporučujeme, pokud nemáte v nabídce menu příliš mnoho položek. Jeho výhodou je, že vlajky v menu zůstávají i při změně velikosti zobrazení stránky. Tato varianta je optimální volbou pro responzivní šablony.

1. Prvním krokem je vytvoření externího odkazu. Ten založíme následujícím způsobem:

Menu → Externí odkazy → Přidat externí odkaz

Na kartě Přidat externí odkaz vyplníme povinné parametry Název a Url. Název volíme příznačně podle jazykové verze. V poslední řadě zaškrtneme volbu Zobrazit v menu a uložíme.

2. Po přidání Externího odkazu, se v menu zobrazil funkční odkaz s námi zvoleným názvem. Nyní je třeba tento text nahradit obrázkem vlaječky. Toho dosáhneme za pomocí úpravy CSS stylů.

3. Do sekce Vzhled → Vlastní styly CSS vložíme následující zápis. Po jakékoliv změně stylu, nesmíme zapomenout dát Uložit.

#menu-item-326796 a { 
  background: transparent url(/obrazek/3/germany-flag-png/) no-repeat center; 
  width: 50px;
  font-size: 0;
  line-height: 65px;
  opacity: 0.6;
}
#menu-item-326796 a:hover { 
  background: transparent url(/obrazek/3/germany-flag-png/) no-repeat center;
  opacity: 1;
} 

4. Výsledkem předchozího kroku je zobrazení vlaječky v menu. Vlaječka je aktivní a odkazuje na zadanou URL jazykové mutace.

2) Vlajky ve vlastním boxu

Druhý způsob, jak umístit vlaječky na váš web, je jejich vložení do vlastního boxu. Tento způsob je vhodný, pokud máte více jazykových mutací, které by se vám už do nabídky menu nevlezly. Je dobré mít na paměti, že na rozdíl od vložení do menu, mění vlajky při změně zobrazení stránky pozici. Tuto možnost nedoporučujeme pro šablonu Hanami.

1. Opět je třeba vložit obrázky vlaječek do administrace vašeho webu. Jakmile jsou obrázky nahrány, přejděte do sekce Stránky. Zde vytvořte pomocí odkazu Přidat stránku novou stránku. Název stránky zvolte libovolně. Například "Vlastní box + jazyková mutace". Do obsahu této stránky vložte vlaječky, které jste si nahráli do databáze obrázků. Libovolný obrázek do obsahu stránky vložíte prostřednictvím ikonky s obrázkem (Vložit / upravit obrázek). Nachází se ve spodní částí ikonek napravo.

2. Jakmile máte všechny vlaječky vloženy, klikněte na ikonku <> (Zdrojový kód). Zobrazí se vám kódový zápis vložených obrázků. Tento zápis zapouzdříme do tagu <div> s identifikátorem "jazykova-mutace". Prakticky to znamená, že na začátek vložíme kód <div id="jazykova-mutace"> a na konci tento párový tag uzavřeme pomocí </div>. Poté potvrdíme OK.

3. Nyní jednotlivým obrázkům vlaječek přiřaďte odkaz (URL adresu) na konkrétní stránku jazykové mutace. Nezapomeňte změnu uložit.

4. Nakonec je nutné nastavit, aby se stránka zobrazovala ve vlastním boxu. To učiníme následujícím způsobem: Nastavení → Nastavení prvků do vlastního boxu. Zde z paletky vybereme název naší stránky s vlaječkami. Tímto docílíme zobrazení vlaječek na webu ve vlastním boxu. Konkrétní polohu vlaječek upravíme s pomocí vlastních CSS. Umístění vlaječek do boxu je závislé na použité šabloně. V samostatném článku jsou uvedeny podrobnosti, do jakého boxu je vhodné vlaječky umístit.

5. Potřebné definice CSS zápisů, si zkopírujte ze samostatného článku. V něm jsou vypsány všechny CSS zápisy k jednotlivým šablonám. Vyberte CSS pro vaši šablonu a vložte jej do vlastního CSS stylu v administraci inPage v sekci Vzhled → Vlastní styly CSS. Aby byl váš styl funkční, zaškrtněte pole Zapnout vlastní styly CSS a dejte tlačítko Uložit.

6. Po těchto úpravách se vám vlaječky zobrazí na stránce, podobně jako na níže uvedeném příkladu u šablony ONE.