จะเพิ่มมุมมนลงในภาพขนาดย่อโดยอัตโนมัติได้อย่างไร


10

ฉันต้องการสร้างภาพขนาดย่อของมุมโค้งมนโดยอัตโนมัติสำหรับโครงการที่ฉันกำลังทำอยู่โดยใช้บางสิ่งดังนี้: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

สิ่งที่ฉันควรจะทำคือหาวิธีที่จะทำให้บางสิ่งเช่นนี้เข้าสู่กระบวนการสร้างภาพย่อนั้นเองและทำการแคชเซิร์ฟเวอร์ /wp-includes/media.phpดูเหมือนจะไม่มีตะขอที่ใช้งานได้ดังนั้นฉันอาจต้องม้วนตัวเอง

เบาะแสใดที่จะเริ่ม?

แก้ไข: ไม่ได้อยู่ใน CSS มีข้อเสนอแนะที่ดีเกี่ยวกับเรื่องนี้ แต่ฉันใช้รัศมีเส้นขอบทั่วไซต์และภาพต้องถูกปัดเศษที่ด้านเซิร์ฟเวอร์โดยเฉพาะ ขอบคุณ


ขออภัยเกี่ยวกับค่าหัว +25 เช้านี้ฉันไปทำงานสาย
Dan Gayle

คำตอบ:


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ดังนั้นเพียงแค่ทำจัดการของคุณและกลับผลให้


Aha! มันอยู่ในสถานที่ที่แตกต่างกัน ความหวาน Lemme ลองดูนี่สิ แต่ดูเหมือนว่าเจ้าอาจจะได้พบสิ่งที่ฉันต้องการ
Dan Gayle

3
ฉันชอบที่จะเห็นโค้ดที่ใช้งานได้กับตัวกรองนี้ฉันเล่นไปรอบ ๆ และไม่มีที่ไหนเลยยอมแพ้อย่างรวดเร็ว
Milo

1
@milo คำตอบของฉันมีรหัสเล็กน้อยที่คุณสามารถลองได้
Paul Sheldrake

3

แม้ว่าคุณสามารถประมวลผลมุมโค้งมนด้วย Php และภาพ GD (คุณจะต้องเลือกสีพื้นหลัง) มันเป็นงาน / โค้ด / การประมวลผลที่น่ากลัวสำหรับ JavaScript หรือ CSS3

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

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

กลลวง javascript / jquery โดยทั่วไปใช้ 4 มุม gifs กับภาพเพื่อให้ปรากฏกลม มีคน jQuery ต่างๆโกหกเกี่ยวกับใน interwebs เช่นมีhttp://maestric.com/doc/css/rounded_corners_images

อย่าบอกใครเลยว่าพวกเขาไม่ได้กลมจริงๆ


3
" สำหรับภาพที่โค้งมนใน CSS3 คุณต้องล้อมภาพใน div และทำให้ภาพเป็นภาพพื้นหลังของ div นั้น " - ไม่เป็นความจริงอย่างแน่นอน border-radiusสามารถนำไปใช้โดยตรงกับแท็ก IMG โดยไม่มีปัญหาใด ๆ
Chip Bennett

เคล็ดลับ jQuery นั้นยอดเยี่ยม ฉันจะยังคงทำหน้าที่เป็นเซิร์ฟเวอร์เพื่อรักษาปริมาณการประมวลผล js ในฝั่งไคลเอ็นต์ให้น้อยที่สุด
Dan Gayle

3

นี่คือสิ่งที่ฉันใช้ในการใช้หนึ่งในฟิลเตอร์ภาพ wordpress ฉันพยายามใช้สิ่งที่ Chip Bennett แนะนำ แต่ก็ไม่ประสบความสำเร็จ

สิ่งที่ฉันทำคือสร้างขนาดที่กำหนดเองจากนั้นตรวจสอบแต่ละรูปภาพตามที่มันสร้างขึ้นถ้ามันมีขนาดเฉพาะและถ้าใช้ฟิลเตอร์ 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;
}

หากคุณเพิ่มรหัสนั้นลงในไฟล์ functions.php ของชุดรูปแบบของคุณให้ดาวน์โหลด phpthumb และกำหนดเส้นทางที่คุณควรไป ฉันได้รับมันทำงานบน xampp ติดตั้งท้องถิ่นของฉันดังนั้นหวังว่ามันจะทำงานสำหรับคนอื่นด้วย ความคิดเห็น phpThumb มาจากตัวอย่างตัวอย่างง่าย ๆ


ดี นี่คือสิ่งที่ฉันพูดถึง!
Dan Gayle

มันเหมาะกับคุณหรือเปล่า?
Paul Sheldrake

ยังไม่มีโอกาสทดสอบ ขอบคุณนะ!
Dan Gayle

2

ไม่มีเหตุผลที่จะไม่ทำเช่นนี้กับ CSS มันทำงานได้และจะได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมดยกเว้น IE 8 และด้านล่าง:

หากคุณต้องการสนับสนุน IE จริงๆคุณสามารถใช้ Modernizr ซึ่งจะเพิ่มคลาสของมุมที่ไม่มีมุมโค้งมนในองค์ประกอบ img เป้าหมายในเบราว์เซอร์ที่ไม่สามารถใช้งานได้

เพิ่ม class = "มุมโค้งมน" ในรูปขนาดย่อของคุณและใน css ของคุณ:

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

ฉันทำการทดสอบอย่างรวดเร็วเกี่ยวกับภาพสุ่มในหน้าแรกของ WPCandy.com โดยการเพิ่มมุมในคลาสภาพด้วย Firebug นี่คือผลลัพธ์

ก่อน:

ป้อนคำอธิบายรูปภาพที่นี่

หลังจาก:

ป้อนคำอธิบายรูปภาพที่นี่

CSS เข้าสู่ Firebug:

ป้อนคำอธิบายรูปภาพที่นี่

สำหรับ. no-round-corner ของคุณใช้หนึ่งในวิธีการย้อนกลับหากคุณรู้สึกว่าคุณต้องการ


เป็นความคิดที่ดีที่จะใช้ Modernizr ยังคงต้องการฝั่งเซิร์ฟเวอร์แม้ว่า
Dan Gayle

แน่นอนหนึ่งในเว็บไซต์ที่เป็นปัญหายังคงมีการรับส่งข้อมูล IE 80% <9
Dan Gayle

1

คุณต้องการสไตล์ธัมบ์เนลใดขนาดรูปย่อ "ทั่วไป" หรือโพสต์ธัมบ์เนล

ทั้งสองสามารถทำได้อย่างง่ายดายผ่าน CSS - โดยเฉพาะborder-radiusคุณสมบัติ คำตอบเฉพาะนั้นขึ้นอยู่กับความต้องการที่แน่นอนของคุณ ฉันยินดีที่จะอัปเดต

PS IMHO การไปที่เส้นทางภาพ TimThumb / แคชนั้นเหมาะสมที่สุด เพียงใช้รูปภาพที่สร้างเป็นรูปสี่เหลี่ยมจัตุรัสที่สร้างโดย WordPress (ซึ่งเป็นส่วนหนึ่งของแคชวัตถุ) แล้วใช้ CSS เพื่อปัดเศษมุมต่างๆ


1
รัศมีเส้นขอบใช้ไม่ได้กับรูปภาพ นั่นเป็นเรื่องยุ่งยากจริงๆ
fuxia

รัศมีของขอบบน Mozilla จะมีมุมสี่เหลี่ยมจัตุรัสชี้ให้เห็นถ้าคุณใช้กับแท็ก img
Dan Gayle

มันจะต้องนำไปใช้เป็นภาพพื้นหลังสำหรับ div wrapper ซึ่งเป็นไปไม่ได้สวย
Wyck

รัศมีชายแดนทำงานบนแท็ก img ในโมซิลล่าปัจจุบันโดยตรง
Milo

สิ่งที่ไมโลพูด border-radiusทำงานได้ดีกับภาพ ฉันใช้เพื่อแสดงความคิดเห็น Gravatars ในธีมของฉันเอง
Chip Bennett

1

จากการค้นหาของ google มันเป็นไปได้ที่จะปัดเศษด้วย GD แต่ผลลัพธ์นั้นไม่ดีที่สุด พวกเขาค่อนข้างขรุขระ แต่นั่นเป็นการโทรแบบส่วนตัวของฉัน: http://www.assemblysys.com/dataServices/php_roundedCorners.php

หากคุณต้องทำสิ่งนี้ ฉันขอแนะนำให้ใช้สคริปต์ timthumb เป็นจุดเริ่มต้น:

โครงการ Timthumb: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow มีโพสต์เกี่ยวกับสิ่งนี้: /programming/609109/rounded-corners-on-images-using-php


0

คุณได้ดูที่ ccs3pie Rounded Corners และ CSS3 hacks สำหรับเช่นนี้ควรทำสิ่งที่คุณต้องการเช่นเดียวกับการบังคับให้เก่าดีเช่นในการส่งเพื่อปฏิบัติตาม


นี่จะเหมาะ แต่ฉันไม่เคยได้รับมันมาทำงานอย่างสม่ำเสมอ ฉันดึงผมออกมาจากอันนี้
Dan Gayle

0

ตกลงนี้เป็นเรื่องง่าย !!

สิ่งแรกที่ผู้คนพูดได้คือวิธีที่ดีที่สุดสะอาดและง่ายที่สุดคือใช้รัศมีของ CSS3 สิ่งนี้ทำงานได้ในเบราว์เซอร์ที่ทันสมัยที่สุดยกเว้น IE6-8 ทั่วไปที่ไม่สนับสนุน ... แม้ว่า IE9 จะทำ

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

ดังนั้นถ้าคุณเป็นเหมือนผมและลูกค้าของคุณทั้งหมดใช้ IE แล้วผมอยากแนะนำให้ CSS3 พายข้างต้นhttp://css3pie.com/ ข้อเสียเปรียบเพียงอย่างเดียวคือมันยุ่งกับดัชนี z ของภาพดังนั้นหากคุณใช้แถบเลื่อนที่จางหายไปคุณอาจได้รับปัญหา

หากคุณไม่ได้ใช้ CSS3 แฟนซีพายผมอยากแนะนำให้http://jquery.malsup.com/corner/ คุณเพียงแค่ลิงก์ในส่วนหัวของคุณพร้อมกับ jQuery และใช้สิ่งต่อไปนี้:

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

มันรับการประกาศ CSS3 และสำหรับเบราว์เซอร์ใด ๆ ที่ไม่สนับสนุนก็จะทำให้มุมที่โค้งมนผ่าน jquery

เราเพิ่งใช้ทั้งสองสิ่งนี้บนเว็บไซต์ของลูกค้าที่นี่: http://www.theathenaprogramme.co.uk/

งานเสร็จแล้ว :-) หวังว่านี่จะช่วยได้

แก้ไข:เพิ่งสังเกตเห็นว่าคุณต้องดำเนินการนี้ก่อนที่จะบันทึกภาพผ่าน media.php คิดว่าโซลูชันของฉันใช้ไม่ได้ในกรณีนี้


0

ฉันใช้ปลั๊กอิน Get Post Image เพื่อทำสิ่งนี้ที่นี่: http://surfhatteras.com/

รับภาพโพสต์เป็นเสื้อคลุมสำหรับรับปลั๊กอิน WordPress รูปภาพและห้องสมุด phpThumb

การใช้มันคุณสามารถทำอะไรก็ได้เช่น<?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> การปัดเศษมุมของภาพที่โพสต์ หรือคุณสามารถห่อรูปภาพด้วยตัวคุณเอง: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.emo.php#x33

อย่าลืมแคช! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.