FLEXIContent slider for youtube or image

item-slider.php

<?php

// No direct access
defined( '_JEXEC' )or die( 'Restricted access' );


// GET URL
//function url(){
//  return sprintf(
//    "%s://%s",
//    isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http',
//    $_SERVER['SERVER_NAME']
//  );
//}

FlexicontentFields::getFieldDisplay( $item, "slider" );

if ( FlexicontentFields::getFieldDisplay( $item, "slider" ) != "" ) {

  ?>
<?php

$fvals = $item->fieldvalues[ 202 ];
$tinySlider = $item->fields[ 'slider' ];
$largePic = $tinySlider->thumbs_src[ 'large' ];
//$originalPic = $tinySlider->thumbs_src['original'];
$mediumPic = $tinySlider->thumbs_src[ 'medium' ];
$smallPic = $tinySlider->thumbs_src[ 'small' ];
$thumbPic = $tinySlider->thumbs_src[ 'backend' ];


$sl_layout = '';
for ( $i = 0; $i < count( $largePic ); $i++ ):
  $v = JArrayHelper::getValue( $fvals, $i );
if ( @unserialize( $v ) !== false || $v === 'b:0;' )$v = unserialize( $v );


//VARIABLES
$dataSubTitle = '';
$dataSubDesc = '';
$aTitle = '';
$alt = '';


//GET TITLE
if ( $v[ 'title' ] !== '' ) {
  $dataSubTitle = 'data-title="' . $v[ 'title' ] . '"';
  $aTitle = 'title="' . $v[ 'title' ] . '"';
  $alt = $v[ 'title' ];
}
//USE ALT IF TITLE IS MISSING
//    if ( $v[ 'title' ] == '' && $v[ 'alt' ] !== '' ) {
//      $dataSubTitle = 'data-title="'.$v[ 'alt' ].'"';
//      $aTitle = 'title="'.$v[ 'alt' ].'"';
//    }

//GET ALT
//    if ( $v[ 'alt' ] !== '' ) {
//      $alt = $v[ 'alt' ];
//    }

//USE TITLE IF ALT IS MISSING
//    if ( $v[ 'alt' ] == '' && $v[ 'title' ] !== '' ) {
//      $alt = $v[ 'title' ];
//    }

//GET DESCRIPTION
if ( $v[ 'desc' ] !== '' ) {
  $dataSubDesc = ' data-description="' . nl2br( $v[ 'desc' ] ) . '"';
  $alt = $v[ 'desc' ];
}

if ( $v[ 'title' ] !== '' && $v[ 'desc' ] !== '' ) {
  $alt = $v[ 'title' ] . ': ' . $v[ 'desc' ];
}

if ( $v[ 'mediaurl' ] == '' ) {
  $imgUrls = ' data-srcset="' . JURI::base( true ) . $smallPic[ $i ] . ' 480w, ' . JURI::base( true ) . $mediumPic[ $i ] . ' 1023w, ' . JURI::base( true ) . $largePic[ $i ] . ' 1024w"';
  $imgSizes = ' data-sizes="(max-width: 600px) 480px, (max-width: 1024px), (min-width: 1024px)"';


  //IMG THUMB WIDTHS/HEIGHTS (Don't put true in JURI::base)  
  list( $lsource_w, $lsource_h ) = getimagesize( JURI::base() . $thumbPic[ $i ] );
  $imgDims = 'width="' . $lsource_w . '" height="' . $lsource_h . '" ';

  $sl_layout .= '<div class="item">';
  $sl_layout .= '<a href="' . $largePic[ $i ] . '" ' . $dataSubTitle . $dataSubDesc . $imgSizes . $imgUrls . ' class="is-lightbox" ' . $aTitle . '>';
  $sl_layout .= '<img data-src="' . JURI::base( true ) . $thumbPic[ $i ] . '" ' . $imgDims . ' alt="' . $alt . '" src="' . JURI::base( true ) . 'images/transparent.gif" class="block no-load" loading="lazy">';
  $sl_layout .= '</a>';
  $sl_layout .= '</div>';
  //echo '<img src="' . JURI::base(true) . $thumbPic[ $i ] . '" ' . $imgDims . ' alt="' . $alt . '" class="block w100" loading="lazy">';
}


if ( $v[ 'mediaurl' ] != '' ) {

  $datavideo = $v[ 'mediaurl' ];
  //GET YOUTUBE ID
  if ( preg_match( '/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/', $datavideo, $match ) ) {
    $datavideo = $match[ 1 ];
    $provider = "youtube";
    $linkURL = 'https://www.youtube-nocookie.com/embed/' . $datavideo . '';
    $picURL = 'https://img.youtube.com/vi_webp/' . $datavideo . '/mqdefault.webp';

  }


  $sl_layout .= '<div class="item">';
  $sl_layout .= '<a class="is-lightbox no-barba" data-type="video" href="' . $linkURL . '">';
  $sl_layout .= '<img alt="' . $alt . '"  src="' . $picURL . '" class="block no-load" loading="lazy" width="320" height="180">';
  $sl_layout .= '</a>';
  $sl_layout .= '</div>';

}


endfor;
?>
<div id="js-dog-slider"></div>
<div id="js-loader2">
  <div aria-hidden="true" class="inline__loader">
    <svg class="icon icon--md icon--is-spinning" viewbox="0 0 32 32">
      <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2">
        <circle cx="16" cy="16" opacity="0.4" r="15"> </circle>
        <path d="M16,1A15,15,0,0,1,31,16" stroke-linecap="butt"> </path>
      </g>
    </svg>
  </div>
  <div class="js-hide">
    <div class="slide-buttons">
      <div id="prev"><i class="icon icon--xs icon-arrow align-self-middle"></i><span class="sr-only"><?php echo JText::_( 'PREVIOUS_SLIDE' ); ?></span></div>
      <div id="next"><i class="icon icon--xs icon-arrow align-self-middle"></i><span class="sr-only"><?php echo JText::_( 'NEXT_SLIDE' ); ?></span></div>
    </div>
    <div class="dog-slider">
      <?php echo $sl_layout;?>
    </div>
  </div>
</div>
<?php }; ?>