media.php

/* site/snippets/media.php */
<? if($media): ?>
<?
	$fullMediaClass = 'media-entry';
	$fullCaptionClass = 'media-caption';
	if(isset($class)){
		$mediaClass = explode(' ', $class)[0];
		$fullMediaClass .= " $mediaClass-element";
		$fullCaptionClass .= " $mediaClass-caption";
	}
	if(!isset($ratio) || $ratio == null){
		if(isset($crop) && $crop->isNotEmpty()){
			$ratio = $crop->split('/')[0] / $crop->split('/')[1];
		} elseif($media->content()->crop()->isNotEmpty()){
			$ratio = $media->content()->crop()->split('/')[0] / $media->content()->crop()->split('/')[1];
		}	elseif($media->type() == 'video'){
			$ratio = $media->videowidth()->int() / $media->videoheight()->int();
		}
	}
	if($media->link()->isNotEmpty()){
		$link = $media->link()->value();
	}
	if(!isset($width)) $width = 1280;
	if(!isset($srcset)) $srcset = 'default';
	$css = [];
	if(isset($ratio)) $css[] = '--ratio: '. $ratio;
	if(isset($mobile_ratio)) $css[] = '--mobile-ratio: '. $mobile_ratio;
?>
<figure class="media<? if(isset($class)){ echo ' '. $class; } ?>">
	<? if(isset($link) && $link): ?>
	<a href="<?= $link ?>"<? e($media->link_target() == 'blank' || isset($target) && $target == 'blank', ' target="_blank"') ?>>
	<? endif ?>
	<? if($media->type() == 'video'): ?>
		<? if(isset($mobile_video) && $mobile_video): ?>
		<video class="<?= $fullMediaClass ?>" src data-desktop="<?= $media->url() ?>" data-mobile="<?= $mobile_video->url() ?>" alt="<?= $media->alt() ?>" <?= implode(' ', isset($video_options) ? $video_options : $media->video_options()->split()) ?><? if($p = $media->page()->image($media->name() .'.jpg')){ echo ' poster="'. $p->url() .'"'; } ?>></video>
		<? else: ?>
		<video class="<?= $fullMediaClass ?>" src="<?= $media->url() ?>" width="<?= $media->videowidth() ?>" height="<?= $media->videoheight() ?>" alt="<?= $media->alt() ?>" <?= implode(' ', isset($video_options) ? $video_options : $media->video_options()->split()) ?><? if($p = $media->page()->image($media->name() .'.jpg')){ echo ' poster="'. $p->url() .'"'; } ?>></video>
		<? endif ?>
	<? else: ?>
		<? if(isset($ratio)): ?>
			<? if(isset($mobile_ratio)): ?>
			<picture>
				<source srcset="<?= $media->srcset_ratio_focuscrop($srcset, $mobile_ratio) ?>" media="(max-aspect-ratio: 1/1)">
			<? endif ?>
				<img class="<?= $fullMediaClass ?>" src="<?= $media->ratio_focuscrop($width, $ratio)->url() ?>" srcset="<?= $media->srcset_ratio_focuscrop($srcset, $ratio) ?>" sizes="<?= $sizes ?>" width="<?= $media->ratio_focuscrop($width, $ratio)->width() ?>" height="<?= $media->ratio_focuscrop($width, $ratio)->height() ?>" alt="<?= $media->alt() ?>">
			<? if(isset($mobile_ratio)): ?>
			</picture>
			<? endif ?>
		<? else: ?>
			<img class="<?= $fullMediaClass ?>" src="<?= $media->resize($width, null)->url() ?>" srcset="<?= $media->srcset($srcset) ?>" sizes="<?= $sizes ?>" width="<?= $media->resize($width, null)->width() ?>" height="<?= $media->resize($width, null)->height() ?>" alt="<?= $media->alt() ?>">
		<? endif ?>
	<? endif ?>
	<? if(isset($caption)): ?>
	<figcaption class="<?= $fullCaptionClass ?>"><?= $caption ?></figcaption>
	<? endif ?>
	<? if(isset($link) && $link): ?>
	</a>
	<? endif ?>
</figure>
<? endif ?>