web-dev-qa-db-ja.com

メディア（画像）を50％で拡大縮小する方法はありますか？

アップロードしたメディアを正確に50％に縮小する方法があるのでしょうか。

add_image_sizeでは、幅と高さをピクセル単位でしか指定できません。

その考えは、Retinaディスプレイ用の高解像度画像をアップロードしてから、Wordpressに標準ディスプレイ用に縮小したカスタム画像サイズを生成させることです。

元の画像と生成された他のすべてのカスタムサムネイルの両方にこれを適用するのが最善です。

助けてくれてありがとう。

imagesuploadsmediaimage-resize
3
achairapart

image_downsize filterを使用して、WordPressがオリジナルではなく縮小された画像を望んでいて、実際には存在しないもののサイズを望んでいるときにキャッチすることができます。

add_filter( 'image_downsize', 'wpse_60890_retina_scale', 10, 3 );

function wpse_60890_retina_scale( $value, $id, $size ) {
    if ( $size == 'wpse_60890_retina_scaled' ) {
        if ( !is_array( $imagedata = wp_get_attachment_metadata( $id ) ) )
            return false;

        $img_url          = wp_get_attachment_url( $id );
        $img_url_basename = wp_basename( $img_url );

        if ( isset( $imagedata['sizes']['wpse_60890_retina_scaled'] ) ) {
            $intermediate = $imagedata['sizes']['wpse_60890_retina_scaled'];
            $url  = str_replace($img_url_basename, $intermediate['file'], $img_url);

            return array( $url, $data['width'], $data['height'] );
        }

        $file = get_attached_file( $id );
        $image = wp_load_image( $file );

        if ( !is_resource( $image ) )
            return new WP_Error( 'error_loading_image', $image, $file );

        $size = @getimagesize( $file );
        if ( !$size )
            return new WP_Error( 'invalid_image', __('Could not read image size'), $file );

        list( $orig_w, $orig_h, $orig_type ) = $size;

        $max_w = round( $orig_w / 2 );
        $max_h = round( $orig_h / 2 );

        $resized = image_make_intermediate_size( $file, $max_w, $max_h );

        $imagedata['sizes']['wpse_60890_retina_scaled'] = $resized;

        wp_update_attachment_metadata( $id, $imagedata );

        $url = str_replace($img_url_basename, $resized['file'], $img_url);

        return array( $url, $resized['width'], $resized['height'] );
    }

    return $value;
}

今、あなたはあなたがあなたがフルサイズを必要としているところか、50％で拡大縮小されるところかを決定しなければなりません。

例えばあなたは

   echo 'full size:' . wp_get_attachment_image( $attachment->ID, 'full' );
   echo 'scaled by 50%: ' . wp_get_attachment_image( $attachment->ID, 'wpse_60890_retina_scaled' );
3
nvartolomei

私は、@ nvartolomeiソリューションをそのままでは使用できませんでした。機能的ではありませんでしたが、まだ良い出発点です。

これが私の最終的な解決策です。

元の3つのサイズを2倍にして、3つの新しいimage sizesを追加します。

  • large_retina
  • ミディアムレティナ
  • thumbnail_retina

withとheightをそれらの非網膜等価物で置き換えるためにPHPでそれらを呼び出すときに私はfilterを置きます（それは常に2で割ることについてではないので）。

  • original：src = image.jpg width = 4800 height = 4000
  • 大（600×600）：src = image-600x500.jpg width = 600 height = 500

  • large_retina（600 x 600）：src = image-1200x1000.jpg width = 600 height = 500

  • original：src = image.jpg width = 900 height = 750

  • 大（600×600）：src = image-600x500.jpg width = 600 height = 500
  • large_retina（600 x 600）：src = image.jpg width = 600 height = 500

function.php：

add_action( 'init', 'cjg_register_sizes' );
add_filter( 'image_downsize', 'cjg_retina_scale', 10, 3 );

function cjg_register_sizes(){
    add_image_size( 'large_retina', get_option( 'large_size_w' ) * 2 , get_option( 'large_size_h' ) * 2 );
    add_image_size( 'medium_retina', get_option( 'medium_size_w' ) * 2 , get_option( 'medium_size_h' ) * 2 );
    add_image_size( 'thumbnail_retina', get_option( 'thumbnail_size_w' ) * 2 , get_option( 'thumbnail_size_h' ) * 2 );
}

function cjg_retina_scale( $value, $id, $size ) {

    if ( $size == 'large_retina' OR $size == 'medium_retina' OR $size == 'thumbnail_retina' ) {
        if ( !is_array( $imagedata = wp_get_attachment_metadata( $id ) ) )
            return false;

        if ( $size == 'large_retina')       $regular_size = 'large';
        elseif ( $size == 'medium_retina')  $regular_size = 'medium'; 
        else                                $regular_size = 'thumbnail';

        $img_url          = wp_get_attachment_url( $id );
        $img_url_basename = wp_basename( $img_url );

        if ( isset( $imagedata['sizes'][$regular_size] ) ) {

            $width = $imagedata['sizes'][$regular_size]['width'];
            $height = $imagedata['sizes'][$regular_size]['height'];

            if ( isset( $imagedata['sizes'][$size] ) )
                $url  = str_replace($img_url_basename, $imagedata['sizes'][$size]['file'], $img_url);
            else
                $url  = $img_url;

        }else{
            $url  = $img_url;
            $width = $imagedata['width'];
            $height = $imagedata['height'];
        }

        return array( $url, $width, $height );
    }

    return $value;
}

今、あなたはただこのようにあなたの画像を呼び出すことができます

wp_get_attachment_image( $attachment->ID, 'thumbnail_retina' );
wp_get_attachment_image( $attachment->ID, 'medium_retina' );
wp_get_attachment_image( $attachment->ID, 'large_retina' );

重要：3つの新しいサイズを追加した後、私は regenerate-thumbnailsプラグイン ですべてのサムネイルを再生成しました

2
Christian