การลบคุณสมบัติภาพและคำอธิบายภาพ


9

คำถามนี้เป็น offshoot จากการสนทนานี้ในการลบคุณลักษณะมิติจากภาพ โค้ดโซลูชันที่ให้ไว้ในเธรดนั้นทำงานได้ดีมากยกเว้นว่าจะมีผลข้างเคียงที่โชคร้ายที่รหัส[caption]ย่อใด ๆจะถูกสไทรพ์จากรูปภาพ

หลังจากขุดผ่านคอร์หลายชั่วโมงฉันพบสาเหตุของสิ่งนี้ ปลั๊กอิน wpeditimage TinyMCE ที่รับผิดชอบในการเพิ่มรหัสย่อ[caption]ตรวจสอบแอตทริบิวต์ความกว้างในรหัสย่อและimgแท็ก หากไม่พบพวกเขาเพียงแค่ลบคำบรรยาย ตั้งแต่นี้เสร็จแล้ว 'ทันที' ด้วย javascript ในโปรแกรมแก้ไข TinyMCE ฉันไม่สามารถนึกถึงตัวกรอง WordPress ที่จะแก้ไขปัญหานี้ได้ ฉันจะมีความสุขมากที่จะพิสูจน์ผิด :)

ในฐานะที่เป็นโน้ตสุดท้ายโซลูชันชั่วคราวของฉันคือการใช้ 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');

อืม ... ความสามารถในการใช้ตัวแก้ไขภาพเป็นสิ่งจำเป็นหรือไม่? หากคุณใช้ตัวแก้ไข HTML เพียงอย่างเดียวตัวกรองในimg_caption_shortcode จะทำงานได้ดี ...
goldenapples

@goldenapples ใช่ฉันไม่ต้องการหลวมโปรแกรมแก้ไขภาพเพราะฉันกำลังจะมีคนที่ไม่มีความรู้ด้านเทคนิคแก้ไขไซต์ ขอบคุณสำหรับคำแนะนำว่า ความคิดอื่น ๆ ?
Dominic P

Dominic คุณสามารถระบุรหัสสำหรับ "ตัวกรองใน img_caption_shortcode เพื่อป้องกันไม่ให้มีการใช้สไตล์ความกว้าง" ได้หรือไม่? นี่คือสิ่งที่ฉันต้องการ แต่ฉันไม่รู้วิธีเขียนตัวกรองนั้น

@ เวนดี้อืมฉันไม่สามารถวางสิ่งทั้งหมดลงในความคิดเห็นได้ หากคุณต้องการถามคำถามอื่นและให้ลิงก์กับฉันฉันจะโพสต์เป็นคำตอบ
Dominic P

ในกรณีที่คุณไม่ต้องการที่จะไปถึงทุกที่ฉันเป็นพื้นปรับเปลี่ยนเพียงตัวอย่าง Codex
โดมินิค P

คำตอบ:


18

อาจไม่ใช่คำตอบที่แน่นอนที่คุณตามมา แต่ฉันคิดว่าฉันเพิ่งพบวิธีแก้ปัญหาที่ดีงาม

Iv'e นำรหัสต่อไปนี้มาจากธีมยี่สิบเอ็ด (CSS ที่ตอบสนองอย่างประณีต):

/* 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 */
}

สิ่งนี้เพียงพอที่จะทำให้ภาพทั้งหมดตอบสนอง (อย่างน้อยภาพเหล่านั้นที่ฝังอยู่ในเนื้อหา ... ) ตอนนี้ฉันมีภาพที่ตอบสนอง แต่เมื่อใช้คำบรรยายภาพฉันยังคงมีปัญหาเดียวกันที่เกิดขึ้นเพราะ TinyMCE เพิ่มคุณลักษณะสไตล์ให้กับ ภาชนะคำบรรยายที่มีความกว้างของภาพ ในการแก้ไขสิ่งที่ฉันต้องทำคือเพิ่มลงใน CSS ของฉัน:

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

ทำ! ทำงานได้ดีสำหรับฉันแม้ว่าอาจใช้งานไม่ได้กับภาพเด่น

ฉันหวังว่านี่จะช่วยให้ใครบางคน :-)


ฉันยังไม่มีเวลาที่จะทดสอบสิ่งนี้อย่างเต็มที่ แต่มันก็ได้รับการพิสูจน์แล้วว่ามีประโยชน์ในด้านอื่น ๆ ขอบคุณสำหรับความช่วยเหลือ
โดมินิก P

ความสุขของฉัน :-)
Talbatz

ทดสอบใน IE9 ดูเหมือนจะไม่ทำงานตามที่ตั้งใจ!
Kuldeep Daftary

สิ่งนี้ขัดแย้งกับเบราว์เซอร์ IE รุ่นเก่า
Tosh

ทางออกที่ดีจริงๆ! ขอบคุณ
emjay
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.