טיפ וורדפרס: שימוש בסקריפט PHP לגדלי תמונות מותאמים אישית
* הטיפ הזה רלוונטי גם עבור וורדפרס אבל הסקריפט ניתן ליישום בכל מערכת PHP.
וורדפרס מאפשרת לחתוך שלושה גדלים שונים של תמונות – תמונה מוקטנת, בינונית וגדולה. המידות של כל סוג גודל אמנם ניתנות להתאמה אישית בהגדרות המדיה אך ישנם מקרים בהם נרצה יותר גדלי תמונות, שישמשו אותנו באזורים שונים באתר. למשל, עבור קטגוריה "חדשות לוהטות", נרצה תמונות במידות קטנות במיוחד, ועוד מידת בינתיים נוספת להצגת תמונות ליד "מאמרים מומלצים במיוחד".
החל מגרסה 2.9, וורדפרס שיפרה את מערך הטיפול שלה בקבצי מדיה וכוללת כעת גם עורך גרפי בסיסי, בעזרתו ניתן לחתוך תמונות. כמו כן וורדפרס מאפשרת בצורה מובנה לשייך תמונה מוקטנת לפוסט ישירות בממשק עריכת הפוסט, תמונות אשר יוצגו לצד הפוסט בארכיונים השונים.
עם זאת, לא מתאפשר להגדיר יותר מאשר שלושה גדלים במערכת. מה נעשה במקרים בהם נרצה גדלים נוספים לתמונות?
סקפריט PHP פשוט המטפל בגדלי תמונות מותאמים אישית
הסקריפט timthumb מאפשר להשתמש בצורה פשוטה ונוחה במידות מותאמות אישית לתמונות. דרך העברת מיקום התמונה המקורית יחד עם פרמטרים נוספים ב- GET, נוצר קובץ בתיקיית cache במידות המתאימות והקובץ מוצג לגולש.
הסקריפט מקבל חמישה פרמטרים, כאשר רק הראשון (src) הוא חובה. מצמידים אותו למאפיין src באלמנט img ב-html. הפרמטרים האפשריים הם:
src – נתיב התמונה המקורית לחיתוך
w – רוחב חדש
h – גובה חדש
zc – zoom-crop, חיתוך בזום. (0 – כבוי ברירת מחדל, 1 פעיל)
q – איכות. מקסימום 100, ברירת מחדל 75
דוגמה למשל לשימוש בסקריפט
1 | <img src="/scripts/timthumb.php?src=/images/whatever.jpg&w=150&h=200&zc=1" alt="some alt text" title="some title" /> |
כאמור, הסקריפט הזה ניתן לשימוש ויעבוד בכל מערכת PHP, אבל אתמקד פה בשילוב הסקריפט במערכת וורדפרס באופן פשוט.
לא צריך להוסיף שדות מותאמים אישית באופן ידני
בפוסט בנושא, מסביר Chad Coleman איך להשתמש בסקריפט הזה וליישם אותו בעזרת שדות מותאמים אישית. בדרך הזו, יש להגדיר שדה מותאם אישית בפוסט ולהדביק בתוכו את הלינק לתמונה אותה רוצים להציג.
הדרך הזו אפשרית והיתה בשימוש זמן רב בתבניות רבות שעסקו בהצגת תמונות בצורה מותאמת אישית. עם זאת, אפשר לעשות את זה בצורה פשוטה יותר לתפעול שוטף, כך שלא יהיה צריך להזין עבור כל פוסט חדש, שדה מותאם אישית שוב ושוב.
ישנן שלוש אפשרויות, ואראה דוגמאות קוד לשלושתן. אפשרות אחת היא, למי שכבר עובדים עם תמונות פוסט מוקטנות בתבנית, להפעיל את הסקריפט על התמונה המוקטנת השל הפוסט. כך, אם נניח יש לכם תמונה לכל מאמר בעמוד הבית, ועוד תפריט צדדי בו רוצים להציג מאמרים אחרונים עם תמונות מוקטנות, תוכלו להשתמש באותה תמונה שמוגדרת כתמונה מוקטנת, ובאזור האחר להפעיל את הסקריפט לגודל הרצוי.
כל תמונה המשויכת לפוסט שמורה במערכת עם קישור לפוסט. שימו לב, כדי שהסקריפט יעבוד צריך להעביר לו את ה-URL של התמונה ולא את התמונה עצמה.
כדי שהסקריפט יעבוד לכם, פתחו תיקיה בשם scripts בתוך תיקיית ערכת העיצוב שלכם, ובתוכה שמרו אותו. בתוך התייקיה הזו, פתחו ספריה בשם cache. המבנה שאמור להיות לכם כעת הוא –
../wp-content/themes/yourthem/scripts/timthumb.php
../wp-content/themes/yourthem/scripts/cache
את הקוד הבא מקמו בתוך הלופ, במקום שבו רוצים את התמונה:
1 2 3 4 | <?php $thumbID = get_post_thumbnail_id($post->ID); ?> <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo wp_get_attachment_url($thumbID); ?>&h=60&w=60&zc=1" alt="<?php the_title(); ?>" /> |
בדוגמה הזו, התמונה שמוגדרת בתוך תמונה מוקטנת של הפוסט, תוצג ותהיה בגודל של 60 על 60.
לינק התמונה דרך XML
דרך שנייה לקבל את מיקום התמונה, שנותנת תוצאה זהה, היא דרך פרסוס XML לאובייקט שמחזירה הפונקציה get_the_post_thumbnail. אפשרות זו תעבוד רק למי שהשרת שלהם תומך ב-PHP 5, אבל אין סיבה היום שיהיה שרת שלא יתמוך בזה.. נוסיף את הקוד הבא:
1 2 3 4 5 | <?php $xmlme = simplexml_load_string(get_the_post_thumbnail()); $thumbnailsrc = $xmlme->attributes()->src; ?> <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumbnailsrc; ?>&h=30&w=30&zc=1" alt="<?php the_title(); ?>" /> |
גם למי שעוד לא התקדם לתמונות פוסט מוקטנות
האפשרות השלישית היא למי שלא עובדים עדיין עם תמונות פוסט מוקטנות וגם למי שצריך תמיכה אחורה. באפשרות הזאת, פונים ל-URL של התמונה הראשונה המשויכת לפוסט, ומשתמשים בה כבסיס לתמונה שמוצגת לצד הפוסט בארכיונים, בטיזרים וכדו'.
כדי להשתמש בשיטה הזו, כתבתי פונקציית עזר שתשלוף את התמונה הראשונה המשוייכת לפוסט. התמונות בעצם מאוחסנות כפוסטים ילדים של הפוסט אליו הן שייכות, וכך נשלוף אותה.
הוסיפו לקובץ functions.php של ערכת העיצוב, או לקובץ פונקציות מותאם אישי את הקוד הבא:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function tc_get_post_image($post_id) { $images = get_children(array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'numberposts' => 1, 'post_mime_type' => 'image')); if ($images){ foreach ($images as $image) return $image->guid; } else return false; } |
לאחר מכן, שתלו בתוך הלופ, במקום בו תרצו להציג את התמונה, את השורה הבאה:
1 | <img src="?php bloginfo('template_directory'); ?/scripts/timthumb.php?src=?php echo tc_get_post_image($post-ID); ?>&h=80&w=80&zc=0" alt="<?php the_title(); ?>" /> |
כדי לייצר תמיכה בתמונות מוקטנות וגם תמיכה אחורה לפוסטים שלא משויכות להן תמונות מוקטנות, מבלי להזדקק להזין את כל התמונות מחדש, אפשר לשלב בין שני הקודים האלה ולהתנות בעזרת הפונקציה has_post_thumbnail כדי לבדוק האם לפוסט יש תמונה מוקטנת, ואז לבצע את החלק הראשון, ואם אין לו, אז לבצע את החלק השני.
- הורידו את הסקריפט timthumb.
8 תגובות »
פיד RSS לתגובות בפוסט | טראקבק
פוסט מאוד יפה, תודה מאור.
אבל מה לגבי פוסטים ממש ישנים? מהתקופםה בה לא השתמשנו ב wp-uploader, כשהוספנו תמונות בעזרת פקודות HTML? איך גורמים ל timthumb לזהות את התמונות האלה?
פורסם לאחרונה אצל רמי.. מדריך: יצירת חנות וירטואלית תוך דקות בעזרת Google Checkout store gadget
בעיקרון ה timthumb צריך לקבל את ה url של התמונה.
אפשר לבדוק בדטהבייס אם לינק לתמונה שמור בשדה משלו באיזה מקום ואז לכתוב פונקציה כדי למשוך אותו משם.
אם האימאג' הוא חלק מ the_content בתור html ואין לו שדה ייחודי ב-DB שם, אז זה יותר מורכב קצת, אולי אפשר להחזיר את התוכן ולשלוף מתוכו – בעזרת פונקציות על סטרינגים או ביטוי רגולרי – את הלינק של התמונה הראשונה שהוא מוצא, ואז להעביר את הלינק הזה ל-timthumb .
אני באופציה השנייה, אין לי שדה ב-DB עם הלינק לתמונה.
כלומר צריך לכתוב פונקציה שתרוץ על כל הפוסטים משנת 2000 ועד נובמבר 2009, תשלוף את הלינק של התמונה ותשמור אותו בשדה נפרד ב-DB.
יש לי מושג עם מישהו עשה את זה כבר? תוסף מוכן או קוד באינטרנט?
אני לא יודע אם עשו את זה כבר, אבל אפשר להריץ חיפושים, אולי מישהו כבר עשה את זה פעם..
תודה, מאוד שימושי,
הצלחתי להשתמש בפונקציה רק כשאני מעלה תמונה לפוסט,
וכשאני בוחרת תמונה שכבר הועלתה לאתר בפוסט אחר- התמונה לא מוצגת,
יש דרך להציג תמונות שכבר הועלו בפוסטים אחרים??
אני לא בטוח שהבנתי..
בעיקרון אם לא צירפת תמונה לפוסט דרך הפיצ'ר של תמונת פוסט, והעלית תמונה לתוך הפוסט עצמו, אז את צריכה להשתמש בפונקציית עזר שכתבתי בסוף הפוסט.
אם זה לא עובד עם תמונות שכבר שויכו לפוסט אחר אז צריך לבדוק את זה ולראות איך התמונות האלה מופיעות בדטהבייס ואז לכתוב אולי עוד פונקציית עזר כדי לטפל במקרים שכאלה..
I was searching for this wordpress function for many days, thanks for posting.
[...] תוכן ובכל תוכן יש תמונה אחת לפחות). אפשר היה גם להשתמש ב-timthumb, שהוא סקריפט php שחותך תמונות on-the-fly, כדי להציג את הגודל [...]