עיצוב מותנה לתמונות שנעלמו – פלסטר לתמונות חסרות

טעויות אנוש לפעמים מובילות למחיקת קבצים של תמונות שכבר נמצאות בשימוש באתר. מקרים קלאסיים שקורים בעת מעבר שרתי אחסון או ניקוי קבצים מהדאטה בייס שחשבנו שהם כבר לא בשימוש (מסתבר שהם כן היו בשימוש, מי ידע?).בפוסט אשתף בפתרון CSS קצר, שעוזר "להדביק פלסטר" על תמונות שנמחקו ממאגר הקבצים ו"לפלפל" קצת את הנראות של הודעה דיפולטיבית כשתמונה חסרה

תוכן עניינים

מחפשים את תוכן העניינים?
הרכיב נמצא בתחתית המסך בצד שמאל 🙂

תצוגה ברירת מחדל לתמונה כשהיא חסרה בקבצים
תצוגה ברירת מחדל לתמונה כשהיא חסרה בקבצים

למרות שהפתרון הוא רק פלסטר, הוא נועד לשדר מידע ברור יותר למשתמשים שהתמונה חסרה.
אנחנו נשתמש בתגית <img>.

שני פרמטרים שכדאי לציין לגבי <img>

כדי להבין כיצד ניתן לעצב תמונות "שבורות", ישנן שתי עובדות על האופן שבו האלמנט מתנהג שעלינו להבין תחילה.

  1. ניתן לעצב את הטיפוגרפיה הקשורה לאלמנט <img>.
    סגנונות אלו יחולו על הטקסט החלופי, אם הוא יוצג, ולא ישפיעו על התמונה.
  2. האלמנט <img> הוא אלמנט מוחלף. זהו אלמנט "שמראהו ומידותיו מוגדרות על ידי משאב חיצוני" (Sitepoint). מכיוון שהאלמנט נשלט על ידי מקור חיצוני, הפסואודו אלמנטים :before ו-:after בדרך כלל לא אמורים לעבוד איתו. עם זאת, כאשר התמונה חסרה ואינה נטענת, הפסאודו אלמנטים כן יכולים להופיע.

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

יישום העיצוב עם דוגמאות

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

עיצוב ראשון לתמונה כשהיא חסרה בקבצים
עיצוב ראשון לתמונה כשהיא חסרה בקבצים

הוספת מידע מועיל

אחת הדרכים שבהן נוכל לטפל בתמונות שנעלמו היא לספק הודעה למשתמש שאומרת שהתמונה חסרה. באמצעות הביטוי attr() נוכל אפילו להציג את הקישור לתמונה החסרה.

img { font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center;width: 100%; height: auto; display: block; position: relative; }img:before { content: "We're sorry, the image below is broken"; display: block; margin-bottom: 10px; }img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }

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

נחליף את ברירת המחדל של טקסט אלטרנטיבי

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

עיצוב טקסט אלטרנטיבי עם אייקון לתמונה שלא נמצאת
עיצוב טקסט אלטרנטיבי עם אייקון לתמונה שלא נמצאת
img { /* Same as first example */ }img:after { content: "\f1c5" " " attr(alt); font-size: 16px; font-family: FontAwesome; color: rgb(100, 100, 100);display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; }

עיצוב נוסף

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

עיצוב שני לתמונה כשהיא חסרה בקבצים
עיצוב שני לתמונה כשהיא חסרה בקבצים
img { /* Same as first example */ min-height: 50px; }img:before { content: " "; display: block;position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; }img:after { content: "\f127" " Broken Image of " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100);position: absolute; top: 5px; left: 0; width: 100%; text-align: center; }

אם התמונה אינה חסרה, כאשר כל אותם סגנונות מוחלים על האלמנט, התמונה מוצגת כרגיל. הפסאודו-אלמנטים אינם נוצרים.

הפוסט המקורי נכתב באנגלית ב-2016 על ידי Ire Aderinokun, כשלא הייתה תמיכה מצד ספארי לפסאודו-אלמנטים של ::before & :after
למזלנו, זה השתנה והתמיכה רחבה – לכן הפלסטר של היום יוכל להיות מוצג בכל הדפדפנים.

סיכום

בתכל'ס אין הרבה מה לסכם, מקווה שהצלחתי לחדש לכם עם פלסטר נחמד לבעיות שקורות, קרו, ויקרו לכל אתר (אפילו אני לא חף מזה). המטרה של פתרון ה-CSS לתת מידע נוסף שהתמונה חסרה בעיצוב מותאם אישית לעיצוב של האתר.
הפוסט הוא חלק משני פוסטים שעתידים לעלות על HTML & CSS (בנפרד), כשהם יעלו, אעדכן בקישורים כאן.

שתפו את הפוסט:

פייסבוק
וואטסאפ
לינקדאין
אי-מייל
מעוניינים לקבל עדכונים על פוסטים שאני כותב במייל? >>

קיצורי מקשים שכדאי להכיר לכל מי שעובד בדיגיטל

בתור חולה אופטימיזציה, אני מעט מכור מידי להשתפרות וייעול תמידי של עצמי בזמן עבודה, החל מאימון על הקלדה עיוורת מהירה, קיצור וייעול מקשי המקלדת, קניית עכבר עם 20 מקשים (באמת), ועד לאוטומציה לתהליכים פשוטים (אין כמו לדבג 6 שעות למטלה שחורה שניתן לבצע בתוך 4 דקות).

לקריאת הפוסט

איך ליצור מיקום מותאם אישית לתיוגים באינסטגרם

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

בפוסט הבא נגלה איך להוסיף מיקום לפוסטים באינסטגרם, לסטורי, מיקום מותאם אישית בפייסבוק ובדף העסקי.

לקריאת הפוסט

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

דילוג לתוכן