Web

[Tomas.Pastircak]

Bude to jednodušší, je to do toho už systematicky zabudováno, že to chce "adresu jednoho obrázku". Jasně že to jde i líp, ale minimálně pro začátek to rozhodně nebudu předělávat jen kvůli tomu, aby to "šlo líp"

[Petr.Vileta]

Bude to jednodušší, je to do toho už systematicky zabudováno, že to chce "adresu jednoho obrázku". Jasně že to jde i líp, ale minimálně pro začátek to rozhodně nebudu předělávat jen kvůli tomu, aby to "šlo líp"

Kde přesně to je? Já ti to předělám podle toho W3C Stejně se používají include, tak se místo odkazu na obrázek vloží include, kde bude DIV a nějaký javascript.

[Tomas.Pastircak]

- Plzeňský kalendář hotov (na stránce Kalendář i na první stránce v tabu vpravo)

[Petr.Vileta]

Tome, můžeš tam zkusit vložit tenhle příklad, patřičně upravený?
https://www.w3schools.com/w3css/tryit.a ... w_animated

Jen mě zajímá, jak to bude fungovat na mobilech (jiná šablona, asi?)

[Tomas.Pastircak]

Ne, jestli chceš, vlož to tam sám. Tohle je na docela dost práce, systém je stavěný na gif, já to opravdu chci mít co nejdříve hotové, ať se to může vypustit se stávajícím systémem (který jednoduše upraví úplně kdokoliv podle jednoduché instrukce), nechci strávit další hodiny času na ladění kosmetické úpravy, ale skutečně máknout na obsahu.

Kupříkladu tohle by bylo potřeba předělat na parametrizované obsahem složky, aby to bylo dostatečně uživatelsky jednoduché. Určitě to jde, ale určitě to nechci dělat, když chci web vypustit co nejdřív.

[Petr.Vileta]

Ne, jestli chceš, vlož to tam sám. Tohle je na docela dost práce, systém je stavěný na gif, já to opravdu chci mít co nejdříve hotové, ať se to může vypustit se stávajícím systémem (který jednoduše upraví úplně kdokoliv podle jednoduché instrukce), nechci strávit další hodiny času na ladění kosmetické úpravy, ale skutečně máknout na obsahu.

Kupříkladu tohle by bylo potřeba předělat na parametrizované obsahem složky, aby to bylo dostatečně uživatelsky jednoduché. Určitě to jde, ale určitě to nechci dělat, když chci web vypustit co nejdřív.

Já to tam klidně vložím, ale jednak to neuvidím a dvak nevím kam přesně. Maximálně si můžu udělat statickou stránku u sebe na disku a místo "http://" použít pro testování "file://". Ale stejně potřebuju znát to místo, kam to pak mám vložit na gitu. Takže ve kterém souboru na gitu je odkaz na ten animovaný gif?

[Tomas.Pastircak]

V _config.yml:

Kód: Vybrat vše

title-page:
  big:
    foto: /assets/img/miscellaneous/featured-penta.gif
    alt: Nechceme, aby Metro D skončilo jako tunel
    url: https://praha.pirati.cz/metro-d-v-kratkem-case-motorky-a-sitove-prvky.html

Jak říkám, je to dělané tak, aby tenhle soubor mohl upravit kdokoliv relativně počítačově neznalý, za cenu toho, že tam musí být gif. Pokud to chceš předělat na obrázky, uprav to tak, že místo "foto" tam bude odkaz na složku, ve který budou ty fotky - rozhodně ne tak, že při každé úpravě titulní stránky bude potřeba měnit HTML.

Je to fajn nápad, ale při správném provedení je na pěkných pár hodin práce, které já do toho v tuhle chvíli investovat prostě nemůžu.

Dík.

[Petr.Vileta]

Já potřebuju ten kus, který z prostého

Kód: Vybrat vše

foto: /assets/img/miscellaneous/featured-penta.gif

dělá ten html kód Stačí nasměrovat na jeden z mnoha adresářů, já už si to tam dohledám.

[Tomas.Pastircak]

_includes\title\title_header.html

Kód: Vybrat vše

          <div class="c-banner-section c-banner-primary-section">
            <article class="c-card c-card--big">
              {% assign box0 = site.title-page.big %}
              <div class="c-card-header c-card-header--white">
              </div>
              <div class="c-card-image-wrapper">
                <a href="{% if box0.url contains "http" %}{{box0.url}}{% else %}{{box0.url | relative_url }}{% endif %}">
                  <img src="{{ box0.foto | prepend: site.baseurl }}" class="c-card__image" alt="{{box0.alt}}">
                </a>
              </div>
            </article>
          </div>

[Petr.Vileta]

Tak takhle

Kód: Vybrat vše

<div class="c-banner-section c-banner-primary-section">
    <article class="c-card c-card--big">
        {% assign box0 = site.title-page.big %}
            <div class="c-card-header c-card-header--white">
            </div>
            <div class="c-card-image-wrapper">
                <a href="{% if box0.url1 contains "http" %}{{box0.url1}}{% else %}{{box0.url1 | relative_url }}{% endif %}">
                    <img  class="mySlides" src="{{ box0.foto1 | prepend: site.baseurl }}" class="c-card__image" alt="{{box0.alt1}}">
                </a>
                <a href="{% if box0.url2 contains "http" %}{{box0.url2}}{% else %}{{box0.url2 | relative_url }}{% endif %}">
                    <img class="mySlides" src="{{ box0.foto2 | prepend: site.baseurl }}" class="c-card__image" alt="{{box0.alt2}}">
                </a>
                <a href="{% if box0.url3 contains "http" %}{{box0.url3}}{% else %}{{box0.url3 | relative_url }}{% endif %}">
                    <img class="mySlides" src="{{ box0.foto3 | prepend: site.baseurl }}" class="c-card__image" alt="{{box0.alt3}}">
                </a>
                <a href="{% if box0.url4 contains "http" %}{{box0.url4}}{% else %}{{box0.url4 | relative_url }}{% endif %}">
                    <img class="mySlides" src="{{ box0.foto4 | prepend: site.baseurl }}" class="c-card__image" alt="{{box0.alt4}}">
                </a>
            </div>
            <script>
            var myIndex = 0;
            carousel();

            function carousel() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";  
                }
                myIndex++;
                if (myIndex > x.length) {myIndex = 1}    
                x[myIndex-1].style.display = "block";  
                setTimeout(carousel, 2500);    
            }
            </script>
    </article>
</div>

No a odkazovat se na to bude

Kód: Vybrat vše

title-page:
  big:
    foto1: /assets/img/miscellaneous/obr1.jpg
    alt1: nějaký popis 1
    url1: https://plzen.pirati.cz/nazev-udalosti-1.html
    foto2: /assets/img/miscellaneous/obr2.jpg
    alt2: nějaký popis 2
    url2: https://plzen.pirati.cz/nazev-udalosti-2.html
    foto3: /assets/img/miscellaneous/obr3.jpg
    alt3: nějaký popis 3
    url3: https://plzen.pirati.cz/nazev-udalosti-3.html
    foto4: /assets/img/miscellaneous/obr4.jpg
    alt4: nějaký popis 4
    url4: https://plzen.pirati.cz/nazev-udalosti-4.html

Je to ušité narychlo a zatím natvrdo pro 4 obrázky, ale funguje to. Časem by se to dalo vylepšit, že si to samo najde počet obrázků, odkazů atd.

Názvy souborů obrázků se měnit nemusí, prostě se jen vymění fyzicky. Stejně bude nutné změnit odkaz na html stránku události a alt tag. Ale to mi nepřipadá tak pracné, když se to bude dělat jednou za pár týdnů. Vytvořím si stránky událostí (html), připravím si obrázky, přepíšu to v title-page a commit. Ovšem nemusím to mnohdy ani přepisovat celé, mohu jen přidat novou událost jako č.1, další 3 přečíslovat a poslední odmazat.

Můžeš to vyzkoušet? Jaá si zkoušel instalovat Ruby a Jekyll a nejde mi to. Někde v návodu je chyba.