Tutorial

Tutorial | 1 Jan 2010 | Citadelo

Page parametre

layout - layout, nie je potrebné meniť - page (prednastavený) | default (plná šírka) | post

date - datum publikacie, pri strankach nema vyznam
image - obrázok v hlavicke
image_alt - alt atribut k obrazku v hlavicke
menu_primary - nazov menu polozky, ktora ma byt vysvietena vid menu-primary.html
lang - jazyk stranky, automaticky sa prednastavuje podla priecinkov /sk /en /cz
parmalink - linka na ktorej bude stranka, defaultne sa prednastuvuje

Post parametre

layout - layout, nie je potrebné meniť - post (prednastavený) | default (plná šírka)
date - datum publikacie
author - presne meno podla toho ako je zadane v Collections/Authors
categories - kategorie, staci pridat a kategoria sa automaticky vytvori a zobrazi pri clanku
tags - tagy, nezobrazuju sa ale sluzia na generovanie Related posts + ak sa nevyplnia keywords tak sa pouziju zadane tagy SEO
keywords - SEO klucove slova pre clanok, ak sa nevyplnia tak sa pouziju tagy
description - SEO popis stranky
excerpt - perex clanku, zobnrazi sa v listingu clankov
image - obrázok v hlavicke
image_alt - alt atribut k obrazku v hlavicke
og_image - SEO obrazok pre socialne siete, ak sa nevyplni pouzije sa image
lang - jazyk stranky, automaticky sa prednastavuje podla priecinkov /sk /en /cz
parmalink - linka na ktorej bude clanok, defaultne sa prednastuvuje

Velkosti obrazkov a stranky

hlavna sirka stranky: container - max width: 950px
page/case-study image: 1920x500px center/cover
homepage image: 1920x580px center/cover
homepage - partners logo: 300xSOMETHINGpx blog detail - 1920x1080px

Nastavit linky na socialne site pre rozne jazykove mutacie, je mozne cez Data file v subore translate.yml. Kazdy jazyk ma moznost facebook|youtube|linkedin|twitter_icon. Ak nechceme socialnu siet zobrazit vymazeme to.

Linky

Linku možno vkladať 2 spôsobmi:

[Linka](http://www.citadelo.sk){:target="_blank"}
<a href="http://www.citadelo.sk">Citadelo</a>

Externá linka v novom okne Linka

Iframe z YouTube

Iframe staci vlozti na stranku, ak chceme aby sa proporcne prisposoboval sirke okna vlozime ho do divu nasledovne:

<div class="youtube">
<iframe class="youtube__iframe" width="100%" height="100%" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

Formaty datumov

Nastavit format zobrazovania datumov pre rozne jazykove mutacie, je mozne cez Data file v subore translate.yml. Kazdy jazyk ma moznost date_dormat.

Ako vkladať obrázky (a iné)

Obrázok v hlavičke

V metafieldoch pridať typ: image a potom buď ručne zadať adresu alebo cez image picker, ale potom treba odstrániť adresu domény, čiže napr

http://localhost:4000/images/image.png

zmeniť na

/images/image.png

Obrázky v texte

Sú v podstate dva spôsoby

Markdown syntax

Relatívna cesta

![alt text](/images/obrazok.png)

Absolútna cesta

![alt text](http://localhost:4000/images/obrazok.png

Jekyll Assets plugin

Obyčajné vloženie obrázku, netreba nijako zadávať cestu ku obrázku, plugin si obrázok nájde sám.

{% asset code-wallpaper-18.png %}

Responzívna verzia

{% asset img.png
    srcset:width=400
    srcset:width=600
    srcset:width=800
      %}

Galeria

Obrazky vlozit do divu s class=’js-gallery’, Odporucame vkladat minimalne 3 obrazky

<div class="js-gallery">
<img src="/assets/code-wallpaper-18-5609d9af6ffc15096ab1a54280166f699e1ba288380d34259c45f39df071c58c.png">
<img src="/assets/code-wallpaper-18-5609d9af6ffc15096ab1a54280166f699e1ba288380d34259c45f39df071c58c.png">
<img src="/assets/code-wallpaper-18-5609d9af6ffc15096ab1a54280166f699e1ba288380d34259c45f39df071c58c.png">
<img src="/assets/code-wallpaper-18-5609d9af6ffc15096ab1a54280166f699e1ba288380d34259c45f39df071c58c.png">
</div>

Lightbox sa otvori ak na link pridate atribut data-lity

<a href="/adresa-k-obrazku" data-lity>Obrazok v lightboxe</a>

Obrazok v lightboxe

Takisto je možné na obrázky použiť rôzne filtre od ImageMagick pluginu.

half

{% asset code-wallpaper-18.png magick:half %}

rotate

{% asset code-wallpaper-18.png magick:rotate=30 %}

resize

{% asset code-wallpaper-18.png magick:resize=400x200 %}

Link na Kramdown

kramdown