assets.json: תמונות וקישור לשדות

הקובץ הזה מצהיר על קובצי תמונה שנארזים בפרויקט, ואפשר גם להגדיר באמצעותו איזה שדה תוכן כל תמונה מאתחלת. כך אפשר לספק תמונת התחלה שימושית במקום לבקש מבעל האתר להתחיל מדף ריק.

assets.json

{
  "hero": {
    "file": "assets/hero.webp",
    "field": "hero.image",
    "alt": "The studio team at work"
  }
}

הבנת הדוגמה

• hero הוא שם לוגי של נכס. הוא אינו מזהה נכס.
• file הוא נתיב יחסי לפרויקט תחת assets/. הוסיפו את התמונה האמיתית שלכם לנתיב הזה; ה־JSON אינו יוצר אותה.
• field מצביע על שדה הנכס hero.image שהוגדר ב־definition.json. הקישור מספק לשדה תמונת התחלה.
• alt מתאר את התמונה. כתבו טקסט נגיש בעל משמעות, במקום לחזור על שם הקובץ.

שדה היעד חייב להתקיים ולהיות מסוג asset. לכל שדה יכול להיות קישור נכס אחד בלבד. נתיבי קבוצה כמו hero.image נתמכים; אל תפנו לשדה טקסט ואל תניחו שנתיב דרך רשימה יקשר תמונה לכל הפריטים.

פיתוח מקומי ופרסום

יצירת נתוני דמה מייצרת מזהה עקבי לכל נכס ארוז ומקשרת אותו לתוכן. היא מספקת גם רשומות תמונה מוכנות לשימוש. בעת stage, נכסי ברירת המחדל מיובאים לערוץ החנות. לאחר מכן בעל האתר יכול לבחור נכסי ערוץ בעורך התוכן.

התייחסו לערך של נכס שנבחר כמחרוזת מזהה, ולא ככתובת. העבירו ל־Picture את אובייקט הנכס שה־SDK פתר; אל תרכיבו כתובות בעצמכם. גם השם הלוגי של הנכס הארוז זמין עבור נכס ברירת המחדל שלו. בתמונה שבעל האתר יכול לערוך, מצאו את המזהה שנבחר כרגע:

---
import Picture from '@shoplifter/presentation-sdk/Picture.astro';
const { content, assets } = Astro.props;
const heroImage = content.hero.image ? assets[content.hero.image] : undefined;
---
{heroImage && <Picture asset={heroImage} alt={heroImage.alt ?? ''} sizes="100vw" />}

הריצו אימות, בנייה ואימות פלט לבדיקת הקבצים המותרים ותגיות התמונות. ראו רכיבי SDK לממשקי SDK 0.3.0 הנפרדים עבור תמונות חיצוניות מפורשות ותמונות YouTube; הכתובות האלה אינן מזהי נכסי ערוץ.