24
במרץ
2010

טיפ וורדפרס: שימוש בסקריפט PHP לגדלי תמונות מותאמים אישית

מאת: מאור ברזני | תגובות: 8 | נושאים: וורדפרס
תגיות: , , , , |

* הטיפ הזה רלוונטי גם עבור וורדפרס אבל הסקריפט ניתן ליישום בכל מערכת 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); ?&gt;&amp;h=80&amp;w=80&amp;zc=0" alt="&lt;?php the_title(); ?&gt;" />

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

  • הורידו את הסקריפט timthumb.
שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

8 תגובות »

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה

Gravity Forms Plugin for WordPress

You can add images to your comment by clicking here.

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט