필요할 때만 썸네일을 생성하는 방법은 무엇입니까?


18

1000 개의 이미지가 있습니다. 필요한 경우에만 엄지 손가락을 생성하도록 wordpress를 어떻게 만들 수 있습니까? 예를 들어, 홈 슬라이더는 10 개의 이미지 만 사용합니다. 다른 1000 개의 이미지에는 공간과 리소스 낭비로 생성 된 해당 썸네일을 원하지 않습니다.

필요할 때만 add_image_size를 실행하는 방법이 있습니까?

감사

업데이트 언급했듯이 실제로 해고 해야하는 것을 add_image_size는 아닙니다. 가장 좋은 점은 the_post_thumbnail ( 'slider-thumb')을 사용할 때 이미지 크기를 조정하는 것입니다 . 어쩌면 이것은 이미지의 첫 번째보기를 늦추지 만 실제로는 게시물을 검토 할 때 일반적으로 나에 의해 생성되므로 관심이 없습니다.

그래서 내 게시물, 슬라이더, 블로그 썸네일, 포트폴리오 썸네일 등 사이에 1000 개의 이미지가 있고 슬라이더에 대해 10 개의 이미지 크기를 조정하고 싶습니다. 다른 990 이미지의 썸네일 크기를 생성하는 데 낭비되는 리소스가 많이 있습니다.

분명해 지길 바래, 내 영어 미안해


2
여분의 990 이미지로 생성 된 썸네일은 처음에는 990 개의 사용되지 않은 이미지보다 공간과 자원 낭비가 더 많습니까? 현재 사용중인 이미지 만 업로드하는 것이 더 합리적이지 않습니까?
SickHippie

더 숙련 된 프로그래머가 당신의 생각에 반대되는 유효한 주장을 제시하고 있지만, 나는 그것이 흥미 롭습니다. 엄지 손가락을 생성하지 않고 이미지를 업로드하는 플러그인 및 테마를 보았습니다 (현재 확실하지 않음). 그러나 귀하의 질문에 대한 나의 큰 의심은 언제 필요합니까? . 필터는 무엇입니까?
brasofilo

1
당신은 저를 잘못 받았습니다. 게시물에 990 이미지를 사용하고 홈 슬라이더에서를 사용하지 않습니다. 그들 중 일부는 포트폴리오에 대한 엄지 손가락, 블로그에 대한 다른 엄지 손가락 등이 필요합니다
chifliiiii

답변:


12

오토의 다이내믹 이미지 리사이 저 플러그인 살펴보기

이 플러그인은 WordPress에서 이미지를 생성하는 방식을 변경하여 이미지가 실제로 어딘가에서 사용될 때만 이미지를 생성하도록합니다. 이렇게 생성 된 이미지는 나중에 웹 서버에서 빠르게 전송하기 위해 일반 업로드 디렉토리에 저장됩니다. 결과적으로 공간이 절약되고 (필요할 때만 이미지가 생성되므로) 이미지 업로드가 훨씬 빨라집니다 (업로드시 이미지가 더 이상 생성되지 않기 때문에).


2
플러그인은 오래된 게시물에 이미지를 추가하는 데 문제가 있습니다. 패치는 환영합니다.
Otto

정확히 내가 찾던 것입니다. 나는 그것을 시도 할 것이다. 새 게시물에서만 작동합니까?
chifliiiii

1
이 게시물을 지금 접하는 사람들에게는 다음과 같은 플러그인이 활발하게 개발되고 있습니다 : wordpress.org/plugins/fly-dynamic-image-resizer
Tim Malone

7

이것을 테마 함수 파일에 넣으십시오. 업로드 할 때 Wordpress가 3 가지 기본 크기 이외의 것을 만들지 못하게합니다.

이미지가 아직 생성되지 않은 특정 크기로 요청되면 해당 이미지는 한 번만 생성됩니다.

        add_filter('image_downsize', 'ml_media_downsize', 10, 3);
        function ml_media_downsize($out, $id, $size) {
            // If image size exists let WP serve it like normally
            $imagedata = wp_get_attachment_metadata($id);
            if (is_array($imagedata) && isset($imagedata['sizes'][$size]))
                return false;

            // Check that the requested size exists, or abort
            global $_wp_additional_image_sizes;
            if (!isset($_wp_additional_image_sizes[$size]))
                return false;

            // Make the new thumb
            if (!$resized = image_make_intermediate_size(
                get_attached_file($id),
                $_wp_additional_image_sizes[$size]['width'],
                $_wp_additional_image_sizes[$size]['height'],
                $_wp_additional_image_sizes[$size]['crop']
            ))
                return false;

            // Save image meta, or WP can't see that the thumb exists now
            $imagedata['sizes'][$size] = $resized;
            wp_update_attachment_metadata($id, $imagedata);

            // Return the array for displaying the resized image
            $att_url = wp_get_attachment_url($id);
            return array(dirname($att_url) . '/' . $resized['file'], $resized['width'], $resized['height'], true);
        }


        add_filter('intermediate_image_sizes_advanced', 'ml_media_prevent_resize_on_upload');
        function ml_media_prevent_resize_on_upload($sizes) {
            // Removing these defaults might cause problems, so we don't
            return array(
                'thumbnail' => $sizes['thumbnail'],
                'medium' => $sizes['medium'],
                'large' => $sizes['large']
            );
        }

이 파일러는 WordPress에서 표준이어야합니다. 왜 모든 이미지에 대해 모든 크기를 생성합니까? 이 코드를 사용자 정의 테마에 추가하고 있습니다. 감사합니다
Michaelkay

2
멋지지만 이제는 하나의 사용자 정의 크기 만 필요한 경우 여전히 모든 이미지를 생성합니다.
Gijs

고급 사용자 정의 필드의 이미지 객체를 사용할 때 발생합니다
Gijs

작동하지 않습니다 add_image_size가 방금 변경된 이미지 크기로 정의 된 경우
Benjamin Intal

@Michaelkay이 접근법에는 성능 저하가 있습니다. 이미지를 업로드 한 다음 모든 크기에 대해 생성 할 때 업 로더가 인내심이있는 것을 의미합니다. 이 코드를 사용하면 방문자의 인내심이 높아지고 Google에서로드하는 데 2 ​​초 이상 걸리는 것으로 입증 된 사이트는 사람이 50 % 감소합니다. 또한 사이트에 수백 건의 동시 방문이있는 경우 서버가 다운됩니다.
Tom Roggero

2

불행히도 @Patrick의 답변은 WP 4.4에 도입 된 srcset 함수를 중단합니다. 다행히도 두 가지 기능을 추가하면됩니다.

먼저 등록 된 모든 썸네일 크기를 이미지 메타 데이터에 일시적으로 다시 도입하여 다음과 같이 고려할 수 있습니다.

function bi_wp_calculate_image_srcset_meta($image_meta, $size_array, $image_src, $attachment_id){
    //all registered sizes
    global $_wp_additional_image_sizes;

    //some source file specs we'll use a lot
    $src_path = get_attached_file($attachment_id);
    $src_info = pathinfo($src_path);
    $src_root = trailingslashit($src_info['dirname']);
    $src_ext = $src_info['extension'];
    $src_mime = wp_check_filetype($src_path);
    $src_mime = $src_mime['type'];
    $src_base = wp_basename($src_path, ".$src_ext");

    //find what's missing
    foreach($_wp_additional_image_sizes AS $k=>$v)
    {
        if(!isset($image_meta['sizes'][$k]))
        {
            //first, let's find out how things would play out dimensionally
            $new_size = image_resize_dimensions($image_meta['width'], $image_meta['height'], $v['width'], $v['height'], $v['crop']);
            if(!$new_size)
                continue;
            $new_w = (int) $new_size[4];
            $new_h = (int) $new_size[5];

            //bad values
            if(!$new_h || !$new_w)
                continue;

            //generate a filename the same way WP_Image_Editor would
            $new_f = wp_basename("{$src_root}{$src_base}-{$new_w}x{$new_h}." . strtolower($src_ext));

            //finally, add it!
            $image_meta['sizes'][$k] = array(
                'file'      => $new_f,
                'width'     => $new_w,
                'height'    => $new_h,
                'mime-type' => $src_mime
            );
        }
    }

    return $image_meta;
}
add_filter('wp_calculate_image_srcset_meta', 'bi_wp_calculate_image_srcset_meta', 10, 4);

그런 다음 일치 항목을 실행하고 누락 된 축소판을 생성해야합니다.

function bi_wp_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id){

    //get some source info
    $src_path = get_attached_file($attachment_id);
    $src_root = trailingslashit(pathinfo($src_path, PATHINFO_DIRNAME));

    //the actual image metadata (which might be altered here)
    $src_meta = wp_get_attachment_metadata($attachment_id);

    //an array of possible sizes to search through
    $sizes = $image_meta['sizes'];
    unset($sizes['thumbnail']);
    unset($sizes['medium']);
    unset($sizes['large']);

    $new = false;

    //loop through sources
    foreach($sources AS $k=>$v)
    {
        $name = wp_basename($v['url']);
        if(!file_exists("{$src_root}{$name}"))
        {
            //find the corresponding size
            foreach($sizes AS $k2=>$v2)
            {
                //we have a match!
                if($v2['file'] === $name)
                {
                    //make it
                    if(!$resized = image_make_intermediate_size(
                        $src_path,
                        $v2['width'],
                        $v2['height'],
                        $v2['crop']
                    )){
                        //remove from sources on failure
                        unset($sources[$k]);
                    }
                    else
                    {
                        //add the new thumb to the true meta
                        $new = true;
                        $src_meta['sizes'][$k2] = $resized;
                    }

                    //remove from the sizes array so we have
                    //less to search next time
                    unset($sizes[$k2]);
                    break;
                }//match
            }//each size
        }//each 404
    }//each source

    //if we generated something, update the attachment meta
    if($new)
        wp_update_attachment_metadata($attachment_id, $src_meta);

    return $sources;
}
add_filter('wp_calculate_image_srcset', 'bi_wp_calculate_image_srcset', 10, 5);

이것이 딱딱한 자르기를 깨뜨릴 것이라는 사실을 알려주기위한 것입니다! 이것이 범인임을 알아내는 데 몇 시간이 걸렸습니다. 나는 해결책을 찾고 있습니다 ...
Constantin Groß

1

실제로, add_image_size()썸네일을 생성하지 않고 WordPress에서 사용 가능한 이미지 크기 만 등록합니다.

일반적으로 미리보기 이미지는 이미지가 처음 업로드 될 때 생성됩니다. 자동 프로세스이므로 나중에 생성에 대해 걱정할 필요가 없습니다. 느린 서버에서 썸네일을 생성하는 데 1-2 초가 걸리고 요청 될 때까지 기다리는 경우 요청자가 이미지 당 1-2 초 동안 추가로 콘텐츠를 보도록 강제합니다 . 미리 업로드하는 것이 훨씬 쉽습니다 (예 : 이미지가 업로드 될 때).

동시에 다른 시간에 썸네일을 처리해야하는 경우 Viper의 재생성 썸네일 플러그인을 살펴볼 수 있습니다. 주문형 작업을 사용하여 모든 이미지 축소판 을 재생성 하지만 필요한 경우에만 유사한 코드를 사용하여 축소판을 생성 할 수 있습니다.


나는 당신이 요점을 얻지 못했다고 생각합니다. 그는 썸네일이 필요한 이미지를 제어하려고합니다. 따라서 일부 이미지의 크기를 전혀 조정할 필요가 없습니다.
Drunken Master

대부분의 사람들은 사진을 삽입 할 때 페이지를 테스트합니다 (모든 것을 말하면 꽤 절약 할 수 있습니다). 필자의 경우 헤더 이미지 크기가 등록되어 있습니다. 내가 업로드하는 이미지 중 약 1 개는 실제로 헤더 용입니다. 따라서 내 라이브러리의 20 개 이미지 중 19 개는 공간을 낭비합니다.
JpaytonWPD

1

필요할 때만 add_image_size를 실행하는 방법이 있습니까?

정확히. 그러나 썸네일이 생성되기 직전에 등록 된 크기 목록을 필터링 할 수 있습니다. 축소판을 생성하는 함수를 호출하는 wp_generate_attachment_metadata () 함수에는 "intermediate_image_sizes_advanced"라는 필터가 있으며 파일을 생성하기 직전에 크기 배열을 조작 할 수 있습니다. 특정 "유형"의 이미지를 추가 할 때마다이 필터를 사용한 다음 바로 제거 할 수 있습니다.

여분의 크기가 필요한 이미지와 그렇지 않은 이미지를 구별하는 방법을 파악하는 것이 가장 큰 과제라고 생각합니다.


예를 들어 생성하려는 엄지 손가락을 선택하기 위해 미디어를 업로드 할 때 옵션 또는 확인란을 추가해야합니다. 잘 들리지만 어떻게
해야할지 모르겠습니다

1

내 (Ottos 아님) "Dynamic Image Resize" 1) 플러그인을 사용할 수 있습니다 .

"Dynamic Image Resize"는 TimThumb없이 WP 핵심 기능을 사용하여 "비행 중"이미지 크기를 조정할 수있는 짧은 코드와 템플릿 태그를 제공하는 WordPress (MU-) 플러그인입니다.

플러그인에는 템플릿 태그와 단축 코드 도 함께 제공됩니다.

1) 방금 오토 플러그인에 대해 알게되었습니다. 명명 충돌이 의도되지 않았습니다.



0

WP Performance Pack 플러그인은 Ottos Dynamic Image Resizer를 기반으로 한 "향상된 이미지 처리"를 제공하지만 다음과 같은 많은 개선 사항이 포함되어 있습니다. (캐시 될 수 있고 CDN 지원이 제대로 작동하지 않음), Thumbails 통합 재생 (기존 썸네일 삭제) 및 기타 기능.


-1

Aqua Resizer- https: //github.com/syamilmj/Aqua-Resizer/도 시도해보십시오

하나의 파일 일뿐입니다.

다음과 같이 사용할 수 있습니다.

$img_src = aq_resize( $img_src, $width = null, $height = null, $crop = null, $single = true, $upscale = false );

$img_src = aq_resize( $img_src, 150, 150); // resized
$img_src = aq_resize( $img_src, 150, 150, true); // cropped
$img_src = aq_resize( $img_src, 150, 150, null, null, true); // image with 120x120 for example will be upscaled up to 150x150

-1

또 다른 접근법 : 404 HTTP 오류 처리에 연결됩니다. 즉, 썸네일을 사용할 수없는 경우 원본 이미지를 찾아 썸네일을 만듭니다. 업로드하는 동안 썸네일 생성을 방지하지 않으므로 문제가 실제로 해결되지는 않습니다.

또한 악의적 인 사용자가이 플러그인을 사용하여 여러 개의 축소판을 만들어 디스크 공간을 소모 할 수 있습니다.

참고 :이 플러그인은 Pluginception을 사용하여 쉽게 설치할 수 있습니다 .

<?php
/*
Plugin Name: Create thumbnails on demand
Plugin URI: 
Description: Create thumbnails instead of showing 404. Use in combination with "Broken Link Checker" to create all missing thumbnails.
Version: 0.1
Author: Jack Miller
Author URI: 
License: 
License URI: 
*/
add_filter('status_header', 'createThumbIf404');
function createThumbIf404($httpCodeString) //e.g. HTTP/1.1 200 OK 
{
    global $wp_query;
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

    $httpCode = explode(" ", $httpCodeString);
    $httpCode = $httpCode[1];
    if ($httpCode == "404") {
        $requestUri = $_SERVER["REQUEST_URI"];
        $regex = '/^\/(wp-content\/uploads\/(?:[a-zA-Z0-9]*\/){2})(.*)-(.*)x(.*)\.jpg$/';
        preg_match($regex, $requestUri, $groups);
        if (sizeof($groups) === 5) {
            $baseDir  = $groups[1];
            $baseName = $groups[2];
            $sizeX    = $groups[3];
            $sizeY    = $groups[4];

            $oriImg = ctod_checkFile($baseDir, $baseName);
            if ($oriImg != null) {

                $image = wp_get_image_editor($baseDir . $oriImg);
                if (!is_wp_error($image)) {
                    $image->resize($sizeX, $sizeY, true);
                    $thumb = $baseDir . $baseName . '-' . $sizeX . 'x' . $sizeY . '.jpg';
                    $image->save($thumb);
                    ctod_sendImageAndExit($thumb);
                }
            }
        }
    }
}
//finds original image within $baseDir with $baseName.
//Returns file name including extension of original image or null.
function ctod_checkFile($baseDir, $baseName)
{
    $arr = array(
        ".jpg",
        ".JPG",
        ".jpeg",
        ".JPEG"
    );
    foreach ($arr as &$ext) {
        if (file_exists($baseDir . $baseName . $ext)) {
            return $baseName . $ext;
        }
    }
    return null;
}
//Read file at $path from disk and return it as HTTP JPG image request.
function ctod_sendImageAndExit($path)
{
    $fp = fopen($path, 'rb');
    header("Content-Type: image/jpeg");
    header("Content-Length: " . filesize($path));
    fpassthru($fp);
    exit();
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.