Initial commit
This commit is contained in:
Ronald Huynen
135
resources/views/livewire/main-page/image-card-full.blade.php
Normal file
135
resources/views/livewire/main-page/image-card-full.blade.php
Normal file
@@ -0,0 +1,135 @@
|
||||
<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)
|
||||
|
||||
<div class="relative flex flex-col bg-theme-background my-9">
|
||||
<!-- 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 within container -->
|
||||
@if ($media != null)
|
||||
<div @click="toggleFullscreen()" class="w-full mx-auto max-w-7xl 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-4 md:py-6 lg:py-8">
|
||||
<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-3 pb-1.5 pt-1 text-base lg:text-xl 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-5 h-5 lg:w-6 lg:h-6 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-1 px-2 pb-0.5 pt-0.5 text-xs lg:text-sm 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)
|
||||
<div class="relative w-full h-full flex items-center justify-center p-4">
|
||||
<!-- Close button -->
|
||||
{{-- <button @click="toggleFullscreen()"
|
||||
class="absolute top-4 right-4 z-10 text-white hover:text-gray-300 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button> --}}
|
||||
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user