---
title:                                  Cards Tester
tagline:                                deck of posts
description:                            responsive deck

tags:                                   [ Cards, Tester ]
index:                                  [ deck, post ]
categories:                             [ pages ]

toc:                                    true
advertising:                            false

permalink:                              /pages/public/test_pages/deck_of_posts/
regenerate:                             false

resources:                              [ lightbox, rtable ]
resource_options:
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set page (local) attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
== Deck of posts

Bootstrap `card decks` are *not* responsive by default. Additional breakpoint
classes for J1 Template introduce support on card decks for responsiveness.
With the values for `break_on_XX`, the number of cards can be specified to be
shown on a deck per *row*.

.Read more
. link:{url-stackoverflow--card_deck}[Stackoverflow {char-middot} Deck of Cards, {browser-window--new}]
. link:{url-codeply--card_deck}[Codeply {char-middot} Deck of Cards, {browser-window--new}]

++++
{% comment %} Set config files
-------------------------------------------------------------------------------- {% endcomment %}
{% assign template_config           = site.data.j1_config %}
{% assign bs_config                 = template_config.bootstrap %}

{% comment %} Set config data
-------------------------------------------------------------------------------- {% endcomment %}
{% assign bs_card_deck              = bs_config.cards.card_deck %}

  {% assign posts_max = 6 %}
  {% assign post_category = 'featured' %}
  {% assign readmore_text = 'read' %}

  {% assign total_categoray_posts = 0 %}
  {% for cat in site.categories %}
     {% if cat[0] == post_category %}
      {% assign total_category_posts = cat[1].size %}
     {% endif %}
  {% endfor %}

  {% assign debug = true %}
  {% if debug %}
  <div>
    <h3> Total posts per category </h3>
    <ul>
    {% for cat in site.categories %}
        <li>{{cat[0]}} ({{cat[1].size}})</li>
    {% endfor %}
    </ul>
  </div>
  {% endif %}

  <h3> Posts per category <i>{{post_category}}</i></h3>

  <p> Total posts in {{post_category}}: {{ total_category_posts }} <br/>
      Max posts written: {{ posts_max }} <br/><br/>
      Settings for break_on_XX
  </p>

  <ul>
  {% for bp in bs_card_deck %}
      <li>{{bp[0]}}: {{bp[1]}}</li>
  {% endfor %}
  </ul>

  <div class="container mt-5">
    <!-- Recent posts -->
    <div class="card-deck -mb-5">
    {% for post in site.posts %} {% for category in post.categories %}
      {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}

      {% if category == post_category and last_post_written != true %}
        {% assign posts_written = posts_written|plus:1 %}
        <!-- Post -->
          <article class="card raised-z5 mb-3">
            {% if post.image %}
              <img class="img-fluid img__object--cover g-height-200" src="{{post.image}}" alt="{{post.title}}">
              {% assign post_width = '80x' %}
            {% else %}
              <img class="mt-2" src="" alt="">
              {% assign post_width = '100x' %}
            {% endif %}
            <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
            <!-- Body|Excerpt -->
            <div class="card-body r-text-300">
              {{post.excerpt|truncatewords:50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
            </div>
            <!-- End Body|Excerpt -->
            <div class="card-footer r-text-200">
              <div class="text-muted r-text-200">
                <i class="mdi mdi-calendar-blank mr-1"></i>
                {{post.date|date:"%Y %B, %e"}}
              </div>
              <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase"
                 href="{{post.url}}">
                 {{readmore_text}} · {{post.tagline}}
              </a>
            </div>
          </article>
          <!-- End Post -->

          <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
          {% assign sm = posts_written | modulo: bs_card_deck.break_on_sm %}
          {% assign md = posts_written | modulo: bs_card_deck.break_on_md %}
          {% assign lg = posts_written | modulo: bs_card_deck.break_on_lg %}
          {% assign xl = posts_written | modulo: bs_card_deck.break_on_xl %}

          <!-- Add 'column setters' for BS break points -->
          {% if sm == 0 %}
            <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
          {% endif %}

          {% if md == 0 %}
            <div class="w-100 d-none d-md-block d-lg-none"> <!-- break on md --> </div>
          {% endif %}

          {% if lg == 0 %}
            <div class="w-100 d-none d-lg-block d-xl-none"> <!-- break on lg --> </div>
          {% endif %}

          {% if xl == 0 %}
            <div class="w-100 d-none d-xl-block" ><!-- break on xl --> </div>
          {% endif %}

      {% endif %}
    {% endfor %} {% endfor %}
    </div>
    <!-- End recent posts -->

  </div>
++++