Použitý lightbox

Jak v Gutenberg blokovém editoru přidat ke galerii a obrázku lightbox

Základní galerie WordPress vždy byly dobrým řešením, když chcete prezentovat více fotek. Jedinou jejich nevýhodou je absence funkce lightbox, která čtenáři nabídne jejich pohodlné prohlížení.

V tomto článku si představíme plugin, který přidá k bloku Galerie a Obrázek v Gutenberg editoru lightbox.

Budeme k tomu potřebovat plugin Lightbox for the Default Gallery & Image Block. Plugin se nachází v oficiálním katalogu pluginů a lze jej nainstalovat přímo z WordPress administrace.

Lightbox for the Default Gallery & Image Block

Po instalaci a aktivaci je plugin plně funkční a neobsahuje žádné vlastní nastavení.

Aktivace lightbox u galerie blokového editoru

Otevřete si příspěvek nebo stránku, kde chcete použít lightbox a označte si blok Galerie.

V nastavení bloku je poté potřeba vybrat u položky Odkaz na → Mediální soubor.

Nastavení bloku Galerie
Nastavení bloku Galerie

Nyní stačí jen vše uložit a když si nyní čtenář bude chtít prohlédnout obrázek detailněji, zobrazí se v lightboxu.

Použitý lightbox
Použitý lightbox

Aktivace lightbox u obrázku blokového editoru

Kromě lightboxu pro galerii je možné použít pop-up i pro blok obrázek. Pro jeho zobrazení opět stačí jen nastavit odkaz z obrázku na Mediální soubor.

Nastavení odkazu u obrázku v blokovém editoru
Nastavení odkazu u obrázku v blokovém editoru

Výhoda pluginu Lightbox for the Default Gallery & Image Block (Simple, Lightweight & No Lock In) je také v jeho optimalizaci, kdy při načítání stránky detekuje, zda je v obsahu použitý blok Galerie nebo Obrázek a až poté případně nechá načíst Javascript soubory, které se starají o tvorbu lightbox okna.

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte email, ať o nic nepřijdete!

Nespamujeme! Další informace naleznete v našich zásadách ochrany osobních údajů.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík
Přejít nahoru