איך לבטל את התכונה srcset של תמונות רספונסיביות בוורדפרס?

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

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

scrset הוא פיצ׳ר שימושי מאד להצגת תמונות רספונסיביות והוא נראה משהו בסגנון הבא:

<img src="/demo-200px.png" srcset="/demo-200px.png 1x, /demo-400px.png 2x">

אך במקרים מסויימים תרצו לבטל הוספה אוטומטית של תכונה זו, הנה כיצד לעשות זאת…

ביטול התכונה srcset המתווספת אוטומטית באתרי וורדפרס

בכדי לבטל אפשרות זו לרוחב האתר הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם:

function sv_disable_srcset( $sources ) {
    return false;
}
add_filter( 'wp_calculate_image_srcset', 'sv_disable_srcset' );

אם אתם מעוניינים להסיר את התכונה srcset מתמונות במיקום ספציפי בתבנית, למשל כשאתם משתמשים בפונקציה the_post_thumbnail() אז ניתן לעשות זאת בצורה הבאה:

remove_filter( 'wp_calculate_image_srcset_meta', '__return_null' ); // Remove that filter 
the_post_thumbnail();  // Display the post thumbnail
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' ); // add srcset filter back

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

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

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

  • איגור 25 בינואר 2021, 20:21

    באיזה מצבים הכי כדאי להוריד את זה?

    • רועי יוסף 25 בינואר 2021, 20:43

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

      • איגור 26 בינואר 2021, 16:14

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

השאירו תגובה

 

פעימות
Up!
לבלוג