pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 06:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Implement Cloudflare Image Variants

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 14:09:51 +00:00
parent 9fc12be7e1
commit f57ae0d3ce
17 changed files with 216 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/rides/RideCard.tsx
View File

@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { Ride } from '@/types/database';
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
interface RideCardProps {
ride: Ride;
@@ -57,9 +58,15 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
<div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
<img
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${ride.card_image_id}/public` : ride.image_url)}
src={ride.card_image_url || getCloudflareImageUrl(ride.card_image_id, 'card') || ride.image_url}
srcSet={ride.card_image_id ? `
${getCloudflareImageUrl(ride.card_image_id, 'cardthumb')} 600w,
${getCloudflareImageUrl(ride.card_image_id, 'card')} 1200w
` : undefined}
sizes="(max-width: 640px) 600px, 1200px"
alt={ride.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
loading="lazy"
/>
) : (
<div className="opacity-50 flex items-center justify-center">

9
src/components/rides/RideModelCard.tsx
View File

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
import { FerrisWheel } from 'lucide-react';
import { RideModel } from '@/types/database';
import { useNavigate } from 'react-router-dom';
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
interface RideModelCardProps {
model: RideModel;
@@ -45,9 +46,15 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
>
{(cardImageUrl || cardImageId) ? (
<img
src={cardImageUrl || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${cardImageId}/public`}
src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
srcSet={cardImageId ? `
${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
${getCloudflareImageUrl(cardImageId, 'card')} 1200w
` : undefined}
sizes="(max-width: 640px) 600px, 1200px"
alt={model.name}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
loading="lazy"
/>
) : (
<div className="flex items-center justify-center h-full">