gallery fix
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
|
||||
@php($gridV2 = request()->query('grid') === 'v2')
|
||||
|
||||
{{-- Latest uploads grid — use same Nova gallery layout as /browse --}}
|
||||
<section class="px-6 pb-10 pt-6 md:px-10" data-nova-gallery data-gallery-type="home-uploads">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-gallery-grid>
|
||||
<div class="{{ $gridV2 ? 'gallery' : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6' }}" data-gallery-grid>
|
||||
@forelse($latestUploads as $upload)
|
||||
@include('web.partials._artwork_card', ['art' => $upload])
|
||||
<x-artwork-card :art="$upload" />
|
||||
@empty
|
||||
<div class="panel panel-default effect2">
|
||||
<div class="panel-heading"><strong>No uploads yet</strong></div>
|
||||
@@ -15,10 +17,14 @@
|
||||
<div class="flex justify-center mt-10" data-gallery-pagination>
|
||||
{{-- no pagination for home grid; kept for parity with browse layout --}}
|
||||
</div>
|
||||
<div class="hidden" data-gallery-skeleton-template aria-hidden="true">
|
||||
<x-skeleton.artwork-card />
|
||||
</div>
|
||||
<div class="hidden mt-8" data-gallery-skeleton></div>
|
||||
</section>
|
||||
|
||||
@push('styles')
|
||||
@if(! $gridV2)
|
||||
<style>
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] {
|
||||
display: grid;
|
||||
@@ -39,6 +45,7 @@
|
||||
[data-nova-gallery].is-enhanced [data-gallery-pagination] { display: none; }
|
||||
[data-gallery-skeleton].is-loading { display: grid !important; grid-template-columns: inherit; gap: 1rem; }
|
||||
</style>
|
||||
@endif
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
|
||||
@@ -1,128 +1 @@
|
||||
@php
|
||||
// If a Collection or array was passed accidentally, pick the first item.
|
||||
if (isset($art) && (is_array($art) || $art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection)) {
|
||||
$first = null;
|
||||
if (is_array($art)) {
|
||||
$first = reset($art);
|
||||
} elseif ($art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection) {
|
||||
$first = $art->first();
|
||||
}
|
||||
if ($first) {
|
||||
$art = $first;
|
||||
}
|
||||
}
|
||||
|
||||
$title = trim((string) ($art->name ?? $art->title ?? 'Untitled artwork'));
|
||||
$author = trim((string) (
|
||||
$art->uname
|
||||
?? $art->author_name
|
||||
?? $art->author
|
||||
?? ($art->user->name ?? null)
|
||||
?? ($art->user->username ?? null)
|
||||
?? 'Skinbase'
|
||||
));
|
||||
$category = trim((string) ($art->category_name ?? $art->category ?? ''));
|
||||
$avatarUserId = $art->user->id ?? $art->user_id ?? null;
|
||||
$avatarHash = $art->user->profile->avatar_hash ?? $art->avatar_hash ?? null;
|
||||
$avatar_url = \App\Support\AvatarUrl::forUser((int) ($avatarUserId ?? 0), $avatarHash, 40);
|
||||
$license = trim((string) ($art->license ?? 'Standard'));
|
||||
$resolution = trim((string) ($art->resolution ?? ((isset($art->width, $art->height) && $art->width && $art->height) ? ($art->width . '×' . $art->height) : '')));
|
||||
// Safe integer extractor: handle numeric, arrays, Collections, or relations
|
||||
$safeInt = function ($v, $fallback = 0) {
|
||||
if (is_numeric($v)) return (int) $v;
|
||||
if (is_array($v)) return count($v);
|
||||
if (is_object($v)) {
|
||||
if (method_exists($v, 'count')) return (int) $v->count();
|
||||
if ($v instanceof Countable) return (int) count($v);
|
||||
}
|
||||
return (int) $fallback;
|
||||
};
|
||||
|
||||
$likes = $safeInt($art->likes ?? $art->favourites ?? 0);
|
||||
$comments = $safeInt($art->comments_count ?? $art->comment_count ?? $art->comments ?? 0);
|
||||
|
||||
$img_src = (string) ($art->thumb ?? $art->thumbnail_url ?? '/images/placeholder.jpg');
|
||||
$img_srcset = (string) ($art->thumb_srcset ?? $art->thumbnail_srcset ?? $img_src);
|
||||
$img_avif_srcset = (string) ($art->thumb_avif_srcset ?? $img_srcset);
|
||||
$img_webp_srcset = (string) ($art->thumb_webp_srcset ?? $img_srcset);
|
||||
|
||||
$resolveDimension = function ($val, $fallback) {
|
||||
if (is_numeric($val)) return (int) $val;
|
||||
if (is_array($val)) {
|
||||
$v = reset($val);
|
||||
return is_numeric($v) ? (int) $v : (int) $fallback;
|
||||
}
|
||||
if (is_object($val)) {
|
||||
if (method_exists($val, 'first')) {
|
||||
$f = $val->first();
|
||||
if (is_object($f) && isset($f->width)) return (int) ($f->width ?: $fallback);
|
||||
if (is_object($f) && isset($f->height)) return (int) ($f->height ?: $fallback);
|
||||
}
|
||||
if (isset($val->width)) return (int) $val->width;
|
||||
if (isset($val->height)) return (int) $val->height;
|
||||
}
|
||||
return (int) $fallback;
|
||||
};
|
||||
|
||||
$img_width = max(1, $resolveDimension($art->width ?? null, 800));
|
||||
$img_height = max(1, $resolveDimension($art->height ?? null, 600));
|
||||
|
||||
$contentUrl = $img_src;
|
||||
$cardUrl = (string) ($art->url ?? '#');
|
||||
@endphp
|
||||
|
||||
<article class="nova-card artwork" itemscope itemtype="https://schema.org/ImageObject">
|
||||
<meta itemprop="name" content="{{ $title }}">
|
||||
<meta itemprop="contentUrl" content="{{ $contentUrl }}">
|
||||
<meta itemprop="creator" content="{{ $author }}">
|
||||
<meta itemprop="license" content="{{ $license }}">
|
||||
|
||||
<a href="{{ $cardUrl }}" itemprop="url" class="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70">
|
||||
|
||||
@if(!empty($category))
|
||||
<div class="absolute left-3 top-3 z-30 rounded-md bg-black/55 px-2 py-1 text-xs text-white backdrop-blur-sm">{{ $category }}</div>
|
||||
@endif
|
||||
|
||||
<div class="nova-card-media relative aspect-[16/10] overflow-hidden bg-neutral-900">
|
||||
<picture>
|
||||
<source srcset="{{ $img_avif_srcset }}" type="image/avif">
|
||||
<source srcset="{{ $img_webp_srcset }}" type="image/webp">
|
||||
<img
|
||||
src="{{ $img_src }}"
|
||||
srcset="{{ $img_srcset }}"
|
||||
sizes="(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 20vw"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
alt="{{ e($title) }}"
|
||||
width="{{ $img_width }}"
|
||||
height="{{ $img_height }}"
|
||||
class="h-full w-full object-cover transition-transform duration-200 ease-out group-hover:scale-[1.04]"
|
||||
itemprop="thumbnailUrl"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
|
||||
<div class="truncate text-sm font-semibold text-white">{{ $title }}</div>
|
||||
<div class="mt-1 flex items-center justify-between gap-3 text-xs text-white/80">
|
||||
<span class="truncate flex items-center gap-2">
|
||||
<img src="{{ $avatar_url }}" alt="Avatar of {{ e($author) }}" class="w-6 h-6 rounded-full object-cover">
|
||||
<span class="truncate">by {{ $author }}</span>
|
||||
</span>
|
||||
<span class="shrink-0">❤ {{ $likes }} · 💬 {{ $comments }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-white/70">
|
||||
@php
|
||||
$meta_parts = [];
|
||||
if (!empty($resolution)) $meta_parts[] = $resolution;
|
||||
if (!empty($category)) $meta_parts[] = $category;
|
||||
if (!empty($license)) $meta_parts[] = $license;
|
||||
@endphp
|
||||
{{ implode(' • ', $meta_parts) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="sr-only">{{ $title }} by {{ $author }}</span>
|
||||
</a>
|
||||
</article>
|
||||
<x-artwork-card :art="$art" />
|
||||
|
||||
Reference in New Issue
Block a user