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:
parent
e4a0a9ab0f
commit
c3a29fa47c
4 changed files with 56 additions and 51 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue