Média v PW-Press CMS

2017-10-18T17:22:00+02:00

V redakčním systému PW-Press CMS je layout (grafické rozvržení webové stránky) založen na knihovnách:

Bootstrap – front-end css framework,
Texy!:[texy.info] – textový editor pro strukturované obsahy typu WYSIWYM,
Fotorama – jQuery plugin pro jednoduché fotogalerie.

Tento používaný způsob stylování HTML dokumentu zaručí, že zobrazení stránek bude optimalizováno pro všechny druhy nejrůznějších zařízení (mobily, notebooky, tablety atd.).

Příklady

1. Příklad vložení odkazu na .pdf soubor k zobrazení

Kód vložený v editaci stránky (Soubor fiktivni-faktura.pdf musí být nahraný ve Vašem systému PW-Press CMS.):

Zde si můžete prohlédnout "fiktivní fakturu":[fiktivni-faktura.pdf] ve formátu pdf.

na webu zobrazí větu:
Zde si můžete prohlédnout fiktivní fakturu ve formátu pdf.

2. Příklad vložení jednoho obrázku

Kód vložený v editaci stránky:
Poznámky:

Soubor seo.jpg musí být nahraný ve Vašem systému PW-Press CMS.
Text Koláčový graf zdrojů provozu bude vložen v HTML tagu img do hodnoty atributu alt.

[* seo.jpg .(Koláčový graf zdrojů provozu)[img-fluid] *]
 Přehled zdrojů provozu

v prohlížeči výsledně zobrazí obrázek na stránce takto:

Koláčový graf zdrojů provozu
Přehled zdrojů provozu

3. Příklad vložení více obrázků (s využitím pluginu Fotorama):

Varianty atributů (viz. dokumentace fotorama.io):

můžeme vynechat data-nav='thumbs' – místo náhledů se zobrazí tečky
můžeme vynechat nebo volit mezi data-transition='slide' nebo data-transition='crossfade' – slajdy či prolínáním obrázků
můžeme vynechat nebo přidat data-clicktransition="crossfade" nebo data-transition='crossfade' – mix
můžete odebrat data-allowfullscreen='true' – zamezí možnosti fullsceenu obrázků na stránce

<div class='fotorama' data-nav='thumbs' data-transition='slide' data-clicktransition="crossfade" data-allowfullscreen='true'>
[* fotorama-slide-a.jpg *]
[* fotorama-slide-b.jpeg *]
[* fotorama-slide-c.jpeg *]
</div>

Výsledné zobrazení příkladu výše:

4. Příklad vložení videa z YouTube (s využitím pluginu Fotorama)

Jak podniká programátor David Grudl

<div class="fotorama">
 <a href="https://youtu.be/ryH9JAMzJ70"></a>
</div>

5. Příklad vložení počasí z Windy.com

<iframe width="600" height="400" src="https://embed.windy.com/embed2.html?lat=49.771&lon=14.711&detailLat=50.090&detailLon=14.420&width=600&height=400&zoom=8&level=surface&overlay=radar&product=radar&menu=&message=&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=true&metricWind=m%2Fs&metricTemp=default&radarRange=-1" frameborder="0"></iframe>

Závěr

Snažte se obsah webových stránek tvořit co tím nejjednodušším způsobem. Web je neustále ve vývoji a v současnosti aktuální pluginy nebo knihovny nemusí v budoucnosti fungovat a nebudou poté systémem PW-Press CMS využívány a obsahy stránek se pak Vám nemusí zobrazovat správně.