BookStack/resources/views/pages/parts/image-manager-list.blade.php
Dan Brown a139c2a8a2
Image manager: Improved screen reader usage
Added extra labels, or removed duplicate info, to improve screen reader
ux after testing via gnome/fedora/firefox screen reader usage testing.
2023-05-29 16:21:44 +01:00

28 lines
1.0 KiB
PHP

@foreach($images as $index => $image)
<div>
<button component="event-emit-select"
option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}"
class="image anim fadeIn text-link"
style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
<img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}"
role="none"
width="150"
height="150"
loading="lazy">
<div class="image-meta">
<span class="name">{{ $image->name }}</span>
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>
</div>
</button>
</div>
@endforeach
@if(count($images) === 0)
<p class="m-m text-bigger italic text-muted">{{ trans('common.no_items') }}</p>
@endif
@if($hasMore)
<div class="load-more">
<button type="button" class="button small outline">{{ trans('components.image_load_more') }}</button>
</div>
@endif