web-dev-qa-db-ja.com

丸みのある角を自動的にサムネイルに追加する方法

私は、このようなものを使って、私が取り組んでいる特定のプロジェクトのために自動的に角の丸いサムネイルを作りたいです - http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

私が理想的にやりたいことは、サムネイル作成プロセス自体にこのようなものをフックしてサーバーサイドにキャッシュする方法を見つけることです。 /wp-includes/media.phpには適切なフックがないように見えるので、自分でロールバックする必要があるかもしれません。

どこから始めればいいの？

編集： CSSにはない。 これについていくつかの良い提案がありましたが、私はサイト全体でborder-radiusを使っています、そして特に画像はサーバー側で丸める必要があります。ありがとう

imagespost-thumbnails
10
Dan Gayle

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に返してください。

5
Chip Bennett

あなたがPhpとimage Gdを使って丸みを帯びた角を処理することができたとしても（あなたはまだ背景色を選ぶ必要があるでしょう）、それはJavaScriptまたはCSS3で簡単に成し遂げられることができるもののひどい仕事/コード/処理です。

CSS3の丸みを帯びた画像の場合、画像をdivで囲み、その画像をそのdivの背景画像にする必要がありますが、実際的ではありません。

だから私はあなただけのjqueryを使うべきだと思う、単に必要に応じてスクリプトをエンキューし、フックを通してまたは直接あなたのサムネイルにjqueryクラスを追加する。

Javascript/jqueryのトリックは基本的に4つのコーナーGIFを画像に適用して丸みを帯びたものにします。 http://maestric.com/doc/css/rounded_corners_images のように、ウェブ間にはさまざまなjqueryのものがあります。

丸くないと誰にも言わないでください。

3
Wyck

これは私が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のコメントは簡単なデモの例からのものです。

3
Paul Sheldrake

これが機能するCSSでこれを行わない理由はありません。IE 8以下を除くすべての主要ブラウザでサポートされる予定です。

IEを本当にサポートしたいのなら、Modernizrを使うことができます。これは、使えないブラウザのターゲットimg要素に角のない角のクラスを追加します。

サムネイルとCSSにclass = "round-corners"を追加します。

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

Firebugを使用して画像クラスに角を追加することによって、WPCandy.comのフロントページにあるランダム画像の簡単なテストを行いました。これが結果です。

前：

enter image description here

後：

enter image description here

CSSがFirebugに入りました。

enter image description here

あなたがする必要があると思うならあなたの.no-round-round-cornerは代替方法の1つを使用してください。

2
Chris_O

グーグル検索ではGdで角を丸めることは可能ですが、結果はそれほど大きくありません。ちょっとジャギーです。しかし、それは私の側で主観的な電話です： http://www.assemblysys.com/dataServices/php_roundedCorners.php

あなたがこれをしなければならないならば。出発点としてtimthumbスクリプトを使用することをお勧めします。

Timthumbプロジェクト： http://timthumb.googlecode.comhttp://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflowにもこれに関する記事があります。 https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php

1
chrisjlee

どのようなサムネイルをスタイルしたいのですか？一般的な「サムネイル」画像サイズ、それともポストサムネイル？

どちらもCSS、特にborder-radiusプロパティで簡単に実現できます。具体的な答えはあなたの正確なニーズによって異なります。更新させていただきます。

P.S私見TimThumb /キャッシュされた画像のルートに行くのは次善策です。 WordPressで生成された角張った画像（既にオブジェクトキャッシュの一部になっています）を使用し、CSSを使用して角を丸くします。

1
Chip Bennett

ここでこれを行うためにGet Post Imageプラグインを使用しました。 http://surfhatteras.com/

Get Post Imageは、Get The Image 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.php#x33

キャッシュすることを忘れないでください！ http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

0
two7s_clash

Ccs3pie Rounded Cornersを見てきましたか？そしてCSS3はie をハックしています。

0
MartinJJ

わかりましたこれは簡単です！

人々が言っ​​たようにまず最初に、最もきれいで、最も簡単な方法はcss3 border-radiusを使うことです。サポートされていない典型的なIE6-8を除いて、これはほとんどの最近のブラウザで動作します... IE9はそうするでしょうが。

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

そうあなたが私のようで、あなたのクライアントがすべてIEを使っているなら、上記のようにCSS3 Pieをお勧めします 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
daveaspinall