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.

📷 [OBRÁZEK 01 — Úvodní obrazovka modulu Stránky → Portfolio, se seznamem projektů — vložte soubor 01-portfolio-prehled.png]

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.

📷 [OBRÁZEK 02 — Záložka Kategorie: formulář pro přidání a seznam existujících kategorií — vložte soubor 02-portfolio-kategorie.png]

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:

📷 [OBRÁZEK 03 — Formulář Nový projekt — vložte soubor 03-portfolio-novy-projekt.png]

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.

📷 [OBRÁZEK 04 — Editace existujícího projektu se sekcí Obrázky — vložte soubor 04-portfolio-editace-projektu.png]

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.

📷 [OBRÁZEK 05 — Umístění bloku Portfolio v knihovně bloků, sekce HERO — vložte soubor 05-portfolio-blok-knihovna.png]

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

📷 [OBRÁZEK 06 — Sekce Obsah v nastavení bloku Portfolio — vložte soubor 06-portfolio-blok-obsah.png]

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:

📷 [OBRÁZEK 07 — Nastavení vzhledu mřížky (rozložení, efekt při najetí, typografie, poměr stran) — vložte soubor 07-portfolio-blok-nastaveni-1.png]

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:

📷 [OBRÁZEK 08 — Filtrování, výběr projektů a přepínače Zobrazit kategorii/klienta/datum a Lightbox — vložte soubor 08-portfolio-blok-nastaveni-2.png]

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.

📷 [OBRÁZEK 09 — Výchozí stav mřížky na živém webu — vložte soubor 09-portfolio-frontend-mrizka.png]

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

📷 [OBRÁZEK 10 — Fáze 1: rozbalená galerie pod mřížkou — vložte soubor 10-portfolio-frontend-rozbalena-galerie.png]

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

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

📷 [OBRÁZEK 11 — Fáze 2: skutečný fullscreen lightbox se šipkami a počítadlem — vložte soubor 11-portfolio-frontend-lightbox.png]

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