feat: SEO SPA editor integration

web/src/components/MediaPicker.vue

@@ -39,6 +39,7 @@ const props = defineProps<{
 	variants?: ImageVariant[]
 	variantsReady?: boolean
 	plain?: boolean
+	tileRatio?: 'square' | 'landscape'
 	hint?: string
 }>()
 
@@ -50,6 +51,10 @@ const emit = defineEmits<{
 	upload: []
 }>()
 
+const tileAspect = computed(() =>
+	props.tileRatio === 'landscape' ? 'aspect-4/3' : 'aspect-square',
+)
+
 const alt = defineModel<string>('alt', { default: '' })
 const variant = defineModel<string>('variant', { default: '' })
 
@@ -242,7 +247,7 @@ onBeforeUnmount(clearDebounce)
 				data-testid="picker-skeleton-tile"
 				class="flex flex-col gap-1.5"
 			>
-				<USkeleton class="aspect-square w-full rounded-none bg-accented" />
+				<USkeleton class="w-full rounded-none bg-accented" :class="tileAspect" />
 				<USkeleton class="h-2.5 w-[70%] rounded-none bg-accented" />
 			</div>
 		</div>
@@ -279,7 +284,8 @@ onBeforeUnmount(clearDebounce)
 							<MediaThumb
 								:item="item"
 								size="md"
-								class="aspect-square w-full border border-default"
+								class="w-full border border-default"
+								:class="tileAspect"
 							/>
 							<span
 								v-if="isInArticle(item)"
@@ -303,7 +309,10 @@ onBeforeUnmount(clearDebounce)
 							data-testid="picker-skeleton-tile"
 							class="flex flex-col gap-1.5"
 						>
-							<USkeleton class="aspect-square w-full rounded-none bg-accented" />
+							<USkeleton
+								class="w-full rounded-none bg-accented"
+								:class="tileAspect"
+							/>
 							<USkeleton class="h-2.5 w-[70%] rounded-none bg-accented" />
 						</div>
 					</template>
@@ -353,7 +362,11 @@ onBeforeUnmount(clearDebounce)
 			/>
 			<UFormField
 				:label="t('Alt text (optional)')"
-				help="Describes the image for people who use a screen reader, and shows if it doesn't load. Leave it empty if the image is only decoration."
+				:help="
+					t(
+						'Describes the image for people who use a screen reader, and shows if it doesn\'t load. Leave it empty if the image is only decoration.',
+					)
+				"
 				:ui="{
 					label: 'font-medium text-highlighted',
 					help: 'text-xs/5 text-muted',