הוספת תמונות בגדלים מותאמים אישית בוורדפרס

בעת בניית אתר בוורדפרס לעתים נרצה להשתמש בתמונות בגדלים שונים.
במדריך זה נראה כיצד נוכל להוסיף גדלים מותאמים אישית.

מדוע?

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

כיצד?

נו, נכון שכדאי לדעת? קדימה 🙂
אז לפני שנוסיף גדלים, עלינו לדאוג שהתבנית שלנו תומכת ב-post-thumbnails.
על מנת לעשות זאת, חפשו את השורה הבאה בקובץ functions.php, מצאתם? מעולה, התבנית שלכם תומכת.
לא מצאתם? הוסיפו ויש לכם תבנית שתומכת ב-post-thumbnails.

add_theme_support('post-thumbnails');

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

add_image_size(name, width, height, crop);

אז מה קורה כאן? פשוט. מאוד.
הפונקציה מקבלת 4 פרמטרים:

name – המזהה של גודל התמונה. (נדרש)
width – רוחב התמונה בפיקסלים. (נדרש)
height – גובה התמונה בפיקסלים. (נדרש)
crop – ערך true יבצע חיתוך של התמונה לגודל הרצוי, ערך false (ברירת מחדל) יבצע שינוי גודל התמונה בלבד. (רשות)

דוגמא:

add_image_size('post-header-thumbnail', '1600', '1200', true);

בדוגמה זו למשל, הגדרנו גודל חדש בשם post-header-thumbnail, רוחב התמונה יהיה 1600 פיקלסים, גובהה יהיה 1200 וורדפרס תחתוך את התמונה לגודל שציינו.

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

echo '<div class="post-header-thumbnail">';
    echo get_the_post_thumbnail(the_ID(), 'post-header-thumbnail');
echo '</div>';

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

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)