Create views with UI Pattern Views

Question

I have views like this:

I want use module UI Pattern Views. I defined UI Pattern. File card.ui_patterns.yml with content

card:
  label: Three column fluid
  description: Three column fluid
  fields:
    image:
      type: render
      label: Image
      description: Media image.
      preview:
        theme: image
        uri: http://lorempixel.com/900/500/sports/1
        width: 150
        attributes: {}
    title:
      type: link
      label: Title
      description: Media title.
      preview:
        type: processed_text
        text: <a href="#">Etiam iaculis nunc ac metus</a>
        format: basic_html

and file pattern-card.html.twig have content:

<div class="card">
    {% if image is not empty %}
        <div class="card-image">
            {{ image }}
        </div>
    {% endif %}
    <div class="card-body">
        <h4 class="card-title">{{ title }}</h4>
    </div>
</div>

I don't know how can use multil image style for this case. Any suggetion?

Answer 1

Here's a step-by-step:

• Install the UI Patterns Views module
• Insert the fields and map them to the UI Pattern fields
  • Note: You are mapping fields for the rows.

At this point, each piece of content should be rendered as a UI Pattern

Now, if you want to arrange the cards in a specific way (say, using Masonry), then you can do it in one of the following ways:

• Add a class to the entire view, say, js-view-masonry – you can then use this class in JavaScript to detect this view and apply the JS plugin that organizes the cards like you want.
• The other way will be to create a superpattern of the card pattern. Say, a card_collection pattern, with a field named items. Next, override the view's template, especially the part where the rows are rendered. Here, instead of displaying the rows, into the "card_collection" pattern.

Here's a working example of the second method using "card_collection". The blog list consists of 2 patterns. The "card" pattern and a pattern called "card collection" which wraps the cards.