วิธีการสร้างรูปขนาดย่อเมื่อจำเป็นเท่านั้น?


18

ฉันมี 1,000 ภาพ ฉันจะทำให้ wordpress สร้างหัวแม่มือได้เมื่อจำเป็นเท่านั้น ตัวอย่างเช่นตัวเลื่อนหน้าแรกจะใช้ 10 ภาพเท่านั้นฉันไม่ต้องการให้อีก 1,000 ภาพที่มีภาพขนาดย่อที่สร้างขึ้นเพราะมันเป็นการสิ้นเปลืองพื้นที่และทรัพยากร

มีวิธีในการเริ่ม add_image_size เฉพาะเมื่อจำเป็นหรือไม่

ขอบคุณ

อัปเดตตามที่คุณพูดถึงไม่ใช่ add_image_size สิ่งที่ต้องมีการไล่ สิ่งที่จะดีคือการยิงปรับขนาดภาพเมื่อฉันใช้ the_post_thumbnail ('slider-thumb'); บางทีนี่อาจทำให้ภาพมุมมองแรกของภาพช้าลง แต่โดยทั่วไปแล้วมุมมองนั้นจะถูกสร้างขึ้นโดยฉันเมื่อฉันตรวจสอบโพสต์ดังนั้นฉันจึงไม่สนใจ

ดังนั้นระหว่างการโพสต์ตัวเลื่อนบล็อก Thumbnauls รูปย่อของพอร์ตโฟลิโอ ฯลฯ ฉันมี 1,000 ภาพและฉันต้องการเพียง 10 ภาพที่จะปรับขนาดสำหรับตัวเลื่อนฉันเห็นทรัพยากรที่สูญเปล่ามากมายในการสร้างภาพขนาดย่อสำหรับภาพ 990 ภาพอื่น ๆ

หวังว่ามันชัดเจนแล้วตอนนี้ขอโทษสำหรับภาษาอังกฤษของฉัน


2
ภาพย่อที่สร้างจากภาพพิเศษ 990 ภาพทำให้เปลืองพื้นที่และทรัพยากรมากกว่าภาพที่ไม่ได้ใช้แล้ว 990 ภาพในครั้งแรก จะเป็นการดีกว่าไหมถ้าจะอัปโหลดเฉพาะภาพที่คุณกำลังใช้งานเท่านั้น
SickHippie

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

1
คุณเข้าใจฉันผิด ฉันใช้ภาพ 990 ภาพในโพสต์ฉันไม่ใช้ในแถบเลื่อนหน้าแรก บางส่วนของพวกเขาฉันต้องการ Thumbs สำหรับผลงานอื่น ๆ สำหรับ Thumbs บล็อกและอื่น ๆ
chifliiiii

คำตอบ:


12

ลองดูที่ปลั๊กอิน Dynamic Image Resizerของ Otto

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


2
โปรดทราบว่าปลั๊กอินนั้นมีปัญหากับการเพิ่มภาพในโพสต์เก่า ยินดีต้อนรับแพทช์
อ็อตโต

นั่นคือสิ่งที่ฉันกำลังมองหา ฉันจะลองดู ดังนั้นมันจะใช้ได้เฉพาะกับโพสต์ใหม่เท่านั้น?
chifliiiii

1
สำหรับผู้ที่มาโพสต์นี้ตอนนี้นี่เป็นปลั๊กอินที่คล้ายกันซึ่งดูเหมือนว่ากำลังได้รับการพัฒนา: wordpress.org/plugins/fly-dynamic-image-resizer
Tim Malone

7

ใส่สิ่งนี้ลงในไฟล์ฟังก์ชั่นธีมของคุณ มันจะหยุด Wordpress จากการสร้างอะไรก็ได้ยกเว้นขนาดเริ่มต้น 3 ขนาดเมื่อทำการอัพโหลด

เมื่อมีการร้องขอภาพในขนาดเฉพาะซึ่งยังไม่ได้สร้างภาพนั้นจะถูกสร้างขึ้นเพียงครั้งเดียว

        add_filter('image_downsize', 'ml_media_downsize', 10, 3);
        function ml_media_downsize($out, $id, $size) {
            // If image size exists let WP serve it like normally
            $imagedata = wp_get_attachment_metadata($id);
            if (is_array($imagedata) && isset($imagedata['sizes'][$size]))
                return false;

            // Check that the requested size exists, or abort
            global $_wp_additional_image_sizes;
            if (!isset($_wp_additional_image_sizes[$size]))
                return false;

            // Make the new thumb
            if (!$resized = image_make_intermediate_size(
                get_attached_file($id),
                $_wp_additional_image_sizes[$size]['width'],
                $_wp_additional_image_sizes[$size]['height'],
                $_wp_additional_image_sizes[$size]['crop']
            ))
                return false;

            // Save image meta, or WP can't see that the thumb exists now
            $imagedata['sizes'][$size] = $resized;
            wp_update_attachment_metadata($id, $imagedata);

            // Return the array for displaying the resized image
            $att_url = wp_get_attachment_url($id);
            return array(dirname($att_url) . '/' . $resized['file'], $resized['width'], $resized['height'], true);
        }


        add_filter('intermediate_image_sizes_advanced', 'ml_media_prevent_resize_on_upload');
        function ml_media_prevent_resize_on_upload($sizes) {
            // Removing these defaults might cause problems, so we don't
            return array(
                'thumbnail' => $sizes['thumbnail'],
                'medium' => $sizes['medium'],
                'large' => $sizes['large']
            );
        }

ไฟล์นี้ควรเป็นมาตรฐานใน WordPress ทำไมสร้างทุกขนาดสำหรับทุกภาพ ฉันกำลังเพิ่มรหัสนี้ให้กับธีมที่กำหนดเองของฉัน ขอบคุณ
Michaelkay

2
ดี แต่ตอนนี้มันจะยังคงสร้างภาพทั้งหมดถ้าฉันต้องการเพียงขนาดที่กำหนดเองหนึ่ง ..
Gijs

มันเกิดขึ้นเมื่อฉันใช้วัตถุภาพจากช่องที่กำหนดเองขั้นสูง
Gijs

ใช้งานไม่ได้หาก add_image_size ถูกกำหนดไว้ก่อนหน้านี้ด้วยขนาดของภาพที่เพิ่งเปลี่ยน
Benjamin Intal

@Michaelkay มีโทษประสิทธิภาพในวิธีการนี้ เมื่ออัปโหลดภาพแล้วสร้างสำหรับทุกขนาดหมายความว่าผู้อัปโหลดเป็นคนที่อดทน รหัสนี้ทำให้ผู้เยี่ยมชมต้องมีความอดทนมากขึ้นและ Google ได้พิสูจน์ไซต์ที่ใช้เวลาโหลดนานกว่า 2 วินาทีลดลง 50% ของผู้คน นอกจากนี้หากเว็บไซต์ของคุณมีการเข้าชมพร้อมกันหลายร้อยรายการสิ่งนี้จะทำให้เซิร์ฟเวอร์ของคุณพัง
Tom Roggero

2

น่าเสียดายที่คำตอบของ @ Patrick แบ่งฟังก์ชั่น srcset ที่แนะนำใน WP 4.4 โชคดีที่เราเพียงแค่ต้องเพิ่มฟังก์ชั่นสองอย่างเพิ่มเติม!

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

function bi_wp_calculate_image_srcset_meta($image_meta, $size_array, $image_src, $attachment_id){
    //all registered sizes
    global $_wp_additional_image_sizes;

    //some source file specs we'll use a lot
    $src_path = get_attached_file($attachment_id);
    $src_info = pathinfo($src_path);
    $src_root = trailingslashit($src_info['dirname']);
    $src_ext = $src_info['extension'];
    $src_mime = wp_check_filetype($src_path);
    $src_mime = $src_mime['type'];
    $src_base = wp_basename($src_path, ".$src_ext");

    //find what's missing
    foreach($_wp_additional_image_sizes AS $k=>$v)
    {
        if(!isset($image_meta['sizes'][$k]))
        {
            //first, let's find out how things would play out dimensionally
            $new_size = image_resize_dimensions($image_meta['width'], $image_meta['height'], $v['width'], $v['height'], $v['crop']);
            if(!$new_size)
                continue;
            $new_w = (int) $new_size[4];
            $new_h = (int) $new_size[5];

            //bad values
            if(!$new_h || !$new_w)
                continue;

            //generate a filename the same way WP_Image_Editor would
            $new_f = wp_basename("{$src_root}{$src_base}-{$new_w}x{$new_h}." . strtolower($src_ext));

            //finally, add it!
            $image_meta['sizes'][$k] = array(
                'file'      => $new_f,
                'width'     => $new_w,
                'height'    => $new_h,
                'mime-type' => $src_mime
            );
        }
    }

    return $image_meta;
}
add_filter('wp_calculate_image_srcset_meta', 'bi_wp_calculate_image_srcset_meta', 10, 4);

จากนั้นเราต้องเรียกใช้การแข่งขันและสร้างภาพขนาดย่อที่ขาดหายไป:

function bi_wp_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id){

    //get some source info
    $src_path = get_attached_file($attachment_id);
    $src_root = trailingslashit(pathinfo($src_path, PATHINFO_DIRNAME));

    //the actual image metadata (which might be altered here)
    $src_meta = wp_get_attachment_metadata($attachment_id);

    //an array of possible sizes to search through
    $sizes = $image_meta['sizes'];
    unset($sizes['thumbnail']);
    unset($sizes['medium']);
    unset($sizes['large']);

    $new = false;

    //loop through sources
    foreach($sources AS $k=>$v)
    {
        $name = wp_basename($v['url']);
        if(!file_exists("{$src_root}{$name}"))
        {
            //find the corresponding size
            foreach($sizes AS $k2=>$v2)
            {
                //we have a match!
                if($v2['file'] === $name)
                {
                    //make it
                    if(!$resized = image_make_intermediate_size(
                        $src_path,
                        $v2['width'],
                        $v2['height'],
                        $v2['crop']
                    )){
                        //remove from sources on failure
                        unset($sources[$k]);
                    }
                    else
                    {
                        //add the new thumb to the true meta
                        $new = true;
                        $src_meta['sizes'][$k2] = $resized;
                    }

                    //remove from the sizes array so we have
                    //less to search next time
                    unset($sizes[$k2]);
                    break;
                }//match
            }//each size
        }//each 404
    }//each source

    //if we generated something, update the attachment meta
    if($new)
        wp_update_attachment_metadata($attachment_id, $src_meta);

    return $sources;
}
add_filter('wp_calculate_image_srcset', 'bi_wp_calculate_image_srcset', 10, 5);

เพียงแค่หัวขึ้นเพื่อแจ้งให้คุณทราบว่านี่จะเป็นการยากต่อการครอบตัด! ฉันใช้เวลาหลายชั่วโมงกว่าจะพบว่านี่เป็นผู้ร้าย ฉันกำลังหาทางแก้ปัญหา ...
Constantin Groß

1

อันที่จริงแล้ว add_image_size()ไม่สร้างภาพขนาดย่อมันแค่ลงทะเบียนขนาดภาพพร้อมใช้งานสำหรับ WordPress

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

ในเวลาเดียวกันหากคุณต้องประมวลผลภาพขนาดย่อในเวลาที่แตกต่างกันอย่างแน่นอนคุณอาจต้องการดูที่ปลั๊กอินRegenerate Thumbnails ของ Viper มันใช้การกระทำตามความต้องการในการสร้างภาพขนาดย่อทั้งหมดของคุณ ... แต่คุณสามารถใช้รหัสที่คล้ายกันเพื่อสร้างรูปขนาดย่อเมื่อจำเป็นเท่านั้น


ฉันคิดว่าคุณไม่เข้าใจ เขาต้องการควบคุมภาพขนาดเล็กที่ต้องการ ดังนั้นบางภาพจึงไม่จำเป็นต้องปรับขนาดเลย
ปริญญาโทเมา

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

1

มีวิธีในการเริ่ม add_image_size เฉพาะเมื่อจำเป็นหรือไม่

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

ฉันเดาว่าความท้าทายที่ยิ่งใหญ่ที่สุดของคุณคือการหาวิธีแยกความแตกต่างระหว่างภาพที่ต้องการขนาดที่เพิ่มขึ้นและสิ่งที่ไม่ต้องการ


ฉันจะต้องเพิ่มตัวเลือกหรือช่องทำเครื่องหมายเมื่อฉันอัปโหลดสื่อเพื่อเลือกนิ้วหัวแม่มือที่ฉันต้องการสร้างตัวอย่าง ฟังดูดี แต่ฉันไม่ได้รู้วิธีการทำเช่นนั้น
chifliiiii

1

คุณสามารถใช้ปลั๊กอิน"ปรับขนาดภาพไดนามิก" ของฉัน (ไม่ใช่อ็อตโต) ได้1)

“ การปรับขนาดรูปภาพแบบไดนามิก” เป็นปลั๊กอิน WordPress (MU-) ที่มีรหัสย่อและแท็กเทมเพลตเพื่อปรับขนาดภาพ“ บนเครื่องบิน” โดยไม่ต้องใช้ TimThumb แต่ด้วยฟังก์ชั่น WP core

ปลั๊กอินมาพร้อมกับป้ายแม่แบบและรหัสผู้ใช้เป็นอย่างดี

1) เพิ่งค้นพบเกี่ยวกับปลั๊กอิน Ottos การชนกันของชื่อไม่ได้มีเจตนา


1

คุณสามารถลองใช้ปลั๊กอินนี้: https://wordpress.org/plugins/optimize-images-resizing

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


0

WP Performance Pack plugin เสนอ "การจัดการรูปภาพที่ได้รับการปรับปรุง" ซึ่งใช้ Ottos Dynamic Image Resizer แต่มีการปรับปรุงมากมายเช่น: ประการแรกมันเข้ากันได้กับ WordPress เวอร์ชั่นล่าสุด (3.9.1) ใช้ WP_Image_Editor การบันทึกรูปขนาดย่อสามารถทำได้ ถูกปิดใช้งาน (แต่สามารถถูกแคชได้และการสนับสนุน CDN กำลังใช้วิธี ist) รวมการสร้าง Thumbails ใหม่ (เพื่อลบภาพขนาดย่อที่มีอยู่) และอีกมากมาย


-1

คุณสามารถลองใช้ Aqua Resizer - https://github.com/syamilmj/Aqua-Resizer/

มันเป็นเพียงไฟล์เดียว

คุณสามารถใช้สิ่งนี้:

$img_src = aq_resize( $img_src, $width = null, $height = null, $crop = null, $single = true, $upscale = false );

$img_src = aq_resize( $img_src, 150, 150); // resized
$img_src = aq_resize( $img_src, 150, 150, true); // cropped
$img_src = aq_resize( $img_src, 150, 150, null, null, true); // image with 120x120 for example will be upscaled up to 150x150

-1

ที่นี่อีกวิธีหนึ่ง: hooks ลงในการจัดการข้อผิดพลาด HTTP 404 นั่นคือเมื่อไม่มีภาพขนาดย่อให้ค้นหาภาพต้นฉบับและสร้างภาพขนาดย่อ โปรดทราบว่าสิ่งนี้ไม่ได้แก้ปัญหาของคุณได้จริงเนื่องจากไม่ได้สร้างการสร้างภาพขนาดย่อระหว่างการอัปโหลด

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

หมายเหตุ: ปลั๊กอินนี้สามารถติดตั้งโดยใช้Pluginception

<?php
/*
Plugin Name: Create thumbnails on demand
Plugin URI: 
Description: Create thumbnails instead of showing 404. Use in combination with "Broken Link Checker" to create all missing thumbnails.
Version: 0.1
Author: Jack Miller
Author URI: 
License: 
License URI: 
*/
add_filter('status_header', 'createThumbIf404');
function createThumbIf404($httpCodeString) //e.g. HTTP/1.1 200 OK 
{
    global $wp_query;
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

    $httpCode = explode(" ", $httpCodeString);
    $httpCode = $httpCode[1];
    if ($httpCode == "404") {
        $requestUri = $_SERVER["REQUEST_URI"];
        $regex = '/^\/(wp-content\/uploads\/(?:[a-zA-Z0-9]*\/){2})(.*)-(.*)x(.*)\.jpg$/';
        preg_match($regex, $requestUri, $groups);
        if (sizeof($groups) === 5) {
            $baseDir  = $groups[1];
            $baseName = $groups[2];
            $sizeX    = $groups[3];
            $sizeY    = $groups[4];

            $oriImg = ctod_checkFile($baseDir, $baseName);
            if ($oriImg != null) {

                $image = wp_get_image_editor($baseDir . $oriImg);
                if (!is_wp_error($image)) {
                    $image->resize($sizeX, $sizeY, true);
                    $thumb = $baseDir . $baseName . '-' . $sizeX . 'x' . $sizeY . '.jpg';
                    $image->save($thumb);
                    ctod_sendImageAndExit($thumb);
                }
            }
        }
    }
}
//finds original image within $baseDir with $baseName.
//Returns file name including extension of original image or null.
function ctod_checkFile($baseDir, $baseName)
{
    $arr = array(
        ".jpg",
        ".JPG",
        ".jpeg",
        ".JPEG"
    );
    foreach ($arr as &$ext) {
        if (file_exists($baseDir . $baseName . $ext)) {
            return $baseName . $ext;
        }
    }
    return null;
}
//Read file at $path from disk and return it as HTTP JPG image request.
function ctod_sendImageAndExit($path)
{
    $fp = fopen($path, 'rb');
    header("Content-Type: image/jpeg");
    header("Content-Length: " . filesize($path));
    fpassthru($fp);
    exit();
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.