वर्डप्रेस उत्तरदायी छवियां - रेटिना स्क्रीन पर गलत छवि का चयन

Question

मैं इस वेबसाइट पर काम कर रहे उत्तरदायी छवियों को प्राप्त करने की कोशिश करने के लिए कड़ी मेहनत कर रहा हूं और जब मैंने सोचा कि यह ठीक चल रहा है, तो मैं इसे आईपैड रेटिना पर देखता हूं स्क्रीन और यह गलत छवि का चयन कर रहा है। न केवल यह गलत आकार है बल्कि यह परिदृश्य के रूप में भी प्रदर्शित होता है, चित्र नहीं। मुझे नहीं पता कि यह ऐसा क्यों कर रहा है क्योंकि मैंने सभी अलग-अलग स्क्रीन आकारों के लिए कस्टम छवि आकार बनाए हैं और रेटिना स्क्रीन पर एक्सएल संस्करण भी इस्तेमाल किया है।

यहां स्रोत और HTML के साथ छवि का HTML है।

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" > 

के रूप में रेटिना स्क्रीन डबल पिक्सल मैं पहले iPads लक्षित करने के लिए आकार को यह जोड़ने की कोशिश की लेकिन कुछ नहीं हुआ हैं:

(min-width: 2048px) 1010px 

अजीब बात मैं 1010px के आयामों के साथ एक छवि है और है आकार में निर्दिष्ट है कि जब यह इस छवि का उपयोग करने के लिए पिक्सल दोगुना है। इसके बजाय यह इस आकार का उपयोग कर रहा है: 940x627.jpg

क्या कोई यह समझा सकता है कि यह क्यों हो रहा है?

Answer 1

सही लोग, मैं यह पता लगाने में कामयाब रहा कि पृष्ठ सही छवियों को क्यों लोड नहीं कर रहा था। जैसा कि मैंने अपने प्रश्न में उल्लेख किया है, डिफ़ॉल्ट रूप से वर्डप्रेस केवल उसी पहलू अनुपात के साथ स्रोतसेट में छवियों को लोड करेगा। यदि आप एक अलग अनुपात के साथ कस्टम छवि आकार शामिल करना चाहते हैं तो आपको उन्हें wp_calculate_image_srcset फ़ंक्शन के माध्यम से जोड़ने की आवश्यकता है।

ऐसा करने में समस्या यह है कि सभी कस्टम आकार प्रत्येक छवियों में लोड हो जाएंगे और ब्राउज़र निकटतम चौड़ाई और अनुपात के आधार पर छवि का चयन करेगा।

दूसरा, मुझे एहसास हुआ कि जिस छवि पर वर्डप्रेस पहलू अनुपात का आधार है वह मूल आकार आकार है जो आप पृष्ठ में लोड किए गए कस्टम आकार के बजाय है। तो जहां मेरे पास add_image_size('portrait-case-study-lg', 505, 757, true); के कस्टम आकार के साथ चित्र छवि थी, वास्तव में वर्डप्रेस मूल फ़ाइल से पहलू अनुपात प्राप्त कर रहा था जो 2000px x 1500px था। चूंकि इसका एक अलग अनुपात था, चित्र आकार के लिए बनाए गए छवि आकार को अनदेखा किया जा रहा था और इसके बजाय निकटतम पहलू अनुपात वाली छवि का चयन किया जा रहा था।

मैंने यह कैसे तय किया है कि यह फ़ंक्शन wp_calculate_image_srcset को निकालने के लिए था, जो स्रोतसेट में आकार जोड़ता है और इसके बजाय फ़ोटोशॉप में मूल छवियों को आकार देता है ताकि छोटे छवियों के समान पहलू अनुपात हो।

तो उदाहरण के लिए, portrait-case-study-xl का कस्टम छवि आकार रखने के बजाय मूल छवि फ़ाइल को क्रॉप करने के लिए उपयोग किया गया था। मैंने इसे हटा दिया और इसके बजाय मूल आकार को इस आकार में अपलोड किया।

add_image_size('portrait-case-study-xl', 1010, 1514, true); 
add_image_size('portrait-case-study-lg', 505, 757, true); 

इस Wordpress अब का चयन करता है अलग अलग स्क्रीन आकार पर 'portrait-case-study-lg' पहलू अनुपात के रूप में मूल रूप में ही है का मतलब है।

यह अच्छा होगा अगर वर्डप्रेस आपको मूल छवि को स्रोतसेट से निकालने की अनुमति दे, क्योंकि अब इसका मतलब है कि जब कोई ग्राहक किसी पृष्ठ पर छवि अपलोड करता है तो मैं स्वचालित रूप से सही आकार नहीं बना सकता।