Portfolio - Components

Masonry

 
{% set paragraph_parent = paragraph.getParentEntity() %}

{% set cols = paragraph_parent.field_masonry_columns.value %}

{% set img = file_url(content.field_masonry_image['#items'].entity.uri.value) %}

{% set alt = content.field_masonry_image['#items'].alt %}

{% set cat1 = paragraph.field_masonry_categories.value|render|trim|lower|replace({" ": "_"}) %}

{% set cat2 = paragraph.field_masonry_categories.value %}

{% set title = paragraph.field_masonry_title.value %}

{% set text = content.field_masonry_text %}

{% set link_title = content.field_masonry_link.0['#title'] %}

{% set link = content.field_masonry_link.0['#url'] %}

{% set theme = paragraph.field_theme_color.value %}
{% block paragraph %}

  {% block content %}

      <div class="col-12 col-sm-6 col-lg-{{ cols }} isotope-item {{ cat1 }}">

        <article class="post post-medium border-0 pb-0 mb-5">

        <div class="post-image">

          <a href="{{ link }}">

            <img src="{{ img }}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="{{ alt }}" />

          </a>

        </div>

        <div class="post-content">

          <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a class="link-{{ theme }}" href="#">{{ title }}</a></h2>

          {{{ text }}}

          {% if link %}

          <div class="post-meta">

            <span class="d-block mt-2"><a href="{{ link }}" class="btn btn-xs btn-light text-1">{{ link_title }}</a></span>

          </div>

          {% endif %}

        </div>

      </article>

      </div>

  {% endblock %}

{% endblock paragraph %}

 
{% set cat = paragraph.field_masonry_categories.value %}

{% set cat_q = paragraph.field_masonry_categories.value %}
<div class="row pb-4"><!--open masonry-->

   <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center" data-sort-id="portfolio{{ paragraph.index }}" data-option-key="filter" data-plugin-options="{'layoutMode': 'masonry', 'filter': '*', 'useHash': false}">

   {% if cat_q is not empty %}

			<li class="nav-item active" data-option-value="*"><a class="nav-link text-2-5 text-uppercase active" href="#">Show All</a></li>

   {% endif %}

      {{ cat }}

    </ul>
    <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">

			<div class="row portfolio-list sort-destination" data-sort-id="portfolio{{ paragraph.index }}">

{% block paragraph %}

        {% block content %}

          {{ content|without('field_masonry_categories','field_masonry_columns') }}

        {% endblock %}

      {% endblock paragraph %}

      </div>

    </div>

</div><!--close masonry-->

 
{% for item in items %}

    <li class="nav-item" data-option-value=".{{ item.content|render|trim|lower|replace({" ": "_"}) }}"><a class="nav-link text-2-5 text-uppercase" href="#">{{ item.content }}</a></li>

 {% endfor %}