Chỉ tạo hình thu nhỏ cho hình ảnh nổi bật

Tôi muốn biết nếu có một cách đơn giản (mã tùy chỉnh hoặc plugin) để tạo kích thước hình thu nhỏ chỉ cho hình ảnh mà tôi dự định sử dụng làm hình ảnh đặc trưng (index.php, archive.php, v.v.), nhưng không phải cho hình ảnh được sử dụng trong các bài viết (single.php). Mục tiêu chính của tôi là giảm sử dụng không gian máy chủ bằng cách không tạo hình thu nhỏ mà chủ đề của tôi sẽ không bao giờ sử dụng.

Hình thu nhỏ của tôi thực sự sẽ chỉ có hai kích thước, rộng 720px và rộng 328px và hình ảnh nổi bật rộng 720px (chỉ trang chủ) cũng sẽ có kích thước rộng 328px (đối với archive.php và sidebar.php)

Hiện tại, cách lập trình duy nhất tôi biết là tạo hình thu nhỏ cho mỗi lần tải lên hình ảnh , điều không mong muốn, vì hầu hết các video tải lên của tôi sẽ là đăng ảnh và tôi sẽ phải xóa rất nhiều hình ảnh khỏi máy chủ.

Tôi thích mã tùy chỉnh hơn các plugin, nhưng một plugin sẽ được chấp nhận. Tôi biết có một số plugin thay đổi kích thước hình ảnh ngoài kia, nhưng chúng chưa được cập nhật trong một thời gian dài (TimThumb, Resizer Image Dynamic ).

Tôi cũng đã tìm thấy một câu hỏi tương tự ở đây trên Wordpress SE, nhưng câu trả lời được chấp nhận không thực sự giải quyết vấn đề của tôi.

EDIT: Tôi cần xóa hoặc ngăn hình thu nhỏ cho hình ảnh bên trong bài đăng, không phải cho hình ảnh nổi bật, tức là:

(1) Hình ảnh nổi bật : hình thu nhỏ bổ sung do WP tự động tạo ra là OK.

(2) Hình ảnh được sử dụng bên trong bài viết : Tải lên hình ảnh gốc và không tạo ra bất kỳ kích thước bổ sung nào. Tôi sẽ cắt, thay đổi kích thước và tối ưu hóa hình ảnh trước khi tải lên và một kích thước sẽ phù hợp với nhu cầu của tôi.

Chức năng này sẽ tạo ra một hình ảnh bằng cách đăng ký tạm thời một kích thước hình ảnh, tạo ra hình ảnh (nếu cần) và loại bỏ kích thước để hình ảnh mới sẽ không được tạo ra trong kích thước đó.

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;
}

Đó là "lười biếng" vì hình ảnh không được tạo ra cho đến khi chúng cần thiết.

Trong trường hợp sử dụng của bạn, bạn sẽ gọi nó lazy_image_sizebằng ID hình thu nhỏ bài đăng để có được hình ảnh có kích thước mong muốn. Một hình ảnh sẽ được tạo ra trong cuộc gọi đầu tiên. Các cuộc gọi tiếp theo sẽ lấy hình ảnh hiện có.

Gist: https://gist.github.com/mtinsley/be503d90724be73cdda4

Bạn có thể thấy liên kết này . có một số ví dụ như

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. Đi tới Bảng điều khiển> Cài đặt> Phương tiện
2. Bỏ chọn Cắt hình thu nhỏ theo kích thước chính xác (thông thường hình thu nhỏ là tỷ lệ)
3.Nhập 0 cho tất cả đầu vào (0 cho tất cả các kích thước)
4.Thêm những điều này vào chức năng của bạn.php

// 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. Đảm bảo rằng không có dòng mã nào trong hàm của bạn. Bắt đầu với add_imge_size Lưu ý :: Tôi cho rằng bạn sử dụng kích thước 400x400 cho hình thu nhỏ của mình Bây giờ khi bạn tải lên ảnh, nó sẽ chỉ tạo 2 phiên bản thay vì ít nhất 4 phiên bản ảnh như trước đây.

Xin chào - tôi đã có một vấn đề tương tự. Wooc Commerce sử dụng hình ảnh danh mục cho danh mục và hình ảnh sản phẩm liên quan. Điều đó không lý tưởng, cho bạn mất chất lượng hình ảnh hoặc tốc độ. Vì vậy, tôi đã cố gắng thêm một thể loại hình ảnh thứ tư cho các sản phẩm liên quan của tôi. Howdy McGee đã giải quyết vấn đề. Xin hãy xem câu trả lời của Howdy McGees:

Sửa đổi kích thước hình ảnh sản phẩm liên quan: đọc mã của mình !

Nó đã làm việc tuyệt vời cho nhu cầu của tôi. Đối với vấn đề của bạn, logic tương tự có thể được áp dụng. Hi vọng điêu nay co ich. liên quan - theo

Tôi tìm thấy một giải pháp hoạt động. 1.step: gán kích thước hình thu nhỏ mới trong hàm.php của bạn. Kiểm tra tham khảo: 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
}

Lưu ý: 'your-thumb', bạn sẽ sử dụng tên biến này sau

2. Bước: Sau đó thêm mã sau vào bất cứ nơi nào bạn muốn hiển thị các sản phẩm nổi bật của mình:

   <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>

Tham khảo và thông tin: không đủ tiếng tăm cho liên kết thứ ba . Đừng quên sử dụng 'your-thumb' trên dòng:

<?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. Bước: tạo lại hình thu nhỏ, sử dụng plugin https://wordpress.org/plugins/regenerate-thumbnails/

4. làm mới trình duyệt và kiểm tra dom và so sánh các giá trị

Theo chủ đề của bạn, bạn có thể thay đổi đánh dấu và tên lớp. Tôi thử nghiệm phương pháp trên và nó hoạt động tốt. Điều duy nhất tôi không thể làm cho đến nay là, để thêm nút thêm vào giỏ hàng, vì tôi không biết cách viết một biến vào mã ngắn nút thêm vào giỏ hàng. Đây là mã:

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

Tôi hi vọng cái này giúp được. Chắc chắn có một cách thanh lịch hơn để làm điều này. Ví dụ với một hàm trong hàm.php

liên quan theo

để ngăn WordPress tạo các kích thước bổ sung chỉ cho một số hình ảnh nhất định, bạn sẽ phải có cách chỉ ra rằng một hình ảnh bạn đang GIỚI THIỆU sẽ chỉ được sử dụng cho một mục đích cụ thể. điều này phải xảy ra TRƯỚC KHI bạn đã tải nó lên.

vì không có giao diện như vậy (ngoài luồng) để chỉ ra các tùy chọn như vậy trong khi thực hiện hành động tải lên, nên bạn không thể ngăn việc tạo hình ảnh bổ sung - trừ khi có một plugin có thêm tính năng này.

Nhưng tại sao trên thế giới bạn sẽ không muốn kích thước hình ảnh bổ sung? bạn không bao giờ biết khi nào bạn có thể gặp phải một tình huống khi bạn muốn sử dụng một kích thước khác nhau của bất kỳ hình ảnh nào. bạn có quan tâm đến không gian lưu trữ?

bạn không thể sử dụng thông số kích thước cụ thể của riêng bạn như thế này? the_post_thumbnail( array(100, 100) );

hầu hết các câu trả lời và nhận xét tôi đã đọc ở đây giải thích cách tùy chỉnh môi trường WordPress cho kích thước hình ảnh, nhưng không đề cập đến việc làm điều đó một cách có điều kiện. ngoài ra, không ai trong số họ giải quyết thực tế bạn phải có thể chỉ ra việc sử dụng hình ảnh trước khi bạn tải nó lên.

nếu bạn đang cố gắng bù đắp cho một hình ảnh quá nhỏ hoặc một hình ảnh quá lớn trong một bài đăng, bạn có thể sử dụng một vài điều.

1. CSS: bạn có thể thêm các mục vào biểu định kiểu của mình, chẳng hạn như .post-entry img { max-width:200px; max-height:300px; }, điều này phổ biến và hiệu quả hơn là dựa vào kích thước của hình ảnh - THAT là rất nhiều thời gian photoshop.

2. Mẫu: bạn có thể thay đổi tệp mẫu nơi bài viết đầu ra HTML đang được tạo và chỉ định kích thước hình ảnh như thế này:

xem tài liệu này tại WordPress: https://codex.wordpress.org/Function_Reference/the_post_thumbnail