Blog & News

<section class="section overflow-hidden position-relative z-index-0">
  <div class="container">
    <div class="row mb-5 justify-content-start text-dark">
      <div class="col-lg-5 md-mb-20px">
        <h3 class="fw-600 mb-0 ls-minus-1px"><?php echo "{$post_title}";?></h3>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-12">
        <div class="outside-box-right-25 sm-outside-box-right-0">
          <div class="swiper slider-one-slide swiper-number-pagination-progress" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "pagination": { "el": ".swiper-number-line-pagination", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }' data-swiper-number-pagination-progress="true">
            <div class="swiper-wrapper"> 
<?php
$args = array(
  'post_type' => 'post',
  'showposts' => 8,
  'orderby' => 'rand',
  'cat' => 28,
);
$my_query = new WP_Query( $args );
if ( $my_query->have_posts() ) {
  while ( $my_query->have_posts() ): $my_query->the_post();
	
	$post_id = get_the_ID();
$thumbnail_id = get_post_thumbnail_id( $post_id ); // 获取图片ID
  ?>  
              <div class="swiper-slide"> 
                <div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
					<?php echo wp_get_attachment_image( $thumbnail_id, 'three', false, array(        
          'alt' => get_the_title(),            
      ) ); ?>
                  <div class="opacity-extra-medium bg-gradient-dark-transparent"></div>
                  <div class="image-content h-100 w-100  ps-15 pe-15 pt-13 pb-13 md-p-10 d-flex align-items-center justify-content-center flex-column">
                    <div class="box-overlay bg-gradient-dark-transparent"></div>
                    <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"> </div>
                    <a href="<?php the_permalink(); ?>" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a> </div>
                </div>
                <div class="card-body px-0 pt-30px pb-30px"> <a href="<?php the_permalink(); ?>" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 text-uppercase"><?php echo wp_trim_words( get_the_title(), 5, ' ...' ); ?></a>
                  <p class="mb-10px w-95"><?php echo mb_strimwidth( wp_strip_all_tags( get_the_content() ), 0, 130, '...' ); ?></p>
                  <span class="fs-13 text-end mb-5px d-block"><a href="<?php the_permalink(); ?>" class="blog-date text-dark-gray-hover"><?php the_time('M-d-y'); ?></a></span> </div>
                
                <!-- end interactive banner item --> 
                
              </div>
<?php endwhile; wp_reset_postdata(); } ?>				
            </div>
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets d-block d-sm-none"></div>         
            <div class="row align-items-center justify-content-between">
              <div class="col-md-5 swiper-pagination-wrapper d-flex align-items-center mt-25px">
                <div class="number-prev fs-14 fw-600 text-dark-gray"></div>
                <div class="swiper-pagination-progress bg-extra-medium-gray"> <span class="swiper-progress"></span> </div>
                <div class="number-next fs-14 fw-600 text-dark-gray"></div>
              </div>
              <div class="col-md-5"><a href="<?php bloginfo('url'); ?>/blog" class="border-1 mt-2 btn btn-large btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto border-color-dark-gray">View all <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"></path>
</svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>