Média v PW-Press CMS

2017-10-18T17:22:00+02:00
PW-Press CMS
media-in-pw-press-cms.jpg

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 – 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:
image image image

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>

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ě.

Souhlasím a Zavřít K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti bychom chtěli využít soubory cookie. Informace o tom, jak náš web budete používat či sdílet se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje budou moci zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby. Zobrazit podrobnosti