Media Components

• 1: Gallery
• 2: Cards

1 - Gallery

Simple Gallery

A Gallery is the presentation of one or more media elements contained in the Project.

In this video, we go the Media tab and find and add an Image to the Project media.

Then we create add a new Gallery component to the App, selecting some images from the Project media.

this takes just 0.58!

Making images clickable

Like the Cards component, it is possible to make images selectable by the user.

Unlike with the Cards component, there is not an Object instance underlying each of the images, so the user click does not create a downstream area in which an Object is remembered.

Instead, to make the contents of a Gallery clickable, you have to select destination component(s) for each image:

Supplementing images with text(s)

In the Media tab, when you edit an Image, you can add Title, Sub-title and Caption, thereby giving sufficient fields that each Media element can be treated as a Card for the purposes of using the defined Card Renderers.

Comparison with Cards

Similarities

• Displays use “Card” concept - can attach texts to Media to fit Card model
• Images can be made clickable

Differences

• In Cards , each card represents an instance, and the selection of one creates a downstream
• Because there is no backing Object, there are no implicit or user filters to restrict which Media to display

Some display modes

Gallery offers several display modes and parameters, including the option to render the Media as Cards or not.

Here is a video which shows some options like

• Masonry
• Carousel

2 - Cards

Cards is like a mix between Gallery and Listing - visual displaying like a Gallery, but functioning like a Listing in the sense that every image represents a record which can be selected by the user.

Comparison with Listing

A Cards component presents a set of instances of a given Object type.

It has a SELECT transition, meaning the Cards are selectable, and the instance behind the card is remembered by Logiak - it creates a downstream area.

So you can set which component(s) should appear when a user clicks on an image.

As with a Listing you can set implicit filters and also user-controlled filters, to determine which instances - which Cards - are displayed

SELECT transition like List

Data filtering like List

Card Badge required

One difference between Cards and Listing:

• you can configure a Listing for any Object (any Data or Table object),
• but to use a Cards component, the Object types must have the Card badge

This is because the Cards component offers Card display modes, which requires certain kinds of information:

• title
• subtitle
• caption
• image

Example: English Counties

Let us look at an example.

Here is a small spreadsheet with some information about English Counties, including an image field.

Step 1: Set up a Table Object

We can create a Table Object in Logiak and attach the spreadsheet to it.

Note the image field has datatype “Media URL”

Step 2: Create Cards Component

Cards components require an Object, but the Object must have the Card badge

In this video, we :

1. give the county Object the Card badge and
2. create a cards component which shows the images.

Step 3: Choose different Card style

Step 4: Populate the downstream with some component(s) so that the Cards are clickable