丸い角をサムネイルに自動的に追加するにはどうすればよいですか?


10

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

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

どこから始めるべきかについての手がかりはありますか?

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


+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


ああ!別の場所にあります。甘味。Lemmeはこれをチェックしましたが、あなたが私が必要としているものを見つけたようです。
Dan Gayle、

3
私はこのフィルターを使っていくつかの動作するコードを見たいと思います、私はそれをいじって、どこにも行きませんでした、かなりすぐに諦めました。
Milo

1
@milo私の答えには、あなたが試すことができるコードが少しあります
Paul Sheldrake、

3

Phpと画像GDで丸みを帯びた角を処理することもできますが(背景色を選択する必要があります)、JavaScriptまたはCSS3で簡単に実行できる作業には、非常に多くの作業/コード/処理が必要です。

CSS3で丸みを帯びた画像の場合、画像をdivでラップし、画像をそのdivのbackground-imageにする必要がありますが、実際的ではありません。

したがって、jqueryを使用し、必要に応じてスクリプトをエンキューし、jqueryクラスをフックを介して、または直接サムネイルに追加する必要があると思います。

javascript / jqueryトリックは、基本的に4つのコーナーgifを画像に適用して、画像を丸く見せます。http://maestric.com/doc/css/rounded_corners_imagesのようなさまざまなjqueryのものがウェブ上にあります。

彼らは本当に丸くないと誰にも言わないでください。


3
CSS3で丸みを帯びた画像の場合、画像をdivでラップし、画像をそのdivのbackground-imageにする必要があります」-絶対に正しくありません。border-radiusIMGタグに直接適用でき、まったく問題ありません。
チップベネット、

そのjQueryのトリックはクールです。私はまだ、むしろそれは最小限にクライアント側で処理するJSの量を維持するためにサーバーサイドんだろう
ダン・ゲイル

3

これが、ワードプレスの画像フィルターの1つを使用する私の見解です。ChipBennettによって提案されたものを使用しようとしましたが、成功しませんでした。

私がやったことは、カスタムサイズを作成し、特定のサイズであるかどうか、そして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

それでうまくいきましたか?
ポールシェルドレイク

まだテストする機会がありません。ありがとう!
ダンゲイル2011年

2

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

IEを本当にサポートしたい場合は、Modernizrを使用できます。これにより、対応していないブラウザーのターゲットimg要素に角の丸くないクラスが追加されます。

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

.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-rounded-cornersについては、必要に応じてフォールバックメソッドの1つを使用してください。


Modernizrを使用してこれを行うことをお勧めします。それでもサーバー側が必要です。
Dan Gayle、

もちろん、問題のサイトの
Dan Gayle

1

スタイルを設定したいサムネイル、一般的な「サムネイル」画像サイズ、または投稿サムネイル

どちらもCSSを介して簡単に実行できborder-radiusます。具体的には、プロパティです。具体的な答えはあなたの正確なニーズに依存します。更新させていただきます。

PS IMHOがTimThumb /キャッシュされたイメージルートに行くのは、最適とは言えません。WordPressで生成された、角の丸い画像(既にオブジェクトキャッシュの一部である)を使用し、CSSを使用して角を丸めます。


1
border-radiusは画像には適用されません。それは本当にトリッキーです。
fuxia

Mozillaのボーダー半径は、imgタグに適用すると、四角い角がポイントします
Dan Gayle

これはdivラッパーの背景画像として適用する必要がありますが、これはかなり非現実的です。
Wyck、2011

border-radiusは、現在のMozillaのimgタグで直接動作します。
ミロ

ミロが言ったこと。border-radius画像で問題なく動作します。私は自分のテーマのコメントGravatarにそれを使用します。
チップベネット

1

グーグル検索でGDで角を丸くすることは可能ですが、結果は最高ではありません。彼らは少しギザギザです。しかし、それは私の側の主観的な呼び出しです:http : //www.assemblysys.com/dataServices/php_roundedCorners.php

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

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

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



0

これは簡単です。

人々が言っ​​たように、最初に、最もクリーンで最も簡単な方法は、css3 border-radiusを使用することです。これは、サポートされていない一般的なIE6-8を除いて、ほとんどの最新のブラウザーで動作します...ただしIE9は動作します。

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

SOが私のようなもので、クライアントがすべてIEを使用している場合は、上記のhttp://css3pie.com/のようにCSS3 Pieをお勧めします。唯一の欠点は、画像のz-indexが乱れるため、フェードするスライダーを使用している場合に問題が発生する可能性があることです。

CSS3 Pieを使いたくない場合は、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/

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.