Portfolio na Živnowebu: jak vytvořit galerii fotek podle roku, služby nebo produktu

Skoro každý živnostník s vizuální prací — fotograf, kadeřník, floristka, truhlář — potřebuje na webu ukázat, co umí. Jenže „pár fotek na stránce" rychle přestane stačit: po pár letech máte desítky focení, různé služby a návštěvník se v tom nevyzná. Přesně na tohle je modul Portfolio.

Místo jedné velké hromady fotek si práci rozdělíte do projektů (např. jedna svatba, jedno focení, jedna zakázka) a projekty roztřídíte do kategorií (např. podle typu služby nebo podle roku). Na webu pak stačí vložit blok Portfolio a návštěvník si může galerii i filtrovat — uvidí jen to, co ho zajímá.

Přesně takhle to má na svém webu FOTOjinak: stránka focení na doobjednání ukazuje sekci „Ukázky vánočních fotek" — tři poslední ročníky vánočního focení, každý jako jeden projekt.

Rychlý přehled — jak to funguje pod kapotou

Portfolio se skládá ze dvou oddělených částí, které je dobré si hned na začátku srovnat v hlavě:

Pozor na umístění bloku. Blok Portfolio byste čekali v kategorii MÉDIA — ve skutečnosti je schovaný na konci seznamu bloků v kategorii HERO. Když ho nemůžete najít, je to nejčastější důvod.

1. Položka Portfolio v levém menu — tady modul najdete.

2. Přepínač mezi záložkami Projekty a Kategorie.

3. Filtr, který zobrazí jen projekty z vybrané kategorie (týká se pouze pohledu v adminu).

4. Tlačítko pro založení nového projektu.

5. Dlaždice existujícího projektu — klikněte na ni pro editaci.

Postup krok za krokem

1. Založte si kategorie

Otevřete Stránky → Portfolio → Kategorie. Vyplňte Název kategorie (např. „Svatby") a volitelně Popis, potvrďte tlačítkem Přidat kategorii. Kategorie se objeví v seznamu pod formulářem — přes tužku ji můžete kdykoli přejmenovat, přes koš smazat.

1. Pole Název kategorie.

2. Nepovinné pole Popis.

3. Tlačítko Přidat kategorii.

4. Existující kategorie v seznamu, s automaticky vygenerovaným slugem vpravo.

5. Ikony pro úpravu (tužka) a smazání (koš) kategorie.

Kategorie je vždy jen jedna na projekt. Není to systém štítků, ale obyčejný výběr z rozbalovací nabídky — každý projekt patří přesně do jedné kategorie. Pokud chcete na webu filtrovat současně podle typu služby i podle roku, musíte si to vyřešit strukturou samotných názvů kategorií — např. založit „Svatby 2025" a „Svatby 2026" jako dvě samostatné kategorie, nebo řešit primárně jedno kritérium (třeba typ služby) a rok nechat v názvu projektu.

2. Založte projekt

V záložce Projekty klikněte na + Nový projekt. Vyplňte základní údaje:

1. Název projektu.

2. Kategorie.

3. Klient (nepovinné).

4. Datum.

5. Lokace (nepovinné).

6. Popis.

7. Přepínače Aktivní a Zvýrazněný.

8. Tlačítko Vytvořit projekt.

Fotky se nahrávají až potom. Sekce Obrázky se objeví teprve po vytvoření projektu, v následné editaci — u prázdného formuláře ji ještě neuvidíte.

3. Nahrajte a seřaďte fotky

Po uložení projektu se otevře stejný formulář jako editace, jen s novou sekcí Obrázky. Tlačítkem Nahrát obrázky přidáe1te fotky, které se zobrazí jako očíslovaná mřížka.

1. Vyplněná kategorie.

2. Pole Klient.

3. Vyplněný popis projektu.

4. Přepínač Zvýrazněný.

5. Tlačítko Uložit změny.

6. Tlačítko Nahrát obrázky.

7. U každé fotky: hvězdička nastaví fotku jako cover (titulní náhled projektu v mřížce), koš fotku smaže a šipky ji posunou v pořadí.

Hvězdička ≠ Zvýrazněný. Snadno se to splete: hvězdička u projektu v přehledu (krok 2) znamená „Zvýrazněný projekt" a dává mu štítek Featured. Hvězdička u jednotlivé fotky uvnitř projektu (podle tooltipu „Nastavit jako cover") dělá něco úplně jiného — určuje, která fotka se použije jako titulní náhled projektu v mřížce na webu.

4. Vložte blok Portfolio na stránku

V Page builderu otevřete stránku, kam chcete galerii umístit. V levém panelu s knihovnou bloků přepněte nahoře na kategorii HERO a sjeďte úplně dolů — blok Portfolio je posledním blokem v tomto seznamu, ne v kategorii MÉDIA, kde by ho člověk čekal.

1. Kategorie HERO v horní liště knihovny bloků.

2. Blok Portfolio na konci seznamu bloků HERO, v levém panelu.

3. Blok Portfolio už použitý na stránce, v přehledu bloků vpravo.

5. Nastavte obsah a vzhled

Klikem na blok se otevře panel nastavení. Nahoře v sekci Obsah vyplňte nadpis a volitelný podnadpis sekce a zvolte, na kterých zařízeních se blok zobrazí.

1. Nadpis sekce — rich text editor s vlastní formátovací lištou.

2. Úroveň nadpisu (H1–H6).

3. Volitelný podnadpis.

4. Viditelnost na desktopu a mobilu.

5. Začátek sekce Nastavení, která pokračuje níže.

V sekci Nastavení pak přijde na řadu vzhled mřížky:

1. Rozložení mřížky.

2. Mezera mezi dlaždicemi v px.

3. Efekt při najetí myší na dlaždici.

4. Typografie nadpisu — velikost, tloušťka, font, zarovnání i barva.

5. Poměr stran dlaždice.

6. Zaoblení rohů.

7. Filtrování.

8. Max. počet zobrazených projektů.

6. Nastavte filtrování a výběr projektů

Tohle je jádro celé funkce — určuje, co konkrétně se na dané stránce zobrazí a jak si to návštěvník může přefiltrovat.

Pod tím ještě zvolíte, co se má na kartě projektu zobrazit, a zapnete lightbox:

1. Zobrazit jen kategorii — natrvalo omezí blok na jednu kategorii.

2. Vybrat projekty — zaškrtávací seznam konkrétních projektů, které se v bloku zobrazí.

3. Zobrazit kategorii — štítek kategorie na kartě.

4. Zobrazit klienta — zobrazí pole Klient z editace projektu.

5. Zobrazit datum — zobrazí pole Datum z editace projektu.

6. Lightbox (klik otevře galerii) — zapíná chování popsané v dalším kroku.

7. Jak lightbox doopravdy funguje (a proč zprvu vypadá nefunkčně)

Se zapnutým lightboxem se na webu neděje to, co byste čekali — kliknutí na kartu neotevře rovnou fullscreen okno. Chování je dvoufázové:

1. Klik na kartu projektu v mřížce rozbalí sekci pod celou mřížkou — s názvem projektu, počtem fotek a tlačítkem Zavřít — a v ní všechny fotky projektu jako menší náhledy.

2. Teprve klik na konkrétní náhled v této rozbalené sekci otevře skutečné fullscreen okno se šipkami pro předchozí/další fotku, počítadlem a křížkem pro zavření.

Kdo otestuje jen rychlým kliknutím na kartu a čeká fullscreen okno hned, snadno usoudí, že lightbox nefunguje. Funguje — jen má mezikrok. Stojí za to na tohle předem upozornit i klienta, kterému web stavíte, ať se nezalekne při první kontrole.

1. Klik na kteroukoli kartu spustí fázi 1 popsanou níže.

1. Tlačítko Zavřít pro sbalení galerie zpět.

2. Klik na kteroukoli fotku v tomto náhledu teprve otevře fullscreen okno.

1. Křížek pro zavření celého lightboxu.

2. Šipka na předchozí fotku.

3. Šipka na další fotku.

4. Počítadlo aktuální pozice v galerii (např. „4 / 6").

Vzorový příklad — kompletní ukázka k okopírování

Modelová situace: fotografka Kateřina Bartošová fotí svatby, rodinná focení a miminka a chce si portfolio přehledně rozdělit. Takhle by postupovala od nuly:

Krok 1 — kategorie (Stránky → Portfolio → Kategorie)

Krok 2 — první projekt

Krok 3 — druhý projekt

Krok 4 — nastavení bloku na stránce „Portfolio"

Výsledek: na stránce se objeví tři záložky (Svatby / Rodinná focení / Miminka), návštěvník si přepne na tu, co ho zajímá, a fotky si prohlédne přes rozbalenou galerii a lightbox popsané výše.

Rychlý checklist

• Kategorie odpovídají tomu, podle čeho chcete na webu filtrovat (typ služby, případně rok).

• Každý projekt má vyplněnou kategorii, datum a alespoň pár reprezentativních fotek.

• U každého projektu je nastavená cover fotka (hvězdička u fotky = „Nastavit jako cover").

• Blok Portfolio je vložený na správné stránce — hledejte ho v knihovně bloků pod HERO, ne pod MÉDIA.

• Nastavení Filtrování a Zobrazit jen kategorii odpovídá účelu dané stránky.

• Lightbox je zapnutý a vyzkoušený naživo — včetně dvoufázového otevírání (rozbalená galerie → fullscreen).

• Zkontrolované zobrazení na mobilu (Mobilní náhled v Page builderu).