สร้างรูปขนาดย่อสำหรับรูปภาพที่แนะนำเท่านั้น

ฉันต้องการทราบว่ามีวิธีง่ายๆ (รหัสที่กำหนดเองหรือปลั๊กอิน) เพื่อสร้างขนาดรูปขนาดย่อเฉพาะสำหรับรูปภาพที่ฉันตั้งใจจะใช้เป็นรูปภาพเด่น (index.php, archive.php ฯลฯ ) แต่ไม่ใช่สำหรับรูปภาพ ใช้ในการโพสต์ (single.php) เป้าหมายหลักของฉันคือลดการใช้พื้นที่เซิร์ฟเวอร์โดยไม่สร้างภาพขนาดย่อที่ชุดรูปแบบของฉันจะไม่ใช้

ภาพขนาดย่อของฉันจะมีสองขนาดเท่านั้นคือกว้าง 720px และกว้าง 328px และรูปภาพเด่นที่มีขนาดกว้าง 720px (หน้าแรกเท่านั้น) จะมีขนาดกว้าง 328px (สำหรับไฟล์เก็บถาวร. php และ sidebar.php)

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

ฉันต้องการรหัสที่กำหนดเองมากกว่าปลั๊กอิน แต่ปลั๊กอินจะยอมรับได้ ฉันรู้ว่ามีปลั๊กอินปรับขนาดภาพบางส่วนอยู่ที่นั่น แต่ไม่ได้อัปเดตเป็นเวลานาน (TimThumb, Dynamic Image Resizer )

ฉันได้พบคำถามที่คล้ายกันที่นี่ใน Wordpress SE แต่คำตอบที่ยอมรับไม่ได้แก้ปัญหาของฉัน

แก้ไข: ฉันจำเป็นต้องลบหรือป้องกันภาพขนาดย่อสำหรับภาพภายในโพสต์ไม่ใช่ภาพที่โดดเด่นเช่น:

(1) ภาพเด่น : ภาพขนาดย่อเพิ่มเติมที่สร้างขึ้นอัตโนมัติโดย WP ถือว่าโอเค

(2) รูปภาพที่ใช้ภายในโพสต์ : อัปโหลดภาพดั้งเดิมและไม่สร้างขนาดเพิ่มเติม ฉันจะครอบตัดย่อและปรับขนาดภาพก่อนที่จะอัปโหลดและขนาดเดียวจะพอดีกับความต้องการของฉัน

ฟังก์ชั่นนี้จะสร้างภาพโดยการลงทะเบียนขนาดภาพชั่วคราวเป็นการสร้างภาพ (หากจำเป็น) และการลบขนาดเพื่อไม่ให้สร้างภาพใหม่ในขนาดนั้น

function lazy_image_size($image_id, $width, $height, $crop) {
    // Temporarily create an image size
    $size_id = 'lazy_' . $width . 'x' .$height . '_' . ((string) $crop);
    add_image_size($size_id, $width, $height, $crop);

    // Get the attachment data
    $meta = wp_get_attachment_metadata($image_id);

    // If the size does not exist
    if(!isset($meta['sizes'][$size_id])) {
        require_once(ABSPATH . 'wp-admin/includes/image.php');

        $file = get_attached_file($image_id);
        $new_meta = wp_generate_attachment_metadata($image_id, $file);

        // Merge the sizes so we don't lose already generated sizes
        $new_meta['sizes'] = array_merge($meta['sizes'], $new_meta['sizes']);

        // Update the meta data
        wp_update_attachment_metadata($image_id, $new_meta);
    }

    // Fetch the sized image
    $sized = wp_get_attachment_image_src($image_id, $size_id);

    // Remove the image size so new images won't be created in this size automatically
    remove_image_size($size_id);
    return $sized;
}

มันเป็น "ขี้เกียจ" เพราะภาพจะไม่ถูกสร้างขึ้นจนกว่าพวกเขาจะต้องการ

ในกรณีที่ใช้งานของคุณคุณจะเรียกมันlazy_image_sizeด้วยรหัสรูปขนาดย่อโพสต์เพื่อให้ได้ภาพขนาดที่ต้องการ ภาพจะถูกสร้างขึ้นในการโทรครั้งแรก การโทรครั้งต่อไปจะดึงภาพที่มีอยู่

สรุปสาระสำคัญ: https://gist.github.com/mtinsley/be503d90724be73cdda4

คุณสามารถดูลิงค์นี้ มีตัวอย่างเช่น

add_action( 'after_setup_theme', 'baw_theme_setup' );
function baw_theme_setup() {
  add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
  add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
}

1. ไปที่หน้าแดชบอร์ด> การตั้งค่า> สื่อ
2. ยกเลิกการเลือกภาพขนาดย่อของคร็อปกับขนาดที่แน่นอน (ปกติรูปขนาดย่อเป็นสัดส่วน)
3. ป้อน 0 สำหรับอินพุตทั้งหมด (0 สำหรับทุกขนาด)
4. เพิ่มสิ่งเหล่านี้ลงใน

// Enable support for Post Thumbnails, and declare sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 400, array("center","center") );
function fw_add_image_insert_override($sizes){
    // unset( $sizes['thumbnail']);
    unset( $sizes['small']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'fw_add_image_insert_override' );

5. ตรวจสอบให้แน่ใจว่าไม่มีบรรทัดโค้ดในฟังก์ชั่นของคุณเริ่มต้นด้วยadd_imge_size หมายเหตุ::ฉันสมมติว่าคุณใช้ขนาด 400x400 สำหรับรูปขนาดย่อของคุณตอนนี้เมื่อคุณอัปโหลดรูปถ่ายมันจะสร้างเพียง 2 รุ่นแทนอย่างน้อย 4 รุ่น เหมือนก่อนหน้านี้

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

เนื่องจากไม่มีอินเทอร์เฟซดังกล่าว (อยู่นอกกรอบ) เพื่อระบุตัวเลือกดังกล่าวในระหว่างการดำเนินการอัปโหลดดังนั้นคุณจึงไม่สามารถป้องกันการสร้างภาพเพิ่มเติม - เว้นแต่จะมีปลั๊กอินที่เพิ่มคุณสมบัตินี้

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

คุณไม่สามารถใช้รายละเอียดขนาดเฉพาะของคุณเองเช่นนี้ได้หรือไม่? the_post_thumbnail( array(100, 100) );

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

หากคุณพยายามชดเชยภาพที่มีขนาดเล็กเกินไปหรือภาพที่มีขนาดใหญ่เกินไปในโพสต์คุณสามารถใช้บางสิ่งได้

1. CSS: คุณสามารถเพิ่มรายการลงในสไตล์ชีทของคุณเช่น.post-entry img { max-width:200px; max-height:300px; }นี้เป็นสากลและมีประสิทธิภาพมากกว่าการพึ่งพาขนาดของภาพตัวเอง - นั่นเป็นเวลาของ Photoshop มากมาย

2. แม่แบบ: คุณสามารถแก้ไขไฟล์เทมเพลตที่โพสต์ HTML กำลังสร้างและระบุขนาดภาพเช่นนี้:

ดูเอกสารนี้ได้ที่เวิร์ดเพรส: https://codex.wordpress.org/Function_Reference/the_post_thumbnail

สวัสดี - ฉันมีปัญหาที่คล้ายกัน WooCommerce ใช้ภาพแคตตาล็อกสำหรับแคตตาล็อกและภาพผลิตภัณฑ์ที่เกี่ยวข้อง ไม่เหมาะสำหรับคุณที่จะสูญเสียคุณภาพของภาพหรือความเร็ว ดังนั้นฉันจึงพยายามเพิ่มหมวดหมู่ภาพที่สี่สำหรับผลิตภัณฑ์ที่เกี่ยวข้องของฉัน Howdy McGee ได้แก้ปัญหาแล้ว โปรดดูคำตอบของ Howdy McGees:

แก้ไขขนาดภาพผลิตภัณฑ์ที่เกี่ยวข้อง: อ่านรหัสของเขา !

มันได้ผลอย่างงดงามสำหรับความต้องการของฉัน สำหรับปัญหาของคุณสามารถใช้ตรรกะเดียวกันได้ หวังว่านี่จะช่วยได้

ความนับถือ,

ธีโอ

**ส่วนที่เพิ่มเข้าไป: **

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้

ขั้นตอนที่ 1:กำหนดขนาดรูปขนาดย่อใหม่ใน functions.php ของคุณ ตรวจสอบการอ้างอิง: wp codex !

/*add your custom size*/
add_action( 'after_setup_theme', 'your_theme_setup' );
function your_theme_setup() {
add_image_size( 'your-thumb', 123, 123, true );//insert your values
}

หมายเหตุ: 'your-thumb' คุณจะใช้ชื่อตัวแปรนี้ในภายหลัง

ขั้นตอนที่ 2:จากนั้นเพิ่มรหัสต่อไปนี้ทุกที่ที่คุณต้องการแสดงผลิตภัณฑ์เด่นของคุณ:

    <h1>featured products</h1> 
    <div class="woocommerce">
    <ul class= "products">

    <?php
    $args = array( 'post_type' => 'product', 'meta_key' => '_featured','posts_per_page' => 4,'columns' => '4', 'meta_value' => 'yes' );
     $loop = new WP_Query( $args );

     while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                    <li class="product post-<?php echo get_the_ID(); ?>">    
                        <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                            <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                            <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>
                            <h3><?php the_title(); ?></h3><span class="price"><?php echo $product->get_price_html(); ?></span>

                    </li>

    <?php endwhile; ?>
    <?php wp_reset_query(); ?> 
    </ul>
    </div>

การอ้างอิงและข้อมูล: ( www.haloseeker.com/display-woocommerce-featured-products-without-a-shortcode/ )

ฉันวางไว้ใน index.php (หน้าแรกของฉัน) ของ wootheme mystyle อย่าลืมใช้ 'your-thumb' ออนไลน์:

<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>

ขั้นตอนที่ 3:สร้างภาพขนาดย่อใหม่ใช้ปลั๊กอินhttps://wordpress.org/plugins/regenerate-thumbnails/

ขั้นตอนที่ 4:รีเฟรชเบราว์เซอร์และตรวจสอบ DOM และเปรียบเทียบค่า

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

สิ่งเดียวที่ฉันไม่สามารถทำได้จนถึงตอนนี้คือการเพิ่มปุ่มเพิ่มไปยังรถเข็นเพราะฉันไม่ทราบวิธีการเขียนตัวแปรลงในรหัสย่อของปุ่มเพิ่มไปยังรถเข็น นี่คือรหัส:

<?php echo do_shortcode('[add_to_cart id="variable number?"]'); ?>

ฉันหวังว่านี่จะช่วยได้.

มีวิธีที่สง่างามมากขึ้นในการทำเช่นนี้ เช่นกับฟังก์ชั่นใน functions.php

ความนับถือ,

ธีโอ