Sponsor Showcase

This block will loop through each of your sponsors and provide link to their website.

Set up your Sponsors Data Source:

Use this code to build a Sponsor Showcase:

<script>// <![CDATA[
(function(){
  function ready(fn){
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn, {once:true});
    } else { fn(); }
  }

  function boot(){
    // Wait until jQuery exists
    if (!window.jQuery) return setTimeout(boot, 50);
    var $ = window.jQuery;
    // Wait until Slick is registered
    if (!$.fn || !$.fn.slick) return setTimeout(boot, 50);

    $('.sponsors-carousel').not('.is-initialized')
      .on('init', function(){ $(this).addClass('is-initialized'); })
      .slick({
        dots: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 6000,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        adaptiveHeight: false
      });
  }

  ready(boot);
})();
// ]]></script>


<style><!--
.sponsors-carousel-section {
  width: 100%;
  padding: 1.5rem 0;
  background: transparent;
}

.sponsors-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.sponsor-slide img {
  display: block;
  width: auto;
  height: auto;
min-height: 180px;
  object-fit: contain;
  filter: brightness(0.95);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
  transition: transform 0.3s ease, filter 0.3s ease;
  padding:20px;
}

.sponsor-slide:hover img {
  filter: brightness(1.05);
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
}

/* Make sure the carousel adapts to the container */
.slick-track, .slick-list {
  display: flex;
  align-items: center;
}
--></style>
<h2 style="text-align: center; color: white;">Sponsors</h2>
<section class="sponsors-carousel-section">
  <div class="sponsors-carousel">
    {% for sponsor in sponsors %} 
      {% if sponsor.advertiser_url %} 
        <a href="{{ sponsor.advertiser_url }}" target="_blank" rel="noopener noreferrer" class="sponsor-slide"> 
          <img src="{{ get_graphic(sponsor.advertiser_logo) }}" alt="{{ sponsor.advertiser_name }}" /> 
        </a> 
      {% else %}
        <div class="sponsor-slide">
          <img src="{{ get_graphic(sponsor.advertiser_logo) }}" alt="{{ sponsor.advertiser_name }}" />
        </div>
      {% endif %} 
    {% endfor %}
  </div>
</section>