תמונות רספונסיביות

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

תהנו!

תמונות רספונסיביות מי אתן?

תמונות רספונסיביות

 

תמונות רספונסיביות בוורדפרס

אז כפי שכתבה רחלי, ה-core של וורדפרס ממלא כעת את מאפייני ה-srcset וה-sizes באופן אוטומטי. ערך ברירת המחדל של sizes הוא:

(max-width: {{image-width}}px) 100vw, {{image-width}}px)

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

אתם ודאי תוהים אילו תמונות מכניסה וורדפרס ב-srcset. אז ככה – וורדפרס משתמשת בגדלים המיוצרים ע”י וורדפרס בעת העלאת התמונה כדי להכניס ל-srcset, אבל רק אלה שהם באותה פרופורציה כמו התמונה המקורית (כלומר, אלה שרק עברו soft crop). אם רוצים שהיא תשתמש בגדלים אחרים, אפשר לומר לה זאת בפונקציה שיושבת על הפילטר wp_calculate_image_srcset.
חוץ מזה, כהגנה מפני הוספת srcset גדול מדי, יש פילטר max_srcset_image_width המאפשר לתבניות להגדיר את רוחב התמונה המקסימלי שניתן לכלול ברשימות srcset. ברירת המחדל היא 1600 פיקסלים.

דבר נוסף שקרה הוא שהתווסף גודל תמונה דיפולטיבי נוסף בשם medium_large ברוחב 768 פיקסלים, וללא הגבלת גובה. הוא נוצר כדי לאפשר עוד גודל של תמונה לשימוש ב-srcset, אבל אפשר להשתמש בו כמו בכל גודל בוורדפרס. הוא נוצר רק עם העלאת תמונות חדשות (או ייצור גדלי תמונה חדשים עם תוסף צד שלישי). אין UI המאפשר להכניסו לפוסט או לשנות את הגודל שלו מתוך מסך מאפייני המדיה, אבל מתכנתים יכולים לשנות את הרוחב של הגודל החדש עם update_option() כמו כל גודל תמונה דיפולטיבי.

יש בפוסט ב-make.core הרבה תגובות, וכדאי לקרוא אותן – לפחות את אלה שמחבר הפוסט (Joe McGill) מגיב אליהן, כי יש שם עוד מידע מעניין על מקרי קצה או הסברים מעמיקים על אופן הפעולה של הפונקציות החדשות. למשל מישהו שם שואל איך ה-srcset ו-sizes לוקחים בחשבון צפיפות מסך. המחבר עונה לו שדפדפנים התומכים ב-srcset ו-sizes לוקחים בחשבון את צפיפות המסך כשהם בוחרים source מתאים, כך שזה יספק תמיכה מלאה ב-retina כל עוד התמונה המקורית גדולה מספיק לאפשר לוורדפרס ליצור גדלים מתאימים.

איך נכנסים מאפייני ה-srcset ו-sizes לתגית ה-img? הם מוכנסים ע”י פילטר, כשהפוסט עולה באתר. פירוש הדבר הוא שהמאפיינים האלה לא נשמרים בבתוכן הפוסט (כלומר בבסיס הנתונים), ואי אפשר לראות אותם בטאב עורך הטקסט במסך עריכת הפוסט. הסבר על ההחלטה הזאת נמצא בפוסט אחר ב-make. להלן עיקרי הסיבות:

• מאפיין ה-sizes מתאר לדפדפן את ה-layout המתוכנן של התמונה לפני שהדף מרונדר, כדי שהוא יוכל לבחור את ה-source המתאים של התמונה. מאחר שהתבנית יודעת הכי טוב מה ה-layout הנכון, היא צריכה להיות מסוגלת לפלטר את ערכי ה-sizes – דבר שלא יוכל להיעשות אם נשמור את הקוד בגוף הפוסט.
• על מנת לוודא התאמה עתידית אם משתמש יחליף תבנית (במיוחד אם השינוי יגרור יצור גדלי תמונה חדשים) או אם וורדפרס תשנה את האופן שבו היא מתמודד עם layout-ים.
• חוסך עימות עם עריכה של מאפייני התמונה בתוכן הפוסט, כולל גרירה לשם הגדלה/הקטנה.
• מרחיב את התמיכה בתמונות רספונסיביות לפוסטים קיימים. זה היה הפיצ’ר הכי מבוקש, ופילטר תצוגה הוא הדרך היחידה – מלבד עריכה מסיבית של תכני משתמש בבסיס הנתונים – לספק סוג כזה של ההתאמה אחורנית.

איך זה מיושם?

• מוצאים את כל התמונות בתוך פוסט שספריית ה-uploads נמצאת בנתיב  שלהם
• מנסים למצוא את ה-id ואת הגודל מתוך מאפיין ה-class שוורדפרס מוסיף, ולהעביר אותם לפונקציות שמייצרות srcset ו-sizes
• אם זה לא עובד, מנסים למצוא התאמה בין ה-src של התמונה לנתיבי תמונה ב-metadata של attachments.

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

מאחורי הקלעים של הפוסט

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

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

מתברר שבשביל דברים כאלה אנחנו מחזיקים אחת רחלי. באחד מן הימים, היא שלחה לצוות דואל באלה המלים:

זה מראה שהיא מתלהבת מהנושא, לא? חשבתי על זה כמה ימים, ואז החלטתי לאתגר אותה:

אחרי שבוע כבר היתה לרחלי טיוטה שאפשר היה לעבוד עליה במשותף:

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

ומה אתכם, מה אתם אומרים על תמונות רספונסיביות?