กรองเพื่อลบคุณลักษณะขนาดภาพหรือไม่


35

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

ฉันทำกับภาพเด่นด้วยตัวกรองนี้:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

ฉันรู้ว่าฉันสามารถใช้ตัวกรองเดียวกันกับthe_contentได้ถ้าจำเป็น แต่มีวิธีที่ดีกว่าในการทำเช่นนี้?


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

1
บางทีคุณควรโพสต์สิ่งนี้เป็นคำถามของตัวเอง? ดูเหมือนว่าจะแตกต่างจากของฉันมากพอที่มันสมควรได้รับคำตอบ อย่างไรก็ตามฉันจะลองและตอบ ... สำหรับใครก็ตามที่ค้นหาคำตอบนี้และมีปัญหาเดียวกัน: ปัญหาของคุณคือฟังก์ชั่นimg_caption_shortcodeซึ่งประมวลผลรหัสย่อคำบรรยายต้องการให้ระบุความกว้างในแอตทริบิวต์รหัสคำบรรยายใต้ภาพ มิฉะนั้นจะข้ามคำอธิบายภาพทั้งหมดและเพียงคืนเนื้อหาที่ห่อไว้ภายใน[caption]แท็กรหัสย่อ
goldenapples

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

@ goldenapples ขอบคุณสำหรับการตอบกลับที่เป็นประโยชน์ของคุณ ฉันได้ทำตามที่คุณแนะนำและถามคำถามใหม่ที่นี่: wordpress.stackexchange.com/questions/32931/... ข้อมูลใด ๆ ที่จะได้รับการชื่นชมอย่างมาก ตามที่ฉันอธิบายในคำถามฉันไม่แน่ใจว่าตัวกรองimg_caption_shortcodeจะเพียงพอที่จะแก้ปัญหาได้
Dominic P

1
บางทีฉันอาจคิดถึงภาพรวมที่ใหญ่ขึ้นของสิ่งที่คุณกำลังพยายามทำโดยไม่เห็นเนื้อหาจริงของคุณ แต่สิ่งนี้ไม่สามารถแก้ไขได้โดยใช้ CSS เพียงอย่างเดียวใช่ไหม หากคุณใช้ความกว้างสูงสุดในรูปภาพของคุณคุณควรจะสามารถเอาชนะปัญหาความสูงได้โดยการเพิ่มความสูง: อัตโนมัติ ไปยังรูปภาพเนื้อหาของคุณ
binaryorganic

คำตอบ:


36

ขอบคุณทุกคน!

image_send_to_editorกรองเป็นคนหนึ่งผมกำลังมองหา ... ขอบคุณ @ t31os สำหรับการชี้ออก

นี่คือฟังก์ชั่นของฉันตอนนี้

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

สิ่งนี้จะลบแอททริบิวต์ขนาดอินไลน์จากภาพที่ดึงมาด้วยthe_post_thumbnail()และป้องกันไม่ให้แอททริบิวเหล่านั้นถูกเพิ่มลงในภาพใหม่ที่เพิ่มเข้ากับตัวแก้ไข ไม่ลบออกจากภาพที่ดึงมาwp_get_attachment_imageหรือฟังก์ชั่นอื่น ๆ ที่เกี่ยวข้อง (ไม่มี hooks ในนั้น) แต่กรณีเหล่านั้นสามารถประมวลผลในไฟล์เทมเพลตเมื่อจำเป็น


1
ฉันต้องลบ \ s ออกจาก regex หลังจากนั้นก็ใช้งานได้ดี ฉันคิดว่าเป็นเพราะฉันไม่ได้มีพื้นที่ต่อท้ายหลังจาก doublequote สุดท้ายในการตั้งค่าความสูง
MattSlay

1
@MattSlay เป็นเพียงฉันที่มีปัญหากับการแก้ไขเนื้อหาของเว็บไซต์อย่างถาวรหรือไม่ ชุดรูปแบบที่ตอบสนองไม่จำเป็นต้องแก้ไขเนื้อหาของเว็บไซต์เพื่อให้สามารถจัดรูปแบบได้อย่างถูกต้อง ฉันลงคะแนนให้ลบตัวกรองออกimage_send_to_editorและเพิ่มในthe_content- เช่นโพสต์บล็อกนี้แทน แยกตรรกะการนำเสนอออกจากเนื้อหา
BFTrick

1
@BFTrick - ดูเหมือนว่าเป็นบริบทของฉัน สำหรับชุดรูปแบบที่ตอบสนองได้ฉันเห็นด้วยกับคุณเพราะคุณไม่สามารถพึ่งพาเนื้อหาที่มีอยู่ซึ่งได้รับการประมวลผลด้วยวิธีนี้และคุณไม่รู้ว่าชุดรูปแบบถัดไปที่ติดตั้งนั้นจะต้องใช้คุณลักษณะส่วนข้อมูลเหล่านั้นหรือไม่ ในกรณีของฉันฉันกำลังสร้างแอพที่มีธีมเป็นส่วนประกอบของเนื้อหาดังนั้นฉันจึงเลือกวิธีที่ใช้ตัวประมวลผลน้อยมากในการประมวลผลภาพเมื่อมีการเพิ่มครั้งแรก แต่คุณทำได้ดี
goldenapples

2
คำเตือน: คำตอบนี้แบ่งคำอธิบายภาพใน WordPress 3.5.1
สาย

5

แก้ไขสคริปต์นี้เล็กน้อย ขอบคุณสำหรับความช่วยเหลือ!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
แม้ว่าระวัง การกรอง the_content จะกรองวิดีโอ youtube และแอตทริบิวต์ width / height อื่น ๆ ด้วย
MikeNGarrett

1
จริง แต่นั่นอาจเป็นสิ่งที่ดีในไซต์ที่ตอบสนอง หากหนึ่งต้องทำเพื่อภาพแล้วหนึ่งอาจต้องทำเพื่อสื่ออื่น ๆ
BFTrick

1

ถ้าคุณตั้งขนาดภาพใน function.php เป็น "คลังภาพ"

add_image_size( 'gallery', 200, 120, true );

คุณสามารถลบความกว้างและความสูงของขนาดภาพที่ต้องการเช่น "แกลเลอรี่":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

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

น่าเสียดายที่สคริปต์ที่แทรกรูปภาพนั้นสร้างขึ้นใน JavaScript และโต้ตอบกับตัวแก้ไข TinyMCE wysiwyg อาจมีวิธีการขอเข้าไปโดยตรง แต่ไม่ได้ใช้การadd_filter()โทรมาตรฐาน


1
ตัวกรองจะimage_send_to_editorทำงานที่นี่หรือไม่
t31os

@ t31os - ฉันคิดว่านั่นคือสิ่งที่ฉันกำลังมองหา! ไม่รู้ว่าทำไมฉันไม่เห็นตะขอนั้นมาก่อน
goldenapples

ฉันหวังว่ามันจะช่วยได้อย่างแน่นอนดูเหมือนว่ามันอาจจะหลอกลวง ... รายงานกลับและแจ้งให้เราทราบ :)
t31os

@ t31os ใช่แล้วนั่นเป็นเคล็ดลับ! ขอบคุณ! ฉันจะโพสต์มันเป็นคำตอบเว้นแต่คุณจะไปถึงก่อน
goldenapples

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