גודל התמונות בוורדפרס (Image Sizes)

יצירה והגדרת גדלים חדשים של תמונות באתרי וורדפרס (או הסרה של גדלים).

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

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

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

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

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

גדלי תמונות ברירת המחדל בוורדפרס

וורדפרס כברירת מחדל תומכת בשלושה גדלים של תמונות. תוכלו למצוא גדלים אלו ולשנות אותם בממשק הניהול של וורדפרס תחת הגדרות > מדיה.

קביעת גודל תמונות ברירת מחדל בוורדפרס

אך מה אם אינכם מעוניינים בגדלים ספיציפים אלו ומעוניינים כי וורדפרס לא תיצור תמונה לכל אחד מגדלים אלו? במקרה זה אתם יכולים להשתמש בהוק הבא ולהוסיף אותו לקובץ functions.php:

function sv_unset_image_sizes( $def_sizes) {
	unset( $def_sizes['thumbnail']); // turn off thumbnail size
	unset( $def_sizes['medium']); // turn off medium size
	unset( $def_sizes['large']); // turn off large size
	return $def_sizes;
}

add_filter('intermediate_image_sizes', 'sv_unset_image_sizes');

איך להשתמש בגודל התמונות שוורדפרס יוצרת באתר?

דרך ממשק הניהול של וורדפרס

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

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

באמצעות קוד

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

  • get_the_post_thumbnail
  • the_post_thumbnail
  • wp_get_attachment_image_src

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

the_post_thumbnail('large');

כיצד ליצור גדלים של תמונות משלכם?

הפרוצדורה להוספת גדלים של תמונות משלכם בוורדפרס היא די פשוטה ומסתכמת בשני שלבים (כאשר השלב השני אינו חובה):

שלב 1: שימוש בפונקציה add_image_size

הוסיפו את הקוד הבא לקובץ functions.php:

function savvy_setup_images() {
	add_image_size( 'my-image-size-name', 244, 344, true );
}
add_action( 'after_setup_theme', 'savvy_setup_images' );

כאשר לפונקציה add_image_size קיימים מספר פרמטרים כברשימה הבאה:

  • השם שאתם בוחרים לגודל התמונה החדש (my-image-size-name).
  • רוחב התמונה (244px).
  • גובה התמונה (344px).
  • חיתוך התמונה (Crop) – ניתן להגדיר פה או משתנה boolean או array, כאשר false קובע שהתמונה לא תחתך כלל ו true קובע כי התמונה תחתך למרכז כברירת מחדל.

שלב שני: הוספת גודל התמונה החדש לספריית המדיה

עכשיו, לאחר שיצרתם את התמונה תוכלו להוסיף אותה לחלון העלאת הקבצים בספריית המדיה. כפי שציינו, שלב זה אינו הכרחי אך ניתן לבצע אותו בצורה מאד פשוטה על ידי הוספת הקוד הבא לקובץ functions.php:

function sv_new_image_sizes($sizes) {
	$addsizes = array(
		"my-image-size-name" => 'My New Size'
	);
	$newsizes = array_merge($sizes, $addsizes);
	return $newsizes;
}
add_filter('image_size_names_choose', 'sv_new_image_sizes');

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


כיצד ליצור מחדש את גדלי התמונות לאחר שינוי?

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

אם מדובר בשתיים שלוש תמונות אתם פשוט יכולים להעלות אותן מחדש, אך במידה וישנם הרבה תמונות – עדיף לעשות זאת בצורה אוטומטית ולייצר את הגדלים של התמונות מחדש ללא צורך להעלות שוב את התמונה. תוכלו להשתמש בתוספים כגון Ajax Thumbnail Rebuild או Force Regenerate Thumbnail שעושים את העבודה מצויין ומאד שימושיים.


כיצד ניתן להפטר מגדלים מיותרים של תמונות?

נאמר ובאתר הוורדפרס שלכם ישנם 10 סוגי תוכן מותאמים (Custom Post Types) כאשר כל אחד מהם משתמש ב 2-3 גדלים שונים של תמונות בעמודי האתר. בקלות תוכלו להגיע למצב בו וורדפרס מייצרת בין 20-30 תמונות בגדלים שונים על כל תמונה שתעלו!

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

function sv_reduce_image_sizes( $sizes ){
	/*
	 * $sizes - all image sizes array Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail )
	 * get_post_type() to get post type
	 */
	$type = get_post_type($_REQUEST['post_id']); // $_REQUEST['post_id'] post id the image uploads to

	foreach( $sizes as $key => $value ){

		/*
		 * use switch if there are a lot of post types
		 */
		if( $type == 'page' ) {
			if( $value == 'image-size-name-1' ){ // turn off 'image-size-name-1' for pages
				unset( $sizes[$key] );
			}
		} else if ( $type == 'portfolio' ) {
			if( !in_array( $value, array('image-size-name-2','image-size-name-3') ) ){ // for regions turn off everything except 'image-size-name-2' and 'image-size-name-3'
				unset( $sizes[$key] );
			}
		} else {
			if( $value != 'thumbnail' ){ // turn off everything except thumbnail
				unset( $sizes[$key] );
			}
		}
	}
	return $sizes;
}

add_filter( 'intermediate_image_sizes', 'sv_reduce_image_sizes' );

לסיכום

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

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

רועי יוסף
רועי יוסף

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

{ 4 תגובות… הוסף אחת }
  • לאה 20 במרץ 2018, 20:03

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

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

  • אלון 22 במרץ 2018, 16:37

    מה לגבי יצירה של גודל תמונה ל- page tempalte ספציפי, אני לא הצלחתי למצוא פתרון, יש לך משהו מעניין?

    פסוט מעולה כרגיל..

    • רועי יוסף 22 במרץ 2018, 16:54

      תודה אלון 🙂

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

השאירו תגובה

פעימות
איך להחזיר את כפתור ״כתובת מקוצרת״ בוורדפרס
איך להחזיר את כפתור ״כתובת מקוצרת״ בוורדפרס

כתובות מקוצרות יכולות להיות מאד שימושיות כאשר אתם משתפים כתובת מסויימת באימיילים, פייסבוק ואף הודעות...