תמונות

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

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

צף לצד הטקסט

בתמונה שבצד שמאל יש גם את class="attempt-right", שמציב את התמונה בצד שמאל במסכים גדולים יותר, אבל מאלץ את התמונה לפריסה אנכית במסכים קטנים יותר, בטאבלטים ובמסכים קטנים יותר, שבהם הצבת התמונה בצד שמאל עלולה לגרום לבעיות. אפשר גם להשתמש ב-class="attempt-left". כדי להשתמש ב-attempt-left וב-attempt-right יחד, צריך לוודא שהרכיב attempt-left מופיע קודם.

כשהתמונות צפות, הן לא יכולות לחרוג מ-50% מרוחב העמודה. אם כן, הם עוברים שינוי קנה מידה.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

אפשר להשתמש באותן כיתות כדי להציג ב-float אלמנטים אחרים, כמו <figure> שמכיל גם תמונה וגם כיתוב:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

ניקוי טקסט צף

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

<p class="clear">Hello world.</p>

דוגמה עם הכיתה clear

בדוגמה הזו, הפסקה השנייה כוללת מחלקה clear.

הפסקה הזו מקיפת את התמונה הצפה . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

לפסקה הזו יש קלאס ברור והיא לא מתעקפת סביב התמונה הצפה. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

דוגמה ללא הכיתה clear

בדוגמה הזו, שני הקטעים מתקפלים סביב התמונה הצפה.

הפסקה הזו מקיפת את התמונה הצפה. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

הפסקה הזו מקיפת את התמונה הצפה. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

תמונות בעיצוב כהה

ב-DevSite יש קבוצה קטנה של שמות של כיתות שאפשר להחיל על תמונות כדי לשנות את המראה שלהן כשהעיצוב הכהה מופעל.

הכהיית תמונה

כברירת מחדל, כל התמונות, מלבד קובצי SVG, כהות מעט בעיצוב כהה.

כדי להסיר את עמעום ברירת המחדל מתמונה כשהעיצוב הכהה מופעל, מוסיפים לתמונה את הכיתוב no-filter:

<img src="/path/to/image.jpg" class="no-filter" alt="">

היפוך תמונה

בתמונות עם צבעים שחורים או כהים מונוכרומטיים, מוסיפים לתמונה את הכיתה invert כדי שהיא תוצג בצבע לבן או בהיר בעיצוב כהה:

<img src="/site-assets/logo-github.png" class="invert" alt="">

בדף _index.yaml, מוסיפים invert לשדה classname של פריט שורה:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

תמונה נפרדת של וריאנט בעיצוב כהה

אם רוצים לספק תמונה נפרדת שמוצגת רק כשהעיצוב הכהה מופעל, צריך לעטוף את הרכיב <img> הקיים ברכיב <picture> ולהוסיף רכיב <source> לווריאנט של העיצוב הכהה.

בדוגמה הבאה, יש שני קובצי SVG של המותג המילולי של Google בתוך רכיב <picture>. כשהעיצוב הכהה מושבת, מוצג קובץ התמונה בתוך האלמנט <img>, שבו מוצג לוגו המותג עם ארבעת צבעי המותג של Google. כשהעיצוב הכהה מופעל, מוצג קובץ התמונה בתוך האלמנט <source>, שבו הסמל המילולי לבן לגמרי ואין בו צבעים של המותג.

דוגמה

קוד

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

הערות

מכיוון שהעיצוב הכהה מופעל באמצעות דגל תכונה, חשוב לשים לב לפרטים הבאים לגבי המאפיינים של האלמנט <source>:

הרכיב <source> חייב לכלול את הכיתה devsite-dark-theme, שמספקת הוק לקצה הקדמי של DevSite כדי לעדכן את מאפיין המדיה ואת הערך שלו בהתאם לאפשרות של העיצוב הכהה שבחר המשתמש: light,‏ dark או device. הערך של מאפיין המדיה חייב לכלול שאילתה של מדיה מסוג (prefers-color-scheme: dark). אם כבר יש לכם רכיבי <source> עם שאילתות media במאפיין המדיה, תוכלו לצרף לשאילתות המדיה הקיימות את הביטוי and (prefers-color-scheme: dark) או להוסיף רכיב <source> חדש שהערך של מאפיין המדיה שלו הוא (prefers-color-scheme: dark). השאילתה media והערך שלה יוסרו או יוחלפו בהתאם לאפשרות העיצוב הכהה שבחר המשתמש. מבחינה טכנית, שם הקובץ של התמונה עם גרסת העיצוב הכהה במאפיין srcset יכול להיות כל שם, אבל מומלץ לצרף את -dark-theme לשם הקובץ של התמונה הקיימת.