קורה לנו שאנחנו בונים אתר ואנחנו מתכננים שלכל המוצרים יהיו תמונות בגודל זהה
זה מסתדר לנו טוב ויפה בעיצוב
הבעיה היא שבמציאות הגולש עלול להעלות תמונות שונות ובפרופורציות שונות וכל התצוגה ששקדנו עליה עלולה להשתבש
אחד הדברים ששווה להכיר בהקשר הזה הוא את הפונקציה add_image_size
הפונקציה הזו מגדירה גודל חדש של תמונות כך שכל תמונה חדשה שיעלו לאתר תיווצר גם במידות המוגדרות בה
למשל
add_image_size( 'custom-size', 220, 180, true );
הפרמטר הראשון הוא שם הגודל שאנחנו מגדירים (ונוכל לראות אותו אח"כ באלמנטור ברשימת גדלי התמונות)
הפרמטר השני הוא רוחב התמונה
הפרמטר השלישי הוא גובה התמונה
הפרמטר הרביעי הוא האם לחתוך את התמונות שהיוזר יעלה לגודל המדוייק או לא
הנה דוגמא שתעזור להמחיש את זה:ננניח שהגדרנו גודל תמונה שהוא ריבוע (500 על 500) והגדרנו true – חיתוך לגודל המדוייק. כשהיוזר מעלה תמונה מלבנית (עומדת או שוכבת) אז חלק מהתמונה מלמעלה ולמטה או מהצדדים (בהתאמה) פשוט יחתך.
אם היה לנו תמונה של אדם עומד אז הצלמית תכלול רק את הבטן.
אם היה לנו תמונה של כלב תחש אז שוב הצלמית תכלול רק את הבטן (נאבד את הראש והזנב)
מערכת וורדפרס כברירת מחדל תקח את מרכז התמונה ותגזור את השוליים.
בהקשר הזה שווה להכיר את התוסף crop thumbnail שמאפשר לשלוט בצורת החיתוך של התמונה.
(תוסף נוסף ששווה להזכיר הוא regenerate thumbnail שמאפשר ליצור מחדש צלמיות לכל התמונות שכבר הועלו בעבר גם בגודל שהגדרנו רק הרגע)
אני חוזרת לפרמטר הרביעי
הפרמטר הרביעי כאמור זה אם לחתוך או לא
ובכן – מה יקרה אם לא נחתוך?
מה שיקרה זה שהתמונות לא באמת יווצרו בדיוק גודל החדש אלא לכל היותר ברוחב השהגדרנו ולכל היותר בגובה שהגדרנו.
מערכת וורדפרס תיצור את התמונות המוקטנות תוך שמירה על הפרופורציות שלהן. לפעמים הם יוגבלו על ידי הרוחב ולפעמים על ידי הגובה
(תלוי בפרופורציות של הגודל המוגדר ובפרופורציות של התמונה שמעלים)
הנה תרשים שיעזור להבין:
הסבר לתרשים:
בשחור אנחנו רואים שלושה מקרים שונים. הגדרות צלמית במידות ובפרורפרציות שונות.
בצבעים השונים דוגמאות של תמונות שהיוזר אולי יעלה. תמונות בפרופורציות שונות (צולמו אנכית ואופקית)
מערכת וורדפרס תיצור את התמונות המוקטנות תוך שמירה על הפרופורציות שלהן. לפעמים הם יוגבלו על ידי הרוחב ולפעמים על ידי הגובה
(תלוי בפרופורציות של הגודל המוגדר ובפרופורציות של התמונה שמעלים)
השטח השחור שמתחת לתמונה המוקטנת הצבעונית ממחיש מצבים שהתמונה המוקטנת תהיה קטנה יותר מהגודל המוגדר
אנחנו רואים את זה באתרים ששומרים תמיד מקום זהה לתמונת צלמית ולפעמים היא פשוט לא ממלאת את כל המקום שנשמר לה ויש מרווחים לבנים מלמעלה ולמטה או מהצדדים