Refactor event creation and display: Remove debug logs from event creation page, enhance layout for better responsiveness, and implement image URL fallback logic in event detail and index pages. Improve error handling for image loading.

This commit is contained in:
Jennie Robinson Faber 2025-08-27 17:14:02 +01:00
parent e4a0a9ab0f
commit c3a29fa47c
4 changed files with 56 additions and 51 deletions

View file

@ -21,13 +21,12 @@
<!-- Feature Image Header -->
<div v-if="event.featureImage && (event.featureImage.publicId || event.featureImage.url)" class="relative h-96 overflow-hidden">
<img
:src="event.featureImage.publicId
? getOptimizedImageUrl(event.featureImage.publicId, 'w_1200,h_400,c_fill')
: event.featureImage.url"
:src="getImageUrl(event.featureImage)"
:alt="event.featureImage.alt || event.title"
class="w-full h-full object-cover"
@error="handleImageError"
/>
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
<div class="absolute inset-0" style="background-color: rgba(0, 0, 0, 0.4);"></div>
<div class="absolute inset-0 flex items-center">
<UContainer>
<div class="max-w-4xl">
@ -366,6 +365,29 @@ const getOptimizedImageUrl = (publicId, transformations) => {
return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
}
// Get image URL with fallback logic
const getImageUrl = (featureImage) => {
if (!featureImage) return ''
// If we have a direct URL, use it as primary (since seed data uses external URLs)
if (featureImage.url) {
return featureImage.url
}
// Fallback to Cloudinary if we have a publicId
if (featureImage.publicId) {
return getOptimizedImageUrl(featureImage.publicId, 'w_1200,h_400,c_fill')
}
return ''
}
// Handle image loading errors
const handleImageError = (event) => {
console.warn('Image failed to load:', event.target.src)
// Optionally hide the image container or show a placeholder
}
// Handle registration submission
const handleRegistration = async () => {
isRegistering.value = true