केवल जरूरत पड़ने पर थंबनेल कैसे जनरेट करें?


18

मेरे पास 1000 चित्र हैं। मैं केवल जरूरत पड़ने पर अंगूठे उत्पन्न करने के लिए वर्डप्रेस कैसे बना सकता हूं। उदाहरण के लिए होम स्लाइडर केवल 10 छवियों का उपयोग करेगा, न ही मैं चाहता हूं कि अन्य 1000 छवियों में थम्बनेल उत्पन्न होता है जो कि अंतरिक्ष और संसाधनों की बर्बादी के रूप में उत्पन्न होता है।

केवल जरूरत पड़ने पर add_image_size को आग लगाने का एक तरीका है?

धन्यवाद

अद्यतन जैसा कि आप उल्लेख करते हैं कि वास्तव में add_image_size नहीं है कि इसे निकाल दिया जाना चाहिए। जब मैं the_post_thumbnail ('स्लाइडर-अंगूठे') का उपयोग करता हूं, तो छवि को आकार देने के लिए यह बहुत अच्छा होगा ; हो सकता है कि यह छवि के पहले दृश्य को धीमा कर दे, लेकिन यह दृश्य आमतौर पर मेरे द्वारा उत्पन्न होता है जब मैं वास्तव में पोस्ट की समीक्षा करता हूं, तो मुझे परवाह नहीं है।

तो मेरे पोस्ट, स्लाइडर, ब्लॉग थंबनल्स, पोर्टफोलियो थंबनेल आदि के बीच में मुझे 1000 चित्र मिले और मैं चाहता हूं कि स्लाइडर के लिए सिर्फ 10 छवियों का आकार बदला जाए, मैं अन्य 990 छवियों के लिए थंबनेल आकार उत्पन्न करने के लिए बहुत सारे बर्बाद संसाधनों को देखता हूं।

आशा है कि अब यह स्पष्ट है, मेरे अंग्रेजी के लिए खेद है


2
पहली जगह में 990 अप्रयुक्त छवियों की तुलना में अंतरिक्ष और संसाधनों की बर्बादी के अतिरिक्त 990 छवियों से उत्पन्न थंबनेल कैसे हैं? क्या यह केवल उन छवियों को अपलोड करने के लिए अधिक समझदार नहीं होगा जिन्हें आप सक्रिय रूप से उपयोग कर रहे हैं?
सिकिप्पी

हालांकि अधिक कुशल प्रोग्रामर आपके विचार के खिलाफ मान्य तर्क प्रस्तुत कर रहे हैं, मुझे यह दिलचस्प लगता है। मैंने कुछ प्लगइन्स और थीम देखीं जो अंगूठे उत्पन्न किए बिना चित्र अपलोड करती हैं (जो अभी निश्चित नहीं हैं)। लेकिन आपके प्रश्न के बारे में मेरा बड़ा संदेह है: आप कब इसकी आवश्यकता होने जा रहे हैं? । फ़िल्टर क्या होगा?
ब्रासोफिलो

1
आपने मुझे गलत समझा। मैं पदों में 990 छवियों का उपयोग करता हूं, मैं सिर्फ घर के स्लाइडर में उपयोग नहीं करता हूं। उनमें से कुछ मुझे पोर्टफोलियो के लिए अंगूठे की आवश्यकता है, कुछ अन्य ब्लॉग अंगूठे के लिए, आदि
chifliiiii

जवाबों:


12

ओटो के डायनामिक इमेज रिसाइज़र प्लगइन पर एक नज़र डालें

यह प्लगइन उस तरीके को बदल देता है जिससे वर्डप्रेस चित्र बनाता है यह केवल छवियों को उत्पन्न करने के लिए जब वे वास्तव में कहीं मक्खी पर उपयोग किए जाते हैं। इस प्रकार बनाई गई छवियां सामान्य अपलोड निर्देशिकाओं में सहेजी जाएंगी, बाद में वेबसर्वर द्वारा तेजी से भेजने के लिए। इसका परिणाम यह होता है कि स्थान बच जाता है (चूंकि छवियां केवल जरूरत पड़ने पर बनाई जाती हैं), और चित्र अपलोड करना बहुत तेज है (क्योंकि यह अब अपलोड पर छवियों को उत्पन्न नहीं कर रहा है)।


2
ध्यान दें कि उस प्लगइन में पुरानी पोस्ट्स में चित्र जोड़ने की समस्या है। पैच का स्वागत है।
ओटो

Thats वास्तव में मैं क्या देख रहा था। मुझे इसे एक मौका और देना होगा। तो यह केवल नए पदों पर काम करता है?
chifliiiii

1
अब इस पोस्ट पर आने वालों के लिए, यहाँ एक समान प्लगइन है जो सक्रिय रूप से विकसित होता दिखाई दे रहा है: wordpress.org/plugins/fly-dynamic-image-resizer
टिम मेलोन

7

इसे अपनी थीम फ़ंक्शंस फ़ाइल में रखें। यह वर्डप्रेस को अपलोड करते समय कुछ भी लेकिन 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']
            );
        }

यह फाइलर वर्डप्रेस में मानक होना चाहिए। हर छवि के लिए हर आकार क्यों उत्पन्न होता है? मैं इस कोड को अपने कस्टम विषयों में जोड़ रहा हूं। धन्यवाद
Michaelkay

2
अच्छा है, लेकिन अब यह अभी भी सभी छवियों को उत्पन्न करेगा अगर मुझे केवल एक कस्टम आकार की आवश्यकता है ..
गीज़्स

ऐसा तब होता है जब मैं उन्नत कस्टम क्षेत्रों से छवि वस्तुओं का उपयोग करता हूं
Gijs

काम नहीं करता है, अगर add_image_size को पहले केवल परिवर्तित किए गए छवि आयामों के साथ परिभाषित किया गया था
बेंजामिन इंटल

@ मिचेल्के इस दृष्टिकोण में एक प्रदर्शन दंड है। जब छवियों को अपलोड किया जाता है और फिर हर आकार के लिए उत्पन्न किया जाता है, तो इसका मतलब है कि अपलोडर धैर्य के साथ एक है। यह कोड बनाता है कि आपके आगंतुकों को अधिक धैर्य रखना है, और Google ने ऐसी साइटों को साबित किया है जिन्हें लोड करने में 2s से अधिक समय लगता है, 50% लोगों को छोड़ देता है। साथ ही अगर आपकी साइट पर सैकड़ों समवर्ती दौरे हैं, तो यह आपके सर्वर को नीचे ले जाएगा।
टॉम रोजगारो

2

दुर्भाग्य से @ पैट्रिक का जवाब WP 4.4 में शुरू किए गए srcset फ़ंक्शन को तोड़ता है। सौभाग्य से, हमें केवल दो अतिरिक्त फ़ंक्शन जोड़ने की आवश्यकता है!

सबसे पहले, हमें छवि मेटाडाटा में सभी पंजीकृत थंबनेल आकारों को अस्थायी रूप से फिर से पेश करने की आवश्यकता है ताकि उन्हें माना जा सके:

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

बस एक सिर-अप आपको यह बताने के लिए कि यह हार्ड-क्रॉपिंग को तोड़ देगा! मुझे यह पता लगाने में घंटों लग गए कि यह अपराधी था। मैं एक समाधान पर काम कर रहा हूँ ...
कॉन्स्टेंटिन ग्रो

1

वास्तव में, add_image_size() थंबनेल उत्पन्न नहीं करता है, यह सिर्फ वर्डप्रेस के लिए उपलब्ध एक छवि आकार को पंजीकृत करता है।

आमतौर पर, थंबनेल पहली बार छवि अपलोड होने पर उत्पन्न होते हैं। यह एक स्वचालित प्रक्रिया है इसलिए आपको बाद में उन्हें उत्पन्न करने की चिंता नहीं करनी चाहिए। इसे इस तरह से सोचें - अगर किसी धीमे सर्वर पर थम्बनेल जेनरेट करने में 1-2 सेकेंड का समय लगता है, और आप तब तक इंतजार करते हैं, जब तक आप अनुरोध नहीं करते, आप सामग्री को देखने के लिए प्रति चित्र 1-2 अतिरिक्त प्रतीक्षा करने के लिए मजबूर करते हैं। समय के आगे ऐसा करना बहुत आसान है - यानी जब छवि अपलोड की जाती है।

उसी समय, यदि आप बिल्कुल अलग समय पर थंबनेल को संसाधित करना चाहते हैं, तो आप वाइपर के रीजेनरेट थम्बनेल प्लगइन पर एक नज़र डालना चाहते हैं । यह आपके सभी छवि थंबनेल को पुनर्जीवित करने के लिए ऑन-डिमांड कार्रवाई का उपयोग करता है ... लेकिन आप जरूरत पड़ने पर थंबनेल बनाने के लिए समान कोड का उपयोग कर सकते हैं।


मुझे लगता है कि आपको बात नहीं मिली। वह नियंत्रित करना चाहता है कि किन छवियों के लिए एक थंबनेल की आवश्यकता है। तो कुछ छवियों को सभी में आकार देने की आवश्यकता नहीं है।
शराबी मास्टर

अधिकांश लोग पृष्ठों की जांच करते हैं जब सम्मिलित फोटो (मुझे लगता है कि सभी को बचाने के लिए बहुत अच्छा लगता है) वे उन फ़ाइलों की पीढ़ी का कारण बनेंगे जो एक बार और आपके काम की आवश्यकता होती है। मेरे मामले में, मेरे पास एक हेडर इमेज साइज़ पंजीकृत है। मेरे द्वारा अपलोड की गई लगभग 20 छवियों में से वास्तव में हेडर के लिए हैं। तो मेरी लाइब्रेरी में 19 से 20 इमेज स्पेस की बर्बादी है।
JpaytonWPD

1

केवल जरूरत पड़ने पर add_image_size को आग लगाने का एक तरीका है?

बिल्कुल नहीं। लेकिन आप थंबनेल उत्पन्न होने से ठीक पहले पंजीकृत आकारों की सूची को फ़िल्टर कर सकते हैं। Wp_generate_attachment_metadata () फ़ंक्शन (जो फ़ंक्शन को कॉल करता है जो थंबनेल उत्पन्न करता है) में एक फ़िल्टर होता है, जिसे "मध्यवर्ती_इमेज_साइज़_डेवर" कहा जाता है, जो आपको फ़ाइलों के उत्पन्न होने से ठीक पहले आकारों के सरणी में हेरफेर करने देता है। जब भी आप एक निश्चित "प्रकार" की छवि जोड़ रहे हों, तब आप इस फ़िल्टर का उपयोग कर सकते हैं और उसके तुरंत बाद हटा सकते हैं।

मुझे लगता है कि आपकी सबसे बड़ी चुनौती यह पता लगाना होगा कि अतिरिक्त आकारों की आवश्यकता वाली छवियों के बीच अंतर कैसे करें, और जो नहीं करते हैं।


मुझे एक विकल्प या चेकबॉक्स जोड़ना होगा जब मैं उदाहरण के लिए उत्पन्न होने वाले विच अंगूठे का चयन करने के लिए मीडिया अपलोड करता हूं। अच्छा लगता है, लेकिन मुझे यह करने के लिए सुराग नहीं मिला कि कैसे करना है
chifliiiii

1

आप मेरे (ओटोस नहीं) "डायनामिक इमेज रिसाइज" 1) प्लगइन का उपयोग कर सकते हैं ।

"डायनामिक इमेज रिसाइज" एक वर्डप्रेस (MU-) प्लगइन है जो टिमटिम्ब की आवश्यकता के बिना, लेकिन WP कोर फ़ंक्शन के साथ "उड़ान पर" छवियों को आकार देने के लिए एक शोर्टकोड और एक टेम्पलेट टैग प्रदान करता है।

प्लगइन एक टेम्पलेट टैग और एक शोर्ट के साथ भी आता है।

1) ओटोस प्लगइन के बारे में अभी पता चला है। नामकरण की टक्कर का इरादा नहीं था।


1

आप इस प्लगइन को आजमा सकते हैं: https://wordpress.org/plugins/optimize-images-resizing

यह आपके पंजीकृत छवि आकार के आधार पर छवियों का आकार बदलता है, लेकिन केवल जब जरूरत होती है। मौजूदा छवि आकारों को भी साफ कर सकते हैं ताकि वे पुन: उत्पन्न हो सकें।


0

WP प्रदर्शन पैक प्लगइन "बेहतर छवि हैंडलिंग" प्रदान करता है, जो ओटोस डायनामिक इमेज रिसाइज़र पर आधारित है, लेकिन इसमें कई सुधार शामिल हैं, उदाहरण के लिए: सबसे पहले यह नवीनतम वर्डप्रेस संस्करण (3.9.1) के साथ संगत है, WP_Image_Editor का उपयोग करता है, थंबनेल की बचत कर सकता है बंद हो (लेकिन वे कैश किया जा सकता है और सीडीएन समर्थन ist रास्ते पर है), थम्बनेल एकीकरण (मौजूदा थंबनेल को हटाने के लिए) को पुन: उत्पन्न करें और कुछ और।


-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

यहाँ अभी तक एक और दृष्टिकोण: इसके हुक 404 HTTP त्रुटि हैंडलिंग में हैं। यही है, जब थंबनेल उपलब्ध नहीं है, तो मूल छवि ढूंढें और थंबनेल बनाएं। ध्यान दें कि यह वास्तव में आपकी समस्या को हल नहीं करता है, क्योंकि यह अपलोड के दौरान थंबनेल पीढ़ी से पहले नहीं है।

ध्यान दें कि इस प्लगइन का उपयोग दुर्भावनापूर्ण उपयोगकर्ताओं द्वारा किसी भी संख्या में थंबनेल बनाने के लिए किया जा सकता है और इस प्रकार आपके डिस्क स्थान को समाप्त कर सकता है।

नोट: इस प्लगइन को आसानी से प्लगइन्सन का उपयोग करके स्थापित किया जा सकता है ।

<?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();
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.