থাম্বনেইলে কীভাবে স্বয়ংক্রিয়ভাবে বৃত্তাকার কোণগুলি যুক্ত করবেন?


10

আমি ভালো কিছু ব্যবহার করে একটি বিশেষ প্রকল্পের আমি কাজ করছি জন্য তৈরি স্বয়ংক্রিয়ভাবে বৃত্তাকার কোণ থাম্বনেল করতে চাই,: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

আমি আদর্শভাবে যা করতে চাই তা হ'ল থাম্বনেইল তৈরির প্রক্রিয়া নিজেই এর মতো কিছু হুক করার উপায় এবং এটি সার্ভারসাইডে ক্যাশে। /wp-includes/media.phpকোনও প্রযোজ্য হুক নেই বলে মনে হচ্ছে না, তাই আমার নিজের রোল করতে হতে পারে।

কোথা থেকে কোন সূত্র?

সম্পাদনা: সিএসএসে নেই। এ সম্পর্কে কিছু ভাল পরামর্শ দেওয়া হয়েছে তবে আমি সমস্ত সাইট জুড়ে সীমানা-ব্যাসার্ধ ব্যবহার করছি এবং চিত্রগুলি বিশেষত সার্ভারের পাশে গোল করা দরকার। ধন্যবাদ


+25 অনুগ্রহ সম্পর্কে দুঃখিত। এই সকালে কাজ করতে আমার দেরি হয়েছিল।
ড্যান গেইল

উত্তর:


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


আহা! এটি অন্য এক জায়গায়। মধুরতা। লেমে এটি পরীক্ষা করে দেখুন, তবে দেখে মনে হচ্ছে আপনি আমার যা প্রয়োজন তা পেয়েছেন।
ড্যান গেইল

3
আমি এই ফিল্টারটির সাথে কিছু কার্যকরী কোড দেখতে পছন্দ করব, আমি এটির সাথে খেলেছি এবং কোথাও পেলাম না, খুব দ্রুত ছেড়ে দিয়েছি।
মিলো

1
@ মিলো আমার উত্তরটির কিছুটা কোড রয়েছে যা আপনি চেষ্টা করে দেখতে পারেন
পল শেলড্রেকে

3

যদিও আপনি পিএইচপি এবং চিত্র জিডি দিয়ে বৃত্তাকার কোণগুলি প্রসেস করতে পারেন (জাভাস্ক্রিপ্ট বা সিএসএস 3 এর সাহায্যে সহজেই কী সম্পাদন করা যায় এটির জন্য এটি কাজ / কোড / প্রসেসিংয়ের একটি দুর্দান্ত কাজ।

সিএসএস 3 এর বৃত্তাকার চিত্রগুলির জন্য আপনাকে চিত্রটি একটি ডিভের মধ্যে আবৃত করতে হবে এবং চিত্রটিকে সেই ডিভের একটি ব্যাকগ্রাউন্ড-চিত্র করতে হবে, বাস্তবে বাস্তব নয়।

সুতরাং আমি মনে করি আপনার কেবল জ্যাকুয়ারি ব্যবহার করা উচিত, যখন প্রয়োজন হয় তখন স্ক্রিপ্টটি সহজভাবে সরান এবং কোনও হুকের মাধ্যমে সরাসরি আপনার থাম্বনেইলে জেকারি ক্লাস যুক্ত করুন।

জাভাস্ক্রিপ্ট / জ্যাকোরি ট্রিকটি মূলত চিত্রটিকে চারদিকে প্রদর্শিত করার জন্য 4 কোণার জিএফ প্রয়োগ করে। ইন্টারভ্যবেজে যেমন http://maestric.com / ডক / সিএসএস / গ্রাউন্ড_কর্নার_আইমেজে বিভিন্ন জ্যাকোয়ারি রয়েছে ।

কাউকে বলবেন না যে তারা সত্যই গোল নয়।


3
" সিএসএস 3 এর বৃত্তাকার চিত্রগুলির জন্য আপনাকে চিত্রটি একটি ডিভের মধ্যে আবৃত করতে হবে এবং চিত্রটিকে সেই ডিভের ব্যাকগ্রাউন্ড-চিত্র তৈরি করতে হবে " - একেবারে সত্য নয়। border-radiusকোনও সমস্যা ছাড়াই সরাসরি আইএমজি ট্যাগে প্রয়োগ করা যেতে পারে।
চিপ বেনেট

যে jQuery কৌশলটি দুর্দান্ত। আমি বরং এটির পরিবর্তে ক্লায়েন্টের পাশের জেএসএসের পরিমাণ কমপক্ষে রাখার জন্য সার্ভারসাইড করব
ড্যান গেইল

3

এখানে আমার ওয়ার্ডপ্রেস ইমেজ ফিল্টারগুলির একটি ব্যবহার করার চেষ্টা করলাম, আমি চিপ বেনেটের প্রস্তাবিত একটি ব্যবহার করার চেষ্টা করেছি তবে কোনও সাফল্য পাইনি।

আমি যা করেছি তা হ'ল একটি কাস্টম সাইজ তৈরি করা এবং তারপরে প্রতিটি চিত্র তৈরি করা যেমন এটি নির্দিষ্ট আকার এবং এটি যদি পিএইচপিথম্ব ফিল্টার প্রয়োগ করে তবে তা পরীক্ষা করে দেখুন। আদর্শভাবে আমি কেবলমাত্র কাস্টম চিত্রের আকারের জন্য যাচাই করতে সক্ষম হতে চাই তবে কীভাবে এটি করব তা এখনও খুঁজে পাইনি।

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 ডাউনলোড করুন এবং আপনার যে পথে যেতে হবে ভাল সেট সেট করুন should আমি এটি আমার স্থানীয় জ্যাম্পের ইনস্টলটিতে কাজ করতে পেরেছি আশা করি এটি অন্যান্য ব্যক্তির জন্যও কাজ করা উচিত। পিএইচপিথম্ব মন্তব্যগুলি সাধারণ ডেমো উদাহরণ থেকে।


খুশী হলাম। আমি যে বিষয়ে কথা বলছিলাম তার লাইন বরাবর এটিই বেশি!
ড্যান গেইল

এটা কি তোমার জন্য কাজ করেছে?
পল শেলড্রেকে

এটি পরীক্ষা করার সুযোগ পাননি এখনও। ধন্যবাদ যদিও!
ড্যান গেইল

2

এটি কাজ করে সিএসএস দিয়ে এটি না করার কোনও কারণ নেই এবং IE 8 এবং নীচে বাদে সমস্ত বড় ব্রাউজারগুলিতে সমর্থন করা হবে:

আপনি যদি সত্যিই আইই সমর্থন করতে চান তবে আপনি মডার্নিজার ব্যবহার করতে পারেন যা অক্ষম ব্রাউজারগুলিতে টার্গেট ইমগ এলিমেন্টে কোনও বৃত্তাকার-কোণার শ্রেণি যুক্ত করবে।

আপনার থাম্বনেলগুলিতে এবং আপনার সিএসএসে শ্রেণি = "বৃত্তাকার-কোণগুলি" যুক্ত করুন:

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

আমি ফায়ারব্যাগ ব্যবহার করে চিত্রের ক্লাসে কোণগুলি যুক্ত করে ডাব্লুপিডেন্ডি ডটকমের প্রথম পৃষ্ঠায় একটি এলোমেলো চিত্রটিতে একটি দ্রুত পরীক্ষা করেছি। ফলাফল এখানে।

আগে:

এখানে চিত্র বর্ণনা লিখুন

পরে:

এখানে চিত্র বর্ণনা লিখুন

সিএসএস ফায়ারবগে প্রবেশ করেছে:

এখানে চিত্র বর্ণনা লিখুন

আপনার। কোনও বৃত্তাকার-কোণগুলির জন্য যদি আপনার প্রয়োজন মনে হয় তবে একটি ফ্যালব্যাক পদ্ধতি ব্যবহার করুন।


মডার্নিজার ব্যবহার করে এটি করা ভাল ধারণা। এখনও এটি সার্ভার পাশে প্রয়োজন।
ড্যান গেইল

অবশ্যই, প্রশ্নে থাকা সাইটের একটিতে এখনও 80% আই <9 ট্র্যাফিক রয়েছে
ড্যান গেইল

1

আপনি কোন থাম্বনেইল স্টাইল করতে চান, "থাম্বনেইল" চিত্রের আকার সাধারণভাবে, বা পোস্ট থাম্বনেইস?

উভয়ই সিএসএসের মাধ্যমে সহজেই সম্পন্ন করা যায় - বিশেষত border-radiusসম্পত্তি; নির্দিষ্ট উত্তরটি আপনার সঠিক প্রয়োজনের উপর নির্ভর করবে। আমি আপডেট করতে পেরে খুশি হব।

পিএম আইএমএইচও টিমথম্ব / ক্যাশেড ইমেজ রুটে যাচ্ছেন সাব-অনুকূল। কেবলমাত্র ওয়ার্ডপ্রেস-উত্পাদিত, বর্গাকার-কোণযুক্ত চিত্রগুলি (যা ইতিমধ্যে বস্তুর ক্যাশের অংশ) ইতিমধ্যে ব্যবহার করুন এবং কোণগুলিকে গোল করার জন্য সিএসএস ব্যবহার করুন।


1
সীমানা ব্যাসার্ধ চিত্রগুলিতে প্রযোজ্য না। এটা সত্যিই জটিল।
fuxia

মজিলার সীমানা ব্যাসার্ধটি বর্গাকার কোণগুলি নির্দেশ করবে যদি আপনি এটি কোনও ইমিগ ট্যাগটিতে প্রয়োগ করেন
ড্যান গেইল

এটি অবশ্যই ডিভ র্যাপারের জন্য ব্যাকগ্রাউন্ড-চিত্র হিসাবে প্রয়োগ করা উচিত, যা বেশ অবৈধ।
উইক

বর্ডার ব্যাসার্ধটি বর্তমান মজিলায় সরাসরি img ট্যাগগুলিতে কাজ করে।
মিলো

মিলো কি বলল। border-radiusইমেজ উপর ঠিক কাজ করে। আমি এটি আমার নিজস্ব থিমের মন্তব্য গ্রাভাটারের জন্য ব্যবহার করি।
চিপ বেনিেট

1

একটি গুগল অনুসন্ধানের পরে জিডির সাথে কোণগুলি গোল করা সম্ভব তবে ফলাফলগুলি সবচেয়ে বড় নয়; তারা কিছুটা কড়া; তবে এটি আমার পক্ষ থেকে একটি বিষয়গত আহ্বান: http://www.asorsessys.com/dataServices/php_roundedCorners.php

যদি আপনার অবশ্যই এটি করা হয়; আমি ডামথাম্ব স্ক্রিপ্টটি একটি প্রাথমিক পয়েন্ট হিসাবে ব্যবহার করার পরামর্শ দিচ্ছি:

টিমথম্ব প্রকল্প: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

স্ট্যাকওভারফ্লোতেও এই সম্পর্কে একটি পোস্ট রয়েছে: /programming/609109/rounded-corners-on-images- using-php


0

আপনি কি সিসিএসপিপি বৃত্তাকার কর্নার এবং সিএসএস 3 হ্যাকগুলি একবার দেখেছেন? এটি আপনাকে ভাল পুরানোকে বাধ্য করার জন্য বাধ্যতামূলক হিসাবে বাধ্য হিসাবে যা করতে চায় তা করা উচিত।


এটি আদর্শ হতে পারে, তবে আমি ধারাবাহিকভাবে কাজ করতে কখনও পাইনি। আমি এই চুলের উপর দিয়ে আমার চুল টানছি।
ড্যান গেইল

0

ঠিক আছে এটা সহজ !!

প্রথমবারের মতো লোকেরা সর্বোত্তম, সবচেয়ে পরিষ্কার এবং সহজ উপায় হল CSS3 সীমানা-ব্যাসার্ধ ব্যবহার করা। এটি বেশিরভাগ আধুনিক ব্রাউজারগুলিতে কাজ করে, আদর্শ আইআই 6-8 ব্যতীত যার কোনও সমর্থন নেই ... যদিও আই 99 করবে।

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

সুতরাং আপনি যদি আমার মত হন এবং আপনার ক্লায়েন্টরা সবাই আইই ব্যবহার করেন তবে আমি উপরে সিএসএস 3 পাই সুপারিশ করব http://css3pie.com/ । কেবলমাত্র ব্যর্থতা হ'ল এটি ইমেজগুলির জেড-ইনডেক্সের সাথে মিশে গেছে তাই যদি আপনি কোনও স্লাইডার ব্যবহার করেন যা বিবর্ণ হয়ে যায় তবে আপনি সমস্যা পেতে পারেন।

আপনি যদি CSS3 পাই ব্যবহার করতে আগ্রহী না হন তবে আমি http://jquery.malsup.com/corner/ সুপারিশ করব । আপনি কেবল jQuery এর সাথে আপনার শিরোনামে এটি লিঙ্ক করুন এবং নিম্নলিখিতগুলি ব্যবহার করুন:

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

এটি CSS3 ঘোষণাকে তুলে ধরে এবং যে কোনও ব্রাউজার এটি সমর্থন করে না, এটি jquery এর মাধ্যমে গোলাকার কোণগুলিকে রেন্ডার করে।

আমরা সম্প্রতি এই দুটি ক্লায়েন্টের ওয়েবসাইটে এখানে ব্যবহার করেছি: http://www.theathenaprogramme.co.uk/

কাজ সম্পন্ন :-) আশা করি এটি সাহায্য করবে।

সম্পাদনা: ছবিটি মিডিয়া.এফপি এর মাধ্যমে সংরক্ষণ করার আগে আপনার এটি করা দরকার তা সবেমাত্র লক্ষ্য করেছেন। আমার সমাধান এই ক্ষেত্রে প্রযোজ্য নয় মনে করুন।


0

এটি করার জন্য আমি গেট পোস্ট ইমেজ প্লাগইনটি ব্যবহার করেছি: http://surfhatteras.com/

গেট পোস্ট ইমেজটি ওয়ার্ডপ্রেস প্লাগইন এবং পিএইচপিথম্ব লাইব্রেরি পাওয়ার জন্য একটি মোড়ক।

এটি ব্যবহার করে আপনি <?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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.