v6-dev

[crftwrk]

Heavy WIP!

https://themes.bootscore.me/boilerplate/plugins/bs-swiper/

Shortcodes

Templates

• Rewrite localize template script to omit the -main suffix fallback. b7cb101

Loop

• Recheck filter names in shortcode, remove location?
• Reduce templates, each template should be able to show posts, pages, products, WC categories or any CPT as well, closes Add WooCommerce categories template #36, Add product template #107
  • Move loop out of the shortcode to a template-part f082956
  • Create a template part for products f082956
  • Add missing shortcode attributes from products f082956
  • Add a product template 61e75b3
  • Add filters to product template
  • Add a template for categories/WC categories https://github.com/orgs/bootscore/discussions/1119
• Re-check swiper outer wrapper HTML markup, position-relative px-5, swiper-container swiper position-static. Simplify? Improve HTML markup #106, 3c96856
  • Moved bottom-margin out of the slides into the swiper-outer-wrapper c9a57d3
  • Add a filter/option to this bottom margin class c9a57d3
  • Add data-context="" attribute to the swiper in frontend as a selector if shortcode has context="my-custom-swiper" 5381541
• Rename shortcodes? Change shortcode selector and add hero templates #108
  • [bs-swiper-card] > [bs-swiper layout="columns"] Change shortcode selector and add hero templates #108
  • [bs-swiper-heroes] > [bs-swiper layout="heroes"] Change shortcode selector and add hero templates #108
• Use <article id="post-<?php the_ID(); ?>"... instead div for cards Add filters and actions #105, f512d27.
  • Removed id="post-<?php the_ID(); ?>" because issues if multiple swipers on a page with the same article 15183ce

Options/init.js

• Effects option only to heroes? (requires 1 slide per view) Add product template #107
• slideperview option only to column swipers to avoid effects conflicts? Add product template #107
• Add option to exclude categories? https://github.com/orgs/bootscore/discussions/1107
• Products by tag? https://github.com/orgs/bootscore/discussions/1089, Add product template #107
• Add filters and actions with location similar to default Bootscore loop, closes Remove mb-* classes from heroes? #75, Add filters and actions #105, 9f841cb, 1c17c08, Add filters and actions #105
• Add contextual filters 98ce444, Add filters and actions #105
• Add option to remove bullet pagination pagination="false" and navigation arrows navigation="false" to the shortcode e7b5873, Add filters and actions #105
• Add option to control effect transition speed speed="1000", default is 300 a51f417
• Add option to set cols in shortcode 68cbdfa, closes Define default columns count #98
• Add option autoplay="true", default false, 47ac8f4
  • Add option delay="1500", default 4000, 47ac8f4
• Add option loop="true", default false, probably closes Improve accessibility of swiper (no keyboard trap) #78, 9a9cd6e
• Add option spacebetween="100", default spaceBetween: 26, (Bootstrap default grid gutter spacing) d690375
• Effects, default slide 618e194
  • Important! Effects works only if just 1 slide is per view. Using effects on multi-column swipers requires slidesperview="1,1,1,1,1,1" in the shortcode. This is limited by swiper.js. Add product template #107
  • Add option effect="fade" 618e194
  • Add option effect="cube" 618e194
  • Add option effect="coverflow" 618e194
  • Add option effect="flip" 618e194
  • Add option effect="cards" 618e194
  • Add option effect="creative" 618e194

Related posts

• Add a new hook to single templates and use this instead <?php if (function_exists('bootscore_related_posts')) bootscore_related_posts(); ?>, Add deprecated notice.
• Add filters and actions like shortcodes
• Add related products? Closes Related products like related posts #81

CSS

• Beautify the bullet navigation c6512a8

General

• Release a final v5 version which disables the auto-updater
• Readd the PUC
• Update the README.md
• Update docs
• Release post

If plugin becomes commercial

• Create a product
• Set repo to private or archive and create a new one?
• Contact contributors (free)
• Create a free v5 version file
• Check support form
• Check plugin repo links
• Remove from packagist

If not

• Readd composer

Filters

Contextual filter examples

Image Overlay slider

[bs-swiper layout="columns" type="post" category="post-templates" context="custom-card-overlay" excerpt="false" categories="false" tags="false" meta="false" readmore="false"]

// custom card-overlay
[data-context="custom-card-overlay"] {

  // Change the swiper theme color
  --swiper-theme-color: var(--#{$prefix}body-color);

  // Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
  margin-left: -12px;
  margin-right: -12px;

  .swiper {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/**
 * Card overlay
 */

// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_card_overlay_bs_swiper_wrapper_padding_bottom($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "";
  }
  return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_card_overlay_bs_swiper_wrapper_padding_bottom');

// Card class
function change_card_overlay($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "card border-0 shadow bg-dark h-auto rounded-4 overflow-hidden mb-5";
  }
  return $class;
}
add_filter('bootscore/class/loop/card', 'change_card_overlay');


// Card-img class
function change_card_overlay_img($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "card-img";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/image', 'change_card_overlay_img');


// Card-body class
function change_card_overlay_body($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "card-img-overlay d-flex flex-column";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/body', 'change_card_overlay_body');


// Card heading link class
function change_card_overlay_heading_link($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "text-decoration-none mt-auto stretched-link";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/title/link', 'change_card_overlay_heading_link');


// Card heading class
function change_card_overlay_heading($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    return "text-white h3 lh-1 fw-bold";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/title', 'change_card_overlay_heading');


//Add author gravatar and date after title for custom-card-overlay context
function add_custom_card_overlay_meta($location) {
  // Only run if we're in the swiper shortcode with custom-card-overlay context
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
    ?>
    <div class="custom-card-overlay-meta d-flex align-items-center gap-2 mt-2 text-white">
      <!-- Author Gravatar -->
      <div class="author-avatar">
        <?php 
        echo get_avatar(
          get_the_author_meta('ID'),
          32,
          '',
          '',
          array('class' => 'rounded-circle border border-white shadow')
        ); 
        ?>
      </div>

      <!-- Date -->
      <div class="post-date small ms-auto">
        <i class="fa-solid fa-calendar-days"></i> <span><?php echo get_the_date(); ?></span>
      </div>
    </div>
    <?php
  }
}
add_action('bootscore_after_loop_title', 'add_custom_card_overlay_meta');

Vertical overlay slider

[bs-swiper layout="columns" type="post" category="swiper-demo-posts" context="custom-vertical-card-overlay" meta="false" tags="false"]

// Vertical overlay cards
[data-context="custom-vertical-card-overlay"] {
  // Change the swiper theme color
  --swiper-theme-color: var(--#{$prefix}body-color);

  // Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
  margin-left: -12px;
  margin-right: -12px;

  .swiper {
    padding-left: 12px;
    padding-right: 12px;
  }

  .backdrop-blur {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

/**
 * Vertical card overlay
 */

// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_vertical_card_overlay_bs_swiper_wrapper_padding_bottom($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "";
  }
  return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_vertical_card_overlay_bs_swiper_wrapper_padding_bottom');


// Card class
function change_vertical_card_overlay($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "card border-0 shadow bg-dark h-auto rounded-5 overflow-hidden mb-5";
  }
  return $class;
}
add_filter('bootscore/class/loop/card', 'change_vertical_card_overlay');


// Card-img class
function change_vertical_card_overlay_img($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "card-img";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/image', 'change_vertical_card_overlay_img');


// Card-body class
function change_vertical_card_overlay_body($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "card-img-overlay d-flex flex-column";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/body', 'change_vertical_card_overlay_body');


// Open wrapper div for vertical cards context before loop title
function vertical_cards_open_overlay_wrapper($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    echo '<div class="bg-black bg-opacity-25 backdrop-blur rounded-5-inner p-3 p-md-4 shadow mt-auto">';
  }
}
add_action('bootscore_before_loop_title', 'vertical_cards_open_overlay_wrapper');


// Change category badge class
function vertical_cards_change_category_badge_link_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "custom-category badge bg-dark bg-opacity-25 backdrop-blur text-decoration-none text-white fw-lighter rounded-pill p-2 px-3 mt-2 ms-2 shadow";
  }
  return $class;
}
add_filter('bootscore/class/badge/category', 'vertical_cards_change_category_badge_link_class');


// Change heading class
function vertical_cards_change_heading_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "h5 text-white text-uppercase fw-lighter mb-3";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/title', 'vertical_cards_change_heading_class');


// Change excerpt class
function vertical_cards_change_excerpt_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "small lh-sm fw-lighter";
  }
  return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt', 'vertical_cards_change_excerpt_class');

// Change excerpt link class
function vertical_cards_change_excerpt_link_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "text-decoration-none text-white";
  }
  return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt/link', 'vertical_cards_change_excerpt_link_class');


// Change read-more class
function vertical_cards_change_read_more_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    return "btn btn-outline-light btn-sm rounded-pill w-100";
  }
  return $class;
}
add_filter('bootscore/class/loop/read-more', 'vertical_cards_change_read_more_class');


// Close wrapper div for vertical cards context after loop tags
function vertical_cards_close_overlay_wrapper($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_tags', 'vertical_cards_close_overlay_wrapper');

Tailwind style slider

[bs-swiper layout="columns" type="post" category="post-templates" context="tailwind-cards" meta="false" tags="false" readmore="false" slidesperview="1,1,2,3,3,3"]

// Tailwind style cards
[data-context="tailwind-cards"] {

  // Change the swiper theme color
  --swiper-theme-color: var(--#{$prefix}body-color);

  // Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
  margin-left: -12px;
  margin-right: -12px;

  .swiper {
    padding-left: 12px;
    padding-right: 12px;
  }
}

// Image inner border-radius
.rounded-5-inner {
  border-radius: $border-radius * 4;
}

// Create a custom dark/light button that changes on data-bs-theme="dark"
.btn-custom {
  color: var(--#{$prefix}gray-100);
  background-color: var(--#{$prefix}gray-900);
  border-color: var(--#{$prefix}gray-900);

  &:hover {
    color: var(--#{$prefix}gray-100);
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-700);
  }
}


[data-bs-theme="dark"] {
  .btn-custom {
    color: var(--#{$prefix}gray-900);
    background-color: var(--#{$prefix}gray-100);
    border-color: var(--#{$prefix}gray-100);

    &:hover {
      color: var(--#{$prefix}gray-900);
      background-color: var(--#{$prefix}gray-300);
      border-color: var(--#{$prefix}gray-300);
    }
  }
}

/**
 * Tailwind style cards
 */

//Change responsive wrapper class
function swiper_responsive_navigation_wrapper_spacer($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "px-xl-5";
  }
  return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-x', 'swiper_responsive_navigation_wrapper_spacer');


// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_tailwind_card_bs_swiper_wrapper_padding_bottom($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "";
  }
  return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_tailwind_card_bs_swiper_wrapper_padding_bottom');


// Card class
function change_tailwind_card($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "card shadow h-auto rounded-5 mb-5";
  }
  return $class;
}
add_filter('bootscore/class/loop/card', 'change_tailwind_card');


// Change responsive navigation arrow class
function swiper_responsive_navigation_arrows($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "d-none d-xl-block";
  }
  return $class;
}
add_filter('bootscore/bs-swiper/class/navigation', 'swiper_responsive_navigation_arrows');



// Show custom tags before thumbnail for tailwind-cards context
function tailwind_cards_custom_tags_before_thumbnail($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    $tags = get_the_tags();

    if ($tags) {
      echo '<div class="custom-tags-wrapper d-flex flex-wrap gap-1 position-absolute top-0 start-0 mt-4 ms-4">';
      foreach ($tags as $tag) {
        echo '<span class="custom-tag badge bg-dark bg-opacity-25 text-white rounded-pill fw-lighter p-2">';
        echo '<i class="fa-solid fa-tag me-1"></i>'; // Font Awesome icon
        echo esc_html($tag->name);
        echo '</span>';
      }
      echo '</div>';
  }
  }
}
add_action('bootscore_before_loop_thumbnail', 'tailwind_cards_custom_tags_before_thumbnail');


// Open wrapper div for tailwind-cards context before thumbnail
function tailwind_cards_open_thumbnail_wrapper($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    echo '<div class="pt-2 px-2">';
  }
}
add_action('bootscore_before_loop_thumbnail', 'tailwind_cards_open_thumbnail_wrapper');

// Change loop thumbnail class
function swiper_loop_thumbnail($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "rounded-5-inner";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/image', 'swiper_loop_thumbnail');

// Close wrapper div for tailwind-cards context after thumbnail  
function tailwind_cards_close_thumbnail_wrapper($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_thumbnail', 'tailwind_cards_close_thumbnail_wrapper');


// Change card-body class
function tailwind_cards_card_body($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "card-body p-4 d-flex flex-column";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/body', 'tailwind_cards_card_body');



// Change category badge class
function tailwind_cards_change_category_badge_link_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "small text-body-secondary text-uppercase fw-lighter text-decoration-none";
  }
  return $class;
}
add_filter('bootscore/class/badge/category', 'tailwind_cards_change_category_badge_link_class');


// Change heading class
function tailwind_cards_change_heading_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "h3";
  }
  return $class;
}
add_filter('bootscore/class/loop/card/title', 'tailwind_cards_change_heading_class');

// Change excerpt class
function tailwind_cards_change_excerpt_class($class) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    return "small fw-lighter";
  }
  return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt', 'tailwind_cards_change_excerpt_class');



// Add custom footer with date and button for tailwind-cards context
function tailwind_cards_custom_footer($location) {
  if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
    ?>
    <div class="card-text d-flex align-items-center mt-auto">
      <div class="post-date small text-body-secondary fw-lighter">
        <i class="fa-solid fa-calendar-days"></i> <span><?php echo get_the_date(); ?></span>
      </div>

      <a class="btn btn-sm btn-custom rounded-pill shadow px-3 ms-auto" href="<?php the_permalink(); ?>">
        Learn more <i class="fa-solid fa-arrow-right"></i>
      </a>
    </div>
    <?php
  }
}
add_action('bootscore_after_loop_tags', 'tailwind_cards_custom_footer');