Pętle Relacyjne w Stylu WordPressa, Galerie R2 & Lightbox

Airtable Engine pozwala łączyć rekordy między tabelami i renderować z nich pętle, galerie zdjęć oraz interaktywne Lightboxy za pomocą prostych funkcji analogicznych do have_rows() i the_row() ze środowiska WordPress / Advanced Custom Fields.

1. Dołączenie biblioteki SDK

HTML

2. 🔁 Pętle z Obiektów Połączonych (ACF / WordPress Style)

Jeśli strona posiada podpięte rekordy z innej tabeli (np. 8 obrazków z tabeli Galeria podpiętych do Strony głównej), możesz łatwo iterować po nich w pętli:

JavaScript (WordPress ACF Style)

const page = await atomatic.get_page('strona-glowna'); // Sprawdzenie czy rekord posiada powiązane wiersze (have_rows) if (have_rows('Galeria', page)) { // Pobranie pełnych obiektów z połączonej tabeli 'Galeria' const items = await atomatic.get_linked_records(page, 'Galeria', 'Galeria'); items.forEach(row => { const title = get_sub_field(row, 'Name'); const image = atomatic.get_image(row, 'Attachments'); console.log('Element galerii:', title, image.url); }); }

3. 🖼️ get_gallery_images() — Uniwersalna Ekstrakcja Galerii

Funkcja atomatic.get_gallery_images(record, fieldName, targetTable) automatycznie rozwiązuje wszystkie załączniki z połączonej tabeli i zwraca ustandaryzowaną tablicę zdjęć gotową do wyświetlenia:

JavaScript

const images = await atomatic.get_gallery_images(page, 'Galeria'); // Zwraca: // [ // { id: 'rec2b9...', title: 'Obrazek 01', url: 'https://.../gallery01.png', thumb: '...' }, // { id: 'rec202...', title: 'Obrazek 02', url: 'https://.../gallery02.png', thumb: '...' }, // ... // ]

5. 🔗 Relacje Dwustronne (Link to another record)

Gdy dodajesz nową kolumnę typu Link to another record (multipleRecordLinks), silnik wykonuje automatycznie pełną relację relacyjną:

⚡ Automatyczna kolumna symetryczna:
Gdy w tabeli Strony utworzysz pole łączące z tabelą Galeria, w tabeli Galeria natychmiast automatycznie powstaje kolumna powrotna wskazująca na Strony.

6. 🔄 Dwustronna Synchronizacja Rekordów w API

HTTP PATCH /api/records/:id

// Przypisanie 8 rekordów galerii do strony: PATCH /api/records/rec5b8103b7f2d64b { "fields": { "flde7af2b672f4242": ["rec2b963903d3c54c", "rec2022dc1ff94444", ...] } }

7. 📸 Obsługa Obrazków Wyróżniających (Featured Image)

Obrazki wgrywane w panelu administracyjnym trafiają bezpośrednio do bucketu Cloudflare R2:

JavaScript

// Pobranie i render znacznika Featured Image const imgHtml = atomatic.wp_get_attachment_image(page, 'fldd4ba749efbf94c', { className: 'featured-hero-image', size: 'full' });

8. 🛡️ Ochrona przed zmianą nazw kolumn (ID fld...)

Odczyt danych za pomocą atomatic.get_field(record, 'fld...') zabezpiecza frontend przed zmianą nazw kolumn przez redaktorów.

9. 🧪 Live API Console / Testowanie na żywo

// Kliknij przycisk powyżej...

Pętle Relacyjne w Stylu WordPressa, Galerie R2 & Lightbox

1. Dołączenie biblioteki SDK

2. 🔁 Pętle z Obiektów Połączonych (ACF / WordPress Style)

3. 🖼️ get_gallery_images() — Uniwersalna Ekstrakcja Galerii

4. 🔍 open_lightbox() — Wbudowany Pełnoekranowy Lightbox

5. 🔗 Relacje Dwustronne (Link to another record)

6. 🔄 Dwustronna Synchronizacja Rekordów w API

7. 📸 Obsługa Obrazków Wyróżniających (Featured Image)

8. 🛡️ Ochrona przed zmianą nazw kolumn (ID fld...)

9. 🧪 Live API Console / Testowanie na żywo