Jak połączyć wideo i zdjęcia w jednej galerii Elementora (i nie zabić wydajności strony)? Case Study: DK Video-Mix Grid

Każdy, kto kiedykolwiek próbował stworzyć zaawansowane portfolio lub nowoczesny sklep internetowy na WordPressie, w końcu trafia na ten sam mur: jak elegancko połączyć statyczne zdjęcia z plikami wideo w jednej siatce?

Domyślne rozwiązania i popularne wtyczki zazwyczaj oferują dwa bolesne kompromisy:

1. Albo wrzucamy ciężkie ramki (iframes) z YouTube/Vimeo, co całkowicie rujnuje design siatki (gridu) i drastycznie wydłuża czas ładowania strony (PageSpeed płacze).

2. Albo decydujemy się na toporne miniatury, które po kliknięciu otwierają wideo w nowym oknie, co wybija użytkownika z rytmu przeglądania.

W DIGIKROM postanowiłem podejść do tego problemu inaczej. Zamiast szukać kompromisów, zaprojektowałem dedykowany widget dla Elementora: DK Video-Mix Grid.

Oto jak za pomocą nowoczesnego CSS-a i odrobiny sprytnego JavaScriptu udało mi się stworzyć galerię, która „żyje”, ładuje się błyskawicznie i wygląda obłędnie.

1. Magia „Hover-to-Play” (Wydajność przede wszystkim)

Zamiast ładować na start kilkanaście aktywnych odtwarzaczy wideo, widget ładuje zoptymalizowane tagi HTML5 <video> (z atrybutami muted, playsinline oraz preload="metadata").

Prawdziwa magia dzieje się jednak w JavaScripcie. Odtwarzanie wideo (video.play()) uruchamia się tylko wtedy, gdy użytkownik najedzie kursorem na konkretny kafelek. Kiedy kursor z niego zjedzie, wideo nie tylko pauzuje, ale dzięki video.currentTime = 0 płynnie resetuje się do klatki startowej.

Efekt biznesowy? Strona ładuje się tak szybko, jakby zawierała same statyczne zdjęcia, ale w interakcji z użytkownikiem ożywa, potęgując zaangażowanie (idealne dla branży fashion, artystów 3D czy portfolio AI).

2. Algorytm wstrzykiwania wideo i „CSS Grid Dense”

Mieszanie formatów (pionowych, poziomych i kwadratowych) często zostawia w siatce brzydkie, puste dziury.

Rozwiązałem to na dwa sposoby:

• Automatyzacja po stronie PHP: Zamiast ręcznie układać elementy, użytkownik wgrywa galerię zdjęć, a następnie listę plików wideo. W panelu Elementora wystarczy ustawić opcję „Wstaw wideo co N obrazków” (np. co siódme zdjęcie). Logika PHP widgetu sama dba o idealne wymieszanie mediów (tzw. przeplot).

• CSS Grid Dense: Wykorzystanie zaawansowanej reguły grid-auto-flow: dense; sprawia, że przeglądarka sama „upycha” kafelki tak, aby zlikwidować wszelkie puste przestrzenie. Nawet jeśli wideo zajmuje dwa rzędy (grid-row: span 2), siatka zawsze pozostanie zwarta i estetyczna.

3. Dwa niezależne systemy Lightbox

Mieszana zawartość wymagała stworzenia podwójnego środowiska do podglądu, aby zapewnić idealny User Experience:

• Dla zdjęć: Rozbudowany Lightbox PRO z możliwością nawigacji, podglądem miniaturek (z precyzyjnie wyliczonym pozycjonowaniem scrolla w JS, by aktywna miniatura zawsze była na środku ekranu) oraz natywnymi przyciskami udostępniania na platformach społecznościowych.

• Dla wideo: Dedykowany, czysty modal skupiający 100% uwagi na odtwarzanym materiale wraz ze sterowaniem dźwiękiem.

Tworzenie dedykowanych rozwiązań w DIGIKROM to nie tylko „pisanie kodu”. To architektura zorientowana na rozwiązywanie konkretnych problemów biznesowych i optymalizację UI/UX. NM Video-Mix Grid to kolejny (już ponad 120.) widget, który udowadnia, że w środowisku Elementora można osiągnąć absolutnie wszystko – pod warunkiem, że wie się, jak zoptymalizować to pod maską.

Szukasz nieszablonowych, wydajnych i dedykowanych modyfikacji dla swojego e-commerce lub platformy na WordPressie? Zajrzyj do portfolio DIGIKROM. Ja nie instaluje wtyczek jeśli tylko mogę ją stworzyć.