छवि और कैप्शन आयाम निकालना विशेषताएँ

Question

यह सवाल छवियों से आयाम विशेषताओं को हटाने पर इस चर्चा से एक नाराज है । उस थ्रेड पर प्रदान किया गया समाधान कोड बहुत अच्छी तरह से काम करता है सिवाय इसके कि इसका दुर्भाग्यपूर्ण दुष्प्रभाव है कि किसी भी [caption]शॉर्टकोड को छवि से धारीदार किया जाता है।

कोर कोड के माध्यम से खुदाई के कई घंटों के बाद, मुझे इसका कारण पता चला। Wpeditimage TinyMCE प्लगइन जो शोर्टकोड [caption]और imgटैग में चौड़ाई विशेषताओं के लिए शोर्ट चेक जोड़ने के लिए जिम्मेदार है । यदि यह उन्हें नहीं मिलता है, तो यह बस कैप्शन को हटा देता है। चूंकि, यह TinyMCE संपादक में जावास्क्रिप्ट के साथ 'फ़्लाई ऑन' किया जाता है, मैं किसी भी प्रकार के वर्डप्रेस फ़िल्टर के बारे में नहीं सोच सकता जो इस मुद्दे को संबोधित करेगा। हालाँकि मुझे गलत साबित होने में बहुत खुशी होगी। :)

अंतिम नोट के रूप में, मेरा अस्थायी समाधान निम्नलिखित jQuery का उपयोग करने के लिए सभी अपमानजनक टैग क्लाइंट पक्ष को हटाने के लिए किया गया है। img_caption_shortcodeचौड़ाई शैली को वहां उपयोग करने से रोकने के लिए फ़िल्टर के साथ संयोजन के रूप में, यह काम करने के लिए लगता है। यह सुंदर नहीं है, लेकिन यह अभी के लिए एक बैंड-सहायता है। किसी को भी एक बेहतर विचार है?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

Comments

हम्म ... दृश्य संपादक का उपयोग करने में सक्षम हो रहा है एक आवश्यकता? यदि आप केवल HTML संपादक का उपयोग करते हैं, तो img_caption_shortcode पर एक फ़िल्टर ठीक काम करता है ...

— सुनहरा

@goldenapples, हाँ, मैं दृश्य संपादक को ढीला नहीं करना चाहता क्योंकि मैं गैर-तकनीकी लोगों को साइट संपादित करने जा रहा हूं। फिर भी सुझाव के लिए धन्यवाद। कोई अन्य विचार?

— डोमिनिक पी

डोमिनिक, क्या आप "चौड़ाई पर शैली को उपयोग करने से रोकने के लिए img_caption_shortcode पर एक फिल्टर" के लिए कोड प्रदान कर सकते हैं? यह वही है जो मुझे चाहिए, लेकिन मुझे नहीं पता कि उस फिल्टर को कैसे लिखना है।

@Wendy, हम्म, मैं एक टिप्पणी में पूरी बात पेस्ट नहीं कर सकता। यदि आप एक और प्रश्न पूछना चाहते हैं और मुझे इसका लिंक देना चाहते हैं, तो मैं इसे उत्तर के रूप में पोस्ट करूँगा।

— डोमिनिक पी

यदि आप उन सभी के माध्यम से नहीं जाना चाहते हैं, तो मैंने मूल रूप से कोडेक्स उदाहरण को संशोधित किया है ।

— डोमिनिक पी

Answer 1

यह सटीक उत्तर नहीं हो सकता है आप के बाद कर रहे हैं, लेकिन मुझे लगता है कि मैं सिर्फ एक बहुत अच्छा बदलाव पाया।

Iv'e ने बीस-ग्यारह थीम CSS (जो बड़े करीने से imho है) से निम्नलिखित कोड लिया:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

यह सभी छवियों को उत्तरदायी बनाने के लिए पर्याप्त था (कम से कम सामग्री में एम्बेड किए गए ...) अब मेरे पास उत्तरदायी छवियां हैं, लेकिन जब कैप्शन का उपयोग किया जाता है, तो मेरे पास अभी भी वही समस्या है, क्योंकि यह इसलिए होता है क्योंकि LittleMCE एक शैली विशेषता जोड़ता है चित्र की चौड़ाई के साथ कैप्शन कंटेनर। यह तय करने के लिए कि मुझे अपने सीएसएस में इसे जोड़ना है:

            .wp-caption { max-width: 100%; }

किया हुआ! मेरे लिए ठीक काम करता है, हालांकि यह चित्रित छवियों के लिए काम नहीं कर सकता है।

मुझे उम्मीद है इससे किसी को सहायता मिलेगी :-)

Comments

मेरे पास अभी तक इसे पूरी तरह से परीक्षण करने का समय नहीं है, लेकिन यह पहले से ही अन्य क्षेत्रों में काफी उपयोगी साबित हुआ है। सहायता के लिए धन्यवाद।

— डोमिनिक पी

मेरी खुशी :-)

— टैल्बजेट

IE9 में यह परीक्षण किया, के रूप में काम नहीं करता है इरादा!

— कुलदीप दफ्तरी

यह पुराने IE ब्राउज़रों के साथ संघर्ष करता है

— तोश

वास्तव में महान समाधान! thx

— इमेज