Krátký článek na téma „Propagované odkazy“ (Promoted links) Vám slibujeme už delší dobu a konečně na něj došlo, jen se obávám, že bude všechno možné, jen ne krátký. Na první pohled to totiž tak nevypadá, ale s tímhle druhem listu jdou dělat zajímavé věci pokud se nebojíte kódu (přetížení CSS stylů) a teď se s Vámi podělíme o všechno, co už umíme.

Propagované odkazy jsou jednou z nových „Appek“, která přišla s verzí 2013 a určitě jste je už někdy viděli, protože je z nich vyroben minimálně„Getting Started“ panel, který patří do základní výbavy každého nového (týmového) webu. Jde o jakousi grafickou reprezentaci linků v podobě kostek (dlaždic, anglicky „tiles“) uložených v jinak docela obyčejném listu, který však umí odkaz doplnit i o obrázek na pozadí nebo popisek, který dynamicky vyskakuje při sebemenším pohybu myši. Práce s takovým listem je opravdu snadná – pro přidání nového linku (dlaždice) potřebujete jen obrázek o rozměru 150 x 150 pixelů a odkaz, na který má být uživatel přesměrovaný po jeho potvrzení. A s tím obrázkem to také není tak složité, stačí Vám větší ikona, menší fotografie, kostka o správných rozměrech zalitá barvou nebo naopak obrázek na průhledném pozadí, který bude podbarvený automaticky (barvou použitou pro samotné téma stránek). Pokud je použitý obrázek větší, bude zmenšen (opravdu velký zdeformován), pokud je menší, bude roztažen (opravdu malý zdeformován). Textovou vrstvu kostky pak tvoří nadpis (titulek nové položky) a popisek. Dlaždice jsou viditelné jen v jednom z připravených pohledů, přidávat nové nebo spravovat stávající můžete v klasickém zobrazení listu s řádky a sloupci jako jste zvyklí a nechybí ani řazení položek​​.

Každý kdo tuhle „Appku“ vidí poprvé je nadšený, nicméně časem zjistíte, kolik omezení její používání přináší (a jak moc Vás to štve, protože by přece mohla vypadat v těch nových stránkách tak dobře…).  Obtížně se formátuje – bez použití kódu je téměř nemožné seřadit dlaždice pod sebe nebo do jednoho sloupce,  jednou vložený objekt nabízí výběr z hotových pohledů, který však nejde nijak dál upravit a dlaždice jsou veliké – větší počet takových kostek na stránce zabírá strašně moc místa. Navíc, textová vrstva má pevně dané barvy textu a pozadí i počet znaků k zobrazení. Nevadí, na to všechno máme styly! Pokud si ještě pamatujete jak se vkládá externí soubor stylů do CEWP (content editor web partu) se skrytým titulkem i okraji, stačí zkopírovat následující kousky kódu do poznámkového bloku, zavřít je do tagů <style< </style> a sledovat, co to s kostkami udělá.

VÍCE ŘÁDKŮ, ŠÍŘKA NA STRÁNCE

První co bude potřebovat každý správce stránek je šířka linků, počet kostek vedle sebe (a následně také pod sebou). To je jednoduché, k tomu nám stačí pět řádek kódu, který vypadá tak nějak takto:

​<style type=“text/css“>
div.ms-promlink-body {
width: 1080px;
}
</style>

Hodnotu samotnou si můžete snadno spočítat. Pokud máte dlaždici standartních rozměrů, bude mít 150 pixelů na šířku plus nějaký ten okraj, řekněme zhruba 180 pixelů na jednu kostku. Vynásobte číslo 180 počtem kostek co chcete mít vedle sebe a výslednou hodnotu zapište do souboru skriptu, který můžete umístit například do „Site Assets“, knihovny prostředků webu. Opravy souboru stylů jsou velmi rychlé, stačí zobrazit knihovnu prostředků v jedné záložce a propagované odkazy v druhé, soubor stejného jména jde přehrávat jeden za druhý a stránku s odkazy obnovovat. Efekt je okamžitý.

Nezapomeňte nastavit CEWP jako skrytý a kousek kódu nechte v souboru, na který se odkážete v panelu s nastavením. Pokud ho budete vkládat do stránek přímo nebo prostřednictvím ikony „Embed Code“, z ribbon menu, můžete být z výsledku lehce zklamaní, protože občas je neúplný nebo nepřesný kód ze stránek smazán tak nějak bez varování. Potřebujete sloupec? Stačí nastavit jen 180 pixelů, což je šířka akorát na jednu dlaždici. Ostatní se budou automaticky zarovnávat dolů pod tu první…

ZMĚNA VELIKOSTI DLAŽDIC

Teď jsou na řadě zajímavější úpravy. Co když se mi nelíbí výchozí velikost a chci kostky menší? No a co když vůbec nechci kostky? Na to také máme řešení. Zapsané kódem vypadá zhruba takto:

<style type=“text/css“>
div.ms-promlink-body {
width: 1080px;
}

​            div.ms-tileview-tile-root {
height: 100px !important;
width: 100px !important;
}

            div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div> span {
height: 100px !important;
width: 100px !important;
}
</style>
Promyslete si rozměry a zapište je ve dvojici do obou sekcí kódu. Pro účely tohoto článku jsme vyrobili dlaždice o rozměrech 100 x 100 pixelů, ale později můžete zkusit cokoliv nesymetrického jako 90 * 130… jen je k tomu potřeba vždy „dorovnat“ i textovou vrstvu. Po obnovení stránky můžete vidět něco podobného obrázku níže:

​Tak funguje to, ale pokud k sobě „nelepíme“ větší obrázek složený z několika dlaždic najednou, asi bychom ocenili nějakou tu mezeru. O tu se postarají řádky, které začínají slovem „Padding“ (zprava a zdola).

div.ms-tileview-tile-root {
height: 100px !important;
width: 100px !important;
padding-right: 4px !important;
padding-bottom: 4px !important;
}​

Že těm kostkám něco chybí? Není tu titulek, ani popisek, tedy na první pohled. Stačí se ke kostkám přiblížit kurzorem myši a textová vrstva se opět objeví. Změnili jsme rozměr objektu, ale textová vrstva (a případný obrázek uvnitř) o tom zatím neví. Co s tím? Textovou vrstvu (a text samotný) řeší následující kousek kódu:

            div.ms-tileview-tile-content > a > div > img {
max-width: 100%;
width: 100% !important;
}

            ul.ms-tileview-tile-detailsListMedium {
height: 100px;
padding: 0;
}

            li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 16px;
}

            div.ms-tileview-tile-titleTextMediumCollapsed {
background: none repeat scroll 0 0 #002E4F;
font-size: 12px;
line-height: 16px;
min-height: 38px;
min-width: 97px;
padding-left: 8px;
position: absolute;
top: -38px;
}​​​

            li.ms-tileview-tile-descriptionMedium {
font-size: 12px;
line-height: 14px;
padding: 3px;
}

… pak budou naše kostky vypadat nějak takto:

​

​Zapsaný kód říká obrázkům, jakých rozměrů mohou být, textové vrstvě kde se má vykreslit, jakou barvou překryje dlaždice nebo kolik řádků zobrazí a písmu diktuje velikost nebo odsazení. Odsazení můžeme opět změnit na řádcích začínajících slovem „Padding“, jen tu nulu u stylu nazvaného „ul.ms-tileview-tile-detailsListMedium“ bych nechala, protože ta nám zarovnává pozadí textové vrstvy pěkně s levým krajem kostky.

Kde bude začínat text a jak bude veliký, to je na Vás. Pro změnu velikosti jednoduše přepište hodnotu čísla u řádku s textem „font-size“ všude, kde je to potřeba. Spojení slov „line-height“ nám řekne jak vysoký může jeden řádek být, což přímo ovlivňuje také množství textu, které se do naší kostky vejde.  Řádek se zápisem „background: none repeat scroll 0 0 #002E4F;“ pak říká, jaké barvy bude samotná textová vrstva. Sem zapisujte zvolenou barvu pomocí HEX kódů! Pokud barvu nechcete vůbec, prostě celý řádek ze svého skriptu smažte. Výsledek pak může vypadat nějak takto:

Chcete místo bílé barvy titulků černou? I na to máme styl. Stačí zapsat do souboru následující kousek kódu:

  .ms-tileview-tile-titleMedium, .ms-tileview-tile-titleLarge {
            color: #000000;
            }

Zobrazuje se Vám titulek méně odsazeně než samotný text? Upravte jeho levý okraj pomocí těchto řádek:

           div.ms-tileview-tile-titleTextMediumExpanded {
           padding-left: 3px;
            }

POHLEDY, SESKUPOVÁNÍ

Kostky našeho článku jsou různobarevné záměrně – naším cílem je seskupit je do stránky pěkně podle barev, které mohou v reálném světě ostrých dat představovat kategorie výrobků, služeb nebo míst nebo cokoliv dalšího, co je zrovna potřeba. Jedinou možností, jak takového dělení docílit, jsou pohledy. A musí být připravené předem. Protože my budeme třídit dlaždice jednoduše podle barev, přidali jsme jen jeden sloupec navíc s označením příslušně barvy podle které roztřídíme pohledy a naplnili seznam daty. Pro dvou-úrovňové dělení je potřeba založit sloupce dva, pro tří-úrovňové tři apod. Pohledy se filtrují ručně, ale i tady si můžete pomoci šablonami. Nastavíte celý pouze jeden a ostatní založíte z hotového, jen lehce pozměníte filtrovací podmínky. Nezapomeňte na omezení počtu položek, pokud máte kostek opravdu hodně a potřebujete “stránkovat”. Pro našich šest barev bylo založeno 18 dlaždic.

…
​

​
Po založení pohledů (kategorií) vytvořte novou stránku, přepněte se do editačního módu a vložte list propagovaných odkazů tolikrát, kolik kategorií chcete mít. V našem případě máme celkem 6 barev, tak tedy vložíme ten samý list hned šestkrát.

​

Nastavte každé vložené “Appce” jeden z připravených pohledů, schovejte popisek, okraje a ovládací panel. Stránka pak bude vypadat zhruba takto:

Zbývá poslední krok – redukce prázdného místa. Teorie říká, že každý objekt stránky a stránka samotná mají předem dané okraje, které nejde bez úpravy stylů nijak měnit. Jenže kolem propagovaných odkazů jsou ty okraje tak velké, že si přímo volají po změně. Po tom, co umažete všechny viditelné prázdné řádky a přebytečné znaky, je vhodné přidat do souboru skriptu i kód redukující mezery kolem objektů a ti zkušenější mohou navíc hledat v kódu všechny přebytečné tagy <br /> a <p> </p>.

<style type=“text/css“>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>

Možná Vás to překvapí, ale nejlépe se mi redukují prázdné řádky stále pomocí starých dobrých tabulek, ty mají okraje nejužší a dovolí Vám vyrobit strukturu stránky, která ani není v nabídce. Stačí k tomu dvě věci – tabulka o jedné buňce (která ve stránce zůstane) a jeden sloupec (založený dočasně navíc). Změňte rozvržení stránky a najděte takové, které Vám přidává nový sloupec vpravo. Na konci práce ho odebereme, ale teď nám bude sloužit jako zásobník, kam si odložíme všechny objekty se kterými chcete pracovat tak, aby byly navrchu, tedy “po ruce”. Pak vložte do levého horního rohu stránky tabulku o jedné buňce, kam postupně přetáhnete všechny objekty ze zásobníku napravo (tedy našich šest “appek”) přímo pod sebe, bez prázdných řádků. A mezery jsou pryč.

Obnovte původní rozvržení stránky, přidejte všechno co potřebujete, upravte text a uložte svou práci. Složitější struktura stránek chce trochu cviku a občas nějaké to přepnutí do okna s kódem pro zapomenutý <br /> tag, ale to je jen několik prvních pokusů. Pak to jde samo a výsledek za to rozhodně stojí. Posuďte sami – přidám Vám sem dva obrázky práce „před“ (propagované odkazy bez filtru s 72 dlaždicemi) a „po“ (propagované odkazy s kategoriemi podle barev, vedoucí na zbytek linků).

Výchozí stav:

… a výsledek:

Není to žádný Photoshop a není to obrázek s ImageMap souřadnicemi, celé je to složené „jen“ z propagovaných odkazů.

Celý soubor skriptu z našeho článku pak vypadá takto:​
<style type=“text/css“>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>

​<style type=“text/css“>
div.ms-promlink-body {
width: 1080px;
}
div.ms-tileview-tile-root {
height: 100px !important;
width: 100px !important;
padding-right: 4px !important;
padding-bottom: 4px !important;
}
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div> span {
height: 100px !important;
width: 100px !important;
}
div.ms-tileview-tile-content > a > div > img {
max-width: 100%;
width: 100% !important;
}
ul.ms-tileview-tile-detailsListMedium {
height: 100px;
padding: 0;
}
li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 16px;
}

Pro pořádek dodávám, že styly co Vám tu chybí, můžete najít přes developer mód v IE i Chrome (většinou funguje klávesa F12 a ukazovátko, které Vám prozradí jméno požadovaného stylu) a pokud chcete pokročilejší rozložení dlaždic s různými velikostmi kostek v rámci jednoho objektu (tzv. Metro Style, to označení prostě zlidovělo), nevyhnete se doplňku třetí strany nebo skriptům – Google v tomhle případě určitě pomůže. Sami zatím žádný otestovaný nemáme, ale docela dobře vypadá ​shortp​oint nebo SPJS Tiles.