@@ -414,6 +549,9 @@ const ArticleBody = ({ introHtml, sections, sectionImages, imagesLoading, rawHtm
);
}
+ // Get the first in-article image (position 0)
+ const firstImage = sectionImages.length > 0 ? sectionImages[0] : null;
+
return (
{introHtml && }
@@ -424,6 +562,8 @@ const ArticleBody = ({ introHtml, sections, sectionImages, imagesLoading, rawHtm
image={sectionImages[index] ?? null}
loading={imagesLoading}
index={index}
+ imagePlacement={getImagePlacement(index)}
+ firstImage={firstImage}
/>
))}
@@ -535,13 +675,13 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
const byPosition = new Map
();
sorted.forEach((img, index) => {
- const pos = img.position ?? index + 1;
+ const pos = img.position ?? index;
byPosition.set(pos, img);
});
const usedPositions = new Set();
const merged: ImageRecord[] = prompts.map((prompt, index) => {
- const position = index + 1;
+ const position = index; // 0-based position matching section array index
const existing = byPosition.get(position);
usedPositions.add(position);
if (existing) {
@@ -561,7 +701,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
image_path: undefined,
prompt,
status: 'pending',
- position,
+ position, // 0-based position
created_at: '',
updated_at: '',
account_id: undefined,
@@ -569,7 +709,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
});
sorted.forEach((img, idx) => {
- const position = img.position ?? idx + 1;
+ const position = img.position ?? idx;
if (!usedPositions.has(position)) {
merged.push(img);
}
@@ -596,7 +736,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
if (loading) {
return (
-
+
@@ -613,7 +753,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
if (!content) {
return (
-
+
Content Not Found
@@ -663,7 +803,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
return (
-
+
{/* Back Button */}
{onBack && (