थंबनेल में गोल कोनों को स्वचालित रूप से कैसे जोड़ा जाए?


10

मैं किसी विशेष प्रोजेक्ट के लिए स्वचालित रूप से गोल कोने वाले थंबनेल बनाना चाहता हूं, जो कुछ इस तरह से उपयोग कर रहा है: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

मैं जो कुछ करना चाहता हूं, वह थम्बने क्रिएशन प्रोसेस में कुछ इस तरह से हुक करने का तरीका ढूंढता है और उसे सर्वराइड कैश करता है। /wp-includes/media.phpकिसी भी लागू हुक करने के लिए प्रतीत नहीं होता है, इसलिए मुझे अपना रोल करना पड़ सकता है।

कहाँ शुरू करने के लिए पर कोई सुराग?

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


के बारे में क्षमा करें। मुझे आज सुबह काम करने की देर थी।
डेन गेल

जवाबों:


5

ऐसा लगता है कि आप wp_create_thumbnailफ़िल्टर में हुक कर सकते हैं :

function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
     _deprecated_argument( __FUNCTION__, '1.2' );
     $thumbpath = image_resize( $file, $max_side, $max_side );
     return apply_filters( 'wp_create_thumbnail', $thumbpath );
}

तो बस अपना हेरफेर करें, और परिणाम को वापस करें wp_create_thumbnail


अहा! यह एक अलग स्थान पर है। मिठास। Lemme इसे देखें, लेकिन ऐसा लग रहा है कि आपको मिल गया होगा जो मुझे चाहिए।
डेन गेल

3
मैं इस फिल्टर के साथ कुछ काम कोड देखना पसंद करूंगा, मैंने इसके साथ खेला और कहीं नहीं मिला, बहुत जल्दी छोड़ दिया।
मिलो

1
@ मेलो मेरे जवाब में थोड़ा सा कोड है जिसे आप आजमा सकते हैं
पॉल शेल्ड्रेक

3

भले ही आप पीएचपी और छवि जीडी के साथ गोल कोनों को संसाधित कर सकते हैं (आपको अभी भी एक पृष्ठभूमि रंग चुनना होगा), यह एक भयानक काम है / कोड / प्रसंस्करण जो आसानी से जावास्क्रिप्ट या CSS3 के साथ पूरा किया जा सकता है।

CSS3 में गोल छवियों के लिए आपको छवि को एक div में लपेटना होगा और छवि को उस div की पृष्ठभूमि-छवि बनाना होगा, वास्तव में व्यावहारिक नहीं।

इसलिए मुझे लगता है कि आपको केवल jquery का उपयोग करना चाहिए, बस ज़रूरत पड़ने पर स्क्रिप्ट को एंक्यू करना चाहिए और हुक के माध्यम से या सीधे सीधे अपने थंबनेल में jquery वर्ग को जोड़ना चाहिए।

जावास्क्रिप्ट / jquery चाल मूल रूप से छवि के 4 कोने gifs को लागू करती है ताकि यह गोल दिखाई दे। इस तरह के http://maestric.com/doc/css/rounded_corners_images के रूप में विभिन्न jquery के बारे में झूठ बोल रहे हैं ।

बस किसी को मत बताना कि वे वास्तव में गोल नहीं हैं।


3
" CSS3 में गोल छवियों के लिए आपको छवि को एक div में लपेटना होगा और छवि को उस div की पृष्ठभूमि-छवि बनाना होगा " - बिल्कुल सच। border-radiusकिसी भी समस्या के साथ सीधे IMG टैग पर लागू किया जा सकता है।
चिप बेनेट

यह jQuery की चाल शांत है। मैं इसके बजाय ग्राहक की ओर से जेएस प्रसंस्करण की मात्रा को कम से कम रखने के लिए सर्वर पर करूँगा
डैन गेल

3

यहाँ मेरा एक वर्डप्रेस इमेज फिल्टर का उपयोग करने पर है, मैंने चिप बेनेट द्वारा सुझाए गए एक का उपयोग करने की कोशिश की, लेकिन कोई सफलता नहीं मिली।

मैंने जो किया है वह एक कस्टम आकार बना रहा है और फिर प्रत्येक चित्र की जाँच करें क्योंकि यह बनाया गया है यदि यह उस विशिष्ट आकार का है और यदि यह है तो phpthumb फ़िल्टर लागू करें। आदर्श रूप में मैं सिर्फ कस्टम छवि आकार के नाम की जांच करने में सक्षम होना चाहता हूं, लेकिन मुझे अभी तक यह पता नहीं चला है कि यह कैसे करना है।

add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true ); 
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');

function paul_rounded_filter($file) {
    $info = getimagesize($file);

    // check for our image size and do stuff
    if($info[0] == 250 && $info[1] == 100)
    {
        // create phpThumb object
        $phpThumb = new phpThumb();
        $phpThumb->resetObject();

        // set data source -- do this first, any settings must be made AFTER this call      
        $phpThumb->setSourceData(file_get_contents($file));
        $output_filename = $file;


        // PLEASE NOTE:
        // You must set any relevant config settings here. The phpThumb
        // object mode does NOT pull any settings from phpThumb.config.php
        //$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
        //$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');

        // set parameters (see "URL Parameters" in phpthumb.readme.txt)
        $phpThumb->setParameter('fltr', 'ric|30|30');
        $phpThumb->setParameter('fltr', 'sat|-100');

        // generate & output thumbnail
        if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
            if ($phpThumb->RenderToFile($output_filename)) {
                // do something on success
                echo 'Successfully rendered to "'.$output_filename.'"';
                //die;
            } else {
                // do something with debug/error messages
                echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
                die;
            }
        } else {
            // do something with debug/error messages
            echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
            die;
        }
    }

    if ( $width || $height ) {
        if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
            $resized_file = apply_filters('image_make_intermediate_size', $resized_file);
            return array(
                'file' => wp_basename( $resized_file ),
                'width' => $info[0],
                'height' => $info[1],
            );
        }
    }
    return false;
}

यदि आप उस कोड को अपनी थीम के फंक्शन्स में जोड़ते हैं। फाइल में, phpthumb को डाउनलोड करें और उस पथ को सेट करें जिसे आप जाने के लिए अच्छा होना चाहिए। मुझे मिल गया है अपने xampp के स्थानीय स्थापित पर काम कर रहा है तो उम्मीद है कि यह अन्य लोगों के लिए भी काम करना चाहिए। PhpThumb टिप्पणियाँ सरल डेमो उदाहरण से हैं।


अच्छा लगा। यह उन बातों के साथ अधिक है जो मैं बात कर रहा था!
डैन गेल

क्या वह आपके लिए काम करता है?
पॉल शेल्ड्रेक

अभी तक इसका परीक्षण करने का अवसर नहीं मिला। हालांकि धन्यवाद!
डैन गेल

2

सीएसएस के साथ ऐसा करने का कोई कारण नहीं है यह काम करता है और IE 8 और उसके अलावा सभी प्रमुख ब्राउज़रों में समर्थित होगा:

यदि आप वास्तव में IE का समर्थन करना चाहते हैं तो आप Modernizr का उपयोग कर सकते हैं जो कि अक्षम ब्राउज़रों में लक्ष्य img तत्व पर नो-राउंड-कॉर्नर की एक श्रेणी जोड़ देगा।

अपने थंबनेल में और अपने सीएसएस में वर्ग = "गोल-कोनों" को जोड़ें:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}

मैंने फायरबग का उपयोग करके छवि वर्ग कोनों को जोड़कर WPCandy.com के पहले पृष्ठ पर एक यादृच्छिक छवि पर एक त्वरित परीक्षण किया। यहाँ परिणाम हैं।

इससे पहले:

यहाँ छवि विवरण दर्ज करें

उपरांत:

यहाँ छवि विवरण दर्ज करें

सीएसएस ने फायरबग में प्रवेश किया:

यहाँ छवि विवरण दर्ज करें

यदि आपको लगता है कि आपको ज़रूरत है तो अपने .no- गोल-कोनों में से एक भी फ़ॉलबैक विधियों का उपयोग करें।


मॉडर्निज़्र का उपयोग करके ऐसा करने के लिए अच्छा विचार है। हालांकि इसे सर्वर साइड की जरूरत है।
डैन गेल

बेशक, विचाराधीन साइटों में से एक में अभी भी 80% IE <9 यातायात है
दान गेल

1

आप कौन सी थंबनेल शैली करना चाहते हैं, सामान्य रूप से "थंबनेल" छवि का आकार, या पोस्ट थंबनेल?

दोनों को सीएसएस के माध्यम से आसानी से पूरा किया जा सकता है - विशेष रूप से, border-radiusसंपत्ति; विशिष्ट उत्तर आपकी सटीक आवश्यकताओं पर निर्भर करेगा। मुझे अपडेट करके खुशी होगी।

पीएस IMHO टिमथंब / कैश्ड इमेज रूट पर जा रहा है, जो उप-इष्टतम है। बस वर्डप्रेस-जनित, स्क्वायर-कॉर्नर इमेजेज (जो पहले से ही ऑब्जेक्ट कैश का हिस्सा हैं) का उपयोग करें, और कोनों को गोल करने के लिए सीएसएस का उपयोग करें।


1
सीमा-त्रिज्या छवियों पर लागू नहीं होती है। यह वास्तव में मुश्किल है।
FUXIA

मोज़िला पर बॉर्डर का दायरा होगा, अगर आप इसे आइएमजी टैग पर लागू करते हैं
दान गेल

यह डिव-रैपर के लिए पृष्ठभूमि-छवि के रूप में लागू किया जाना चाहिए, जो बहुत अव्यवहारिक है।
व्याक

सीमा-त्रिज्या वर्तमान मोज़िला में सीधे img टैग पर काम करता है।
मिलो

मिलो ने क्या कहा। border-radiusछवियों पर ठीक काम करता है। मैं इसे अपने थीम में Gravatars टिप्पणी के लिए उपयोग करता हूं।
चिप बेनेट

1

Google खोज पर जीडी के साथ कोनों को गोल करना संभव है लेकिन परिणाम सबसे महान नहीं हैं; वे थोड़े पागल हैं; लेकिन यह मेरी ओर से एक व्यक्तिपरक कॉल है: http://www.assemblysys.com/dataServices/php_roundedCorners.pp

यदि आपको यह करना चाहिए; मैं शुरुआती बिंदु के रूप में टाइमथंब स्क्रिप्ट का उपयोग करने की सलाह देता हूं:

टिम्थम्ब प्रोजेक्ट: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow में इसके बारे में एक पोस्ट भी है: /programming/609109/rounded-corners-on-images-use-php


0

क्या आपने ccs3pie राउंडेड कोनों और CSS3 के हैक पर एक नज़र डाली है यानी इसके लिए वही करना चाहिए जो आप अच्छे पुराने को मजबूर करने के लिए प्रस्तुत करने के लिए जमा करते हैं।


यह आदर्श होगा, लेकिन मैंने इसे लगातार काम करने के लिए कभी नहीं प्राप्त किया। मैंने इस पर अपने बाल खींचे हैं।
डैन गेल

0

ठीक है यह आसान है !!

सबसे पहले जैसे लोगों ने कहा है कि सबसे अच्छा, सबसे साफ और सबसे आसान तरीका css3 बॉर्डर-रेडियस है। यह अधिकांश आधुनिक ब्राउज़रों में काम करता है, ठेठ IE6-8 को छोड़कर जिसका कोई समर्थन नहीं है ... हालांकि IE9 करेगा।

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

तो अगर तुम मेरे जैसे हो और तुम्हारे ग्राहक सभी IE का उपयोग करते हैं तो मैं http://css3pie.com/ से ऊपर CSS3 पाई की सिफारिश करूंगा । एकमात्र दोष यह है कि यह छवियों के z- इंडेक्स के साथ गड़बड़ करता है, इसलिए यदि आप एक स्लाइडर का उपयोग कर रहे हैं जो फीका करता है तो आपको मुद्दे मिल सकते हैं।

यदि आप CSS3 पाई का उपयोग करके कल्पना नहीं करते हैं तो मैं http://jquery.malsup.com/corner/ की सिफारिश करूंगा । आप बस इसे अपने शीर्ष लेख में जोड़ते हैं, jQuery के साथ और निम्नलिखित का उपयोग करते हैं:

<script>
        $(function(){
        $('.round').corner();
    });
</script>

यह CSS3 की घोषणा को पूरा करता है और किसी भी ब्राउज़र के लिए जो इसका समर्थन नहीं करता है, यह jquery के माध्यम से गोल कोनों को प्रस्तुत करता है।

हमने हाल ही में क्लाइंट वेबसाइट पर इन दोनों का उपयोग किया है: http://www.theathenaprogramme.co.uk/

काम किया :-) आशा है कि यह मदद करता है।

संपादित करें: बस ध्यान दिया जाना चाहिए कि मीडिया के माध्यम से छवि को सहेजने से पहले आपको इसे करने की आवश्यकता है। सोचें कि इस मामले में मेरा समाधान लागू नहीं है।


0

मैंने यहाँ करने के लिए Get Post Image plugin का उपयोग किया है: http://surfhatteras.com/

Get Post Image Get The Image WordPress Plugin और phpThumb लाइब्रेरी के लिए एक आवरण है।

इसका उपयोग करके आप <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> पोस्ट की गई छवि के कोनों को गोल करना पसंद कर सकते हैं । या आप अपनी छवियों को स्वयं लपेट सकते हैं: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

कैश करने के लिए मत भूलना! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.