1

I have views like this:

Image views

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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.