This page demonstrates how to build a film gallery using a custom Swiffle Grid connector and the public Studio Ghibli API.

The connector retrieves the list of films and displays the poster, title, release year, director, and a short description. The back of each card contains additional details such as running time, producer, and a longer synopsis.

The example below shows the part of the connector that formats the film data into cards:

$front = "
    <div class='gh-card'>
        <img src='{$image}' alt='{$title}' />
        <h3>{$title}</h3>
        <span>{$year}</span>
    </div>
";

Resulting layout after adjusting card settings:

• Card width: 250
• Card height: auto
• Card radius: 12

The full connector file can be edited from the Swiffle settings page if you want to customize the layout or add filters.