128 lines
6.7 KiB
PHP
128 lines
6.7 KiB
PHP
<div x-data="{
|
|
showFullscreen: false,
|
|
async toggleFullscreen() {
|
|
if (!this.showFullscreen) {
|
|
this.showFullscreen = true;
|
|
await this.$nextTick();
|
|
const elem = this.$refs.fullscreenModal;
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.webkitRequestFullscreen) {
|
|
elem.webkitRequestFullscreen();
|
|
} else if (elem.msRequestFullscreen) {
|
|
elem.msRequestFullscreen();
|
|
}
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
this.showFullscreen = false;
|
|
}
|
|
}
|
|
}"
|
|
@fullscreenchange.window="if (!document.fullscreenElement) { showFullscreen = false }"
|
|
@webkitfullscreenchange.window="if (!document.webkitFullscreenElement) { showFullscreen = false }"
|
|
@msfullscreenchange.window="if (!document.msFullscreenElement) { showFullscreen = false }">
|
|
@if ($post != null && isset($post->slug))
|
|
|
|
<div class="relative flex flex-col bg-theme-background">
|
|
<!-- Caption overlay calculation -->
|
|
@php
|
|
$bottomText = '';
|
|
$isLink = false;
|
|
$linkUrl = '';
|
|
$mediaOwner = isset($post->media_owner) && !empty($post->media_owner) ? $post->media_owner : '';
|
|
|
|
if (isset($post->author_id) && !empty($post->author_id)) {
|
|
$bottomText = $post->author;
|
|
$isLink = true;
|
|
$linkUrl = url('user/' . $post->author_id);
|
|
} elseif (isset($post->media_caption) && !empty($post->media_caption)) {
|
|
$bottomText = $post->media_caption;
|
|
} elseif (isset($post->content) && !empty($post->content)) {
|
|
$bottomText = strip_tags($post->content);
|
|
}
|
|
@endphp
|
|
|
|
<div class="relative flex flex-col justify-center overflow-hidden bg-theme-background {{ !$media ? 'pt-32 pb-32' : '' }}">
|
|
|
|
<!-- Photo - full width spanning entire screen -->
|
|
@if ($media != null && method_exists($media, '__invoke'))
|
|
<div @click="toggleFullscreen()" class="cursor-pointer">
|
|
{{ $media('hero', ['class' => 'w-full h-auto']) }}
|
|
</div>
|
|
|
|
<!-- Caption overlaid on image - positioned like author in article card -->
|
|
@if (!empty($bottomText) || !empty($mediaOwner))
|
|
<div class="absolute bottom-0 w-full">
|
|
<div class="w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28">
|
|
<div class="flex flex-col items-end gap-1">
|
|
@if (!empty($bottomText))
|
|
<h4 class="inline-flex items-center gap-2 rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-lg font-normal text-white">
|
|
@if ($isLink && isset($post->author_profile_photo_path) && $post->author_profile_photo_path)
|
|
<a href="{{ $linkUrl }}" @click.stop class="flex-shrink-0">
|
|
<img src="{{ Storage::url($post->author_profile_photo_path) }}"
|
|
alt="{{ $bottomText }}"
|
|
class="w-4 h-4 lg:w-5 lg:h-5 rounded-full profile-photo object-cover">
|
|
</a>
|
|
@endif
|
|
@if ($isLink)
|
|
<a href="{{ $linkUrl }}" @click.stop class="text-white hover:underline">
|
|
{{ $bottomText }}
|
|
</a>
|
|
@else
|
|
{{ $bottomText }}
|
|
@endif
|
|
</h4>
|
|
@endif
|
|
@if (!empty($mediaOwner))
|
|
<h6 class="inline-block items-center rounded-sm bg-theme-brand mt-2 px-1.5 pb-0.5 pt-0.5 text-[10px] lg:text-xs font-normal text-white">
|
|
{{ $mediaOwner }}
|
|
</h6>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Excerpt text centered - big like article title (only if no media) -->
|
|
@elseif (isset($post->excerpt) && !empty($post->excerpt))
|
|
<div class="flex items-center justify-center px-6 md:px-10 lg:px-14">
|
|
<h2 class="text-3xl lg:text-5xl font-semibold leading-tight text-center text-theme-text-background bg-theme-brand p-6 m-8">
|
|
{{ $post->excerpt }}
|
|
</h2>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full-screen modal -->
|
|
<div x-show="showFullscreen"
|
|
x-ref="fullscreenModal"
|
|
@click="toggleFullscreen()"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black"
|
|
style="display: none;">
|
|
|
|
@if ($media != null && method_exists($media, '__invoke'))
|
|
<div class="relative w-full h-full flex items-center justify-center p-4">
|
|
<!-- Full-screen image - use first (largest) responsive image -->
|
|
@php
|
|
// Get the largest responsive image URL (first in array = largest)
|
|
$responsiveImages = $media->getResponsiveImageUrls('hero');
|
|
$largestImageUrl = !empty($responsiveImages) ? reset($responsiveImages) : $media->getUrl('hero');
|
|
@endphp
|
|
<img src="{{ $largestImageUrl }}"
|
|
alt="{{ $post->title ?? '' }}"
|
|
class="max-w-full max-h-full object-contain"
|
|
loading="eager">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|