LiipImagineBundle

LiipImagine번들

PHPUnit	PHP-CS-Fixer	적용 범위	다운로드	풀어 주다

이 번들은 Symfony 기반 프로젝트를 위한 이미지 조작 추상화 툴킷을 제공합니다.

개요

• 필터 세트: Symfony에서 지원하는 구성 언어(예: YML 및 XML)를 사용하여 변환 루틴을 지정하는 필터 세트 정의를 생성할 수 있습니다. 이러한 정의에는 필터 및 후처리기 세트와 기타 선택적 매개변수가 포함됩니다.

• 필터: 이미지 변환은 필터를 사용하여 적용됩니다. 번들에는 내장 필터 세트가 제공되어 가장 일반적인 변환을 구현합니다. 예로는 축소판, 크기 조정, 자르기, 뒤집기, 스트립 및 워터마크가 있습니다. 더 발전된 변환을 위해 나만의 사용자 정의 필터를 쉽게 만들 수 있습니다.

• 포스트 프로세서: 결과 바이너리 이미지 파일( 필터 에서 생성됨)의 수정은 포스트 프로세서 에 의해 처리됩니다. 예로는 JPEG Optim, Moz JPEG, Opti PNG 및 PNG Quant가 있습니다. 필터와 마찬가지로 사용자 정의 후처리기를 쉽게 만들 수 있습니다.

예

다양한 변환을 수행하도록 구성할 수 있는 my_thumb 필터 세트를 정의했다고 가정해 보겠습니다. 가장 간단한 호출은 이미지 경로를 제공된 imagine_filter Twig 필터로 파이프하는 것입니다.

< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />

기여자 행동 강령

이 프로젝트는 기여자 행동 강령과 함께 출시되었습니다. 이 프로젝트에 참여함으로써 귀하는 해당 약관을 준수할 것에 동의하게 됩니다.

속성

• 이 프로젝트에 시간과 코드를 바친 많은 기여자에게 감사드립니다.

• 이 번들은 이미지 변환을 위해 독립형 PHP Imagine Library를 사용합니다.

• 이 패키지는 코드 확장성을 높이기 위해 AvalancheImagineBundle에서 분기되었습니다. 이 포크의 이유에 대한 추가 정보는 AvalancheImagineBundle#25를 참조하세요.

설정

설치

이 패키지를 사용하는 것은 모든 Symfony 번들과 유사합니다. 다음 단계를 수행해야 합니다.

1. 번들 다운로드
2. 번들 활성화
3. 경로 등록

자세한 설정 지침은 설명서의 설치 장에서 확인할 수 있습니다.

구성

사용 가능한 모든 구성 옵션에 대한 자세한 내용은 설명서의 구성 장에서 확인할 수 있습니다.

사용법 입문서

일반적으로 이 번들은 템플릿 내부의 이미지에 필터 세트를 적용하여 작동합니다. 필터 세트 는 애플리케이션의 구성 파일(종종 app/config/config.yml ) 내에 정의되며 필터 , 포스트 프로세서 및 기타 선택적 매개변수 모음으로 구성됩니다.

나중에 포스트 프로세서 와 기타 사용 가능한 매개변수에 대해 자세히 알아보겠습니다. 지금은 몇 가지 필터 로 구성된 간단한 필터 세트를 정의하는 방법에 중점을 두겠습니다.

썸네일 만들기

시작하기 전에 데이터 로더와 캐시 확인자가 올바르게 작동하는지 확인하는 데 필요한 약간의 구성이 있습니다. 구성 파일에 다음 상용구를 사용하세요.

 # app/config/config.yml

liip_imagine :

    # configure resolvers
    resolvers :

        # setup the default resolver
        default :

            # use the default web path
            web_path : ~

    # your filter sets are defined here
    filter_sets :

        # use the default cache configuration
        cache : ~

기본 구성을 갖춘 상태에서 일반적인 사용 사례인 썸네일 생성을 충족하는 예제부터 시작하겠습니다. 결과 썸네일에 다음과 같은 변환이 적용되기를 원한다고 가정해 보겠습니다.

• 이미지 크기를 조정하고 120x90px로 자릅니다.
• 크기가 조정된 이미지에 2px 검정색 테두리를 추가합니다.
• 이미지 품질을 75로 조정합니다.

위에서 상용구에 추가하여 두 개의 필터( thumbnail 및 background 필터) 가 구성된 필터 세트 ( my_thumb 로 이름 지정)를 정의해야 합니다.

 # app/config/config.yml

liip_imagine :
    resolvers :
        default :
            web_path : ~

    filter_sets :
        cache : ~

        # the name of the "filter set"
        my_thumb :

            # adjust the image quality to 75%
            quality : 75

            # list of transformations to apply (the "filters")
            filters :

                # create a thumbnail: set size to 120x90 and use the "outbound" mode
                # to crop the image when the size ratio of the input differs
                thumbnail  : { size : [120, 90], mode : outbound }

                # create a 2px black border: center the thumbnail on a black background
                # 4px larger to create a 2px border around the final image
                background : { size : [124, 94], position : center, color : '#000000' }

이제 썸네일 변환을 수행하는 my_thumb 라는 필터 세트를 만들었습니다. thumbnail 필터는 이미지를 원하는 너비와 높이(이 예에서는 120x90px)로 크기를 조정하며, mode: outbound 옵션을 사용하면 입력 비율이 다를 경우 결과 이미지가 잘립니다. background 필터는 124x94px 크기의 검정색 캔버스를 생성하고 썸네일을 중앙에 배치하여 2px 검정색 테두리를 생성합니다.

참고: 필터 세트에는 원하는 수의 필터가 정의될 ​​수 있습니다. 단순 변환에는 단일 필터 만 필요할 수 있지만 복잡한 변환에는 정의된 필터 수가 무제한일 수 있습니다.

추가 필터가 많이 있지만 지금은 새로 정의된 my_thumb 필터 세트를 템플릿 내에서 즉시 사용할 수 있습니다.

Twig 기반 템플릿의 경우 다음을 사용합니다.

< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />

또는 PHP 기반 템플릿의 경우 다음을 사용합니다.

<img src=" <?php $ this ['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb') ?> " />

배후에서 번들은 첫 번째 페이지 요청이 제공될 때 즉시 이미지에 필터를 적용합니다. 변환된 이미지는 후속 요청을 위해 캐시됩니다. 최종 캐시된 이미지 경로는 /media/cache/my_thumb/relative/path/to/image.jpg 와 유사합니다.

참고: * dev 환경을 사용하면 템플릿 도우미를 통해 이미지가 제대로 렌더링되지 않는 것을 확인할 수 있습니다. 이는 애플리케이션 구성에서 intercept_redirect 활성화했기 때문에 발생하는 경우가 많습니다. 이미지가 렌더링되도록 하려면 이 옵션을 비활성화하는 것이 좋습니다:

 # app/config/config_dev.yml

web_profiler :
    intercept_redirects : false

런타임 옵션

때로는 사용 시나리오의 99%를 충족하는 필터가 정의되어 있을 수 있습니다. 잘못된 1% 사례에 대해 새 필터를 정의하는 대신 템플릿 도우미에 옵션 배열을 전달하여 런타임 시 필터 동작을 변경하도록 선택할 수 있습니다.

Twig 기반 템플릿의 경우 다음을 사용합니다.

{% set runtimeConfig = { " thumbnail " : { " size " : [ 50 , 50 ] }} %}

< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' , runtimeConfig ) }} " />

또는 PHP 기반 템플릿의 경우 다음을 사용합니다.

 <?php
$ runtimeConfig = array (
    " thumbnail " => array (
        " size " => array ( 50 , 50 )
    )
);
?>

<img src=" <?php $ this [ ' imagine ' ]-> filter ( ' /relative/path/to/image.jpg ' , ' my_thumb ' , $ runtimeConfig ) ?> " />

경로 확인

필터링된 이미지에 대해 이 번들이 반환한 이미지 경로를 확인해야 하는 경우가 있습니다. 이는 Symfony의 콘솔 바이너리를 사용하거나 컨트롤러 또는 기타 코드 내에서 프로그래밍 방식으로 쉽게 달성할 수 있습니다.

콘솔로 해결

콘솔 명령 liip:imagine:cache:resolve 사용하여 이미지 URL을 확인할 수 있습니다. 유일한 필수 인수는 하나 이상의 상대 이미지 경로입니다(공백으로 구분해야 함).

$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg relative/path/to/image2.jpg

또한 --filter 옵션을 사용하여 해결하려는 필터를 지정할 수 있습니다( --filter 옵션을 생략하면 사용 가능한 모든 필터가 해결됩니다).

$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg --filter=my_thumb

프로그래밍 방식으로 해결

liip_imagine.cache.manager 서비스의 getBrowserPath 메소드를 사용하여 코드에서 이미지 URL을 확인할 수 있습니다. $imagineCacheManager 라는 변수에 이미 서비스가 할당되어 있다고 가정하면 다음을 실행합니다.

 $ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' );

종종 컨트롤러에서 이 작업을 수행해야 합니다. 컨트롤러가 기본 Symfony 컨트롤러에서 상속된다고 가정하면 상속된 get 메서드를 활용하여 liip_imagine.cache.manager 서비스를 요청할 수 있습니다. 이 서비스에서 상대 이미지 경로에서 getBrowserPath 호출하여 확인된 위치를 가져올 수 있습니다.

 /** @var CacheManager */
$ imagineCacheManager = $ this -> get ( ' liip_imagine.cache.manager ' );

/** @var string */
$ resolvedPath = $ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' );

필터

이 번들은 내장된 필터 세트를 제공하며 자신만의 필터를 쉽게 정의할 수도 있습니다. 설명서에서 필터 장을 참조하세요.

서비스로 사용

컨트롤러 내에서 정의된 "필터 세트"를 사용해야 하는 경우 서비스 컨테이너에서 이 번들의 FilterService를 가져와서 무거운 작업을 수행할 수 있습니다.

 <?php

class MyController extends Controller
{
    public function indexAction ()
    {
        /** @var FilterService */
        $ imagine = $ this
            -> container
            -> get ( ' liip_imagine.service.filter ' );

        // 1) Simple filter, OR
        $ resourcePath = $ imagine -> getUrlOfFilteredImage ( ' uploads/foo.jpg ' , ' my_thumb ' );
        
        // 2) Runtime configuration
        $ runtimeConfig = [
            ' thumbnail ' => [
                ' size ' => [ 200 , 200 ]
            ],
        ];
        $ resourcePath = $ imagine -> getUrlOfFilteredImageWithRuntimeFilters (
            ' uploads/foo.jpg ' ,
            ' my_thumb ' ,
            $ runtimeConfig
        );

        // ..
    }
}

?> 

데이터 루트

기본적으로 Symfony의 web/ 디렉토리는 자산을 로드할 데이터 루트로 등록됩니다. 대부분의 설치에서는 이것으로 충분하지만 때로는 다른 위치에서 이미지를 로드해야 할 수도 있습니다. 이렇게 하려면 구성(종종 app/config/config.yml 에 있음)에서 data_root 매개변수를 설정해야 합니다.

 liip_imagine :
    loaders :
        default :
            filesystem :
                data_root : /path/to/source/images/dir

버전 1.7.2 부터 여러 데이터 루트 경로를 등록할 수 있으며 파일 로케이터는 각 경로에서 요청된 파일을 검색합니다.

 liip_imagine :
    loaders :
        default :
            filesystem :
                data_root :
                    - /path/foo
                    - /path/bar

버전 1.7.3 부터 등록된 모든 번들의 공용 리소스 경로가 데이터 루트로 자동 등록되도록 요청합니다. 이를 통해 로드된 번들 내에 있는 Resources/public 폴더에서 자산을 로드할 수 있습니다. 이 기능을 활성화하려면 bundle_resources.enabled 구성 옵션을 true 로 설정하세요.

 liip_imagine :
    loaders :
        default :
            filesystem :
                bundle_resources :
                    enabled : true

Resource/public 폴더 중 일부만 등록하고 싶은 경우, 등록하고 싶지 않은 번들을 블랙리스트에 등록하거나 등록하고 싶은 번들을 화이트리스트에 추가하여 등록할 수 있습니다. 예를 들어 "FooBundle" 및 "BarBundle" 번들을 블랙리스트에 추가(등록하지 않음)하려면 다음 구성을 사용합니다.

 liip_imagine :
    loaders :
        default :
            filesystem :
                bundle_resources :
                    enabled : true
                    access_control_type : blacklist
                    access_control_list :
                        - FooBundle
                        - BarBundle

또는 "FooBundle" 및 "BarBundle" 번들을 화이트리스트(등록만)하려는 경우 다음 구성을 사용합니다.

 liip_imagine :
    loaders :
        default :
            filesystem :
                bundle_resources :
                    enabled : true
                    access_control_type : whitelist
                    access_control_list :
                        - FooBundle
                        - BarBundle

권한

웹 서버에서 이미지 위치를 읽을 수 있어야 합니다. setfacl 지원하는 시스템(예: Linux/BSD)에서는 다음을 사용합니다.

HTTPDUSER= ` ps axo user,comm | grep -E ' [a]pache|[h]ttpd|[_]www|[w]ww-data|[n]ginx ' | grep -v root | head -1 | cut -d   -f1 `

sudo setfacl -R -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dir

sudo setfacl -dR -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dir

macOS 및 기타 환경과 호환되는 명령은 Symfony 권한 설명서를 참조하세요.

아파치 사용

Apache VHost 구성에 다음을 추가하여 Apache에 대한 읽기 액세스 권한을 부여해야 합니다.

< VirtualHost *:80>
    <!-- Rest of directives like DocumentRoot or ServerName -->

    Alias /FavouriteAlias /path/to/source/images/dir
    < Directory " /path/to/source/images/dir " >
        AllowOverride None
        Allow from All
    </ Directory >
</ VirtualHost >

또는 프로젝트 내의 별도 파일에 지시어를 배치하고 이를 Apache VHost 구성에 포함할 수 있습니다. 예를 들어, app/config/apache/photos.xml 파일을 생성하고 VHost 파일에 다음을 추가할 수 있습니다.

< VirtualHost *:80>
    <!-- Rest of directives like DocumentRoot or ServerName -->

    Include "/path/to/your/project/app/config/apache/photos.xml"
</ VirtualHost >

이 방법을 사용하면 코드의 나머지 부분과 함께 파일을 유지하므로 쉽게 변경하거나 다른 환경 종속 구성 파일을 만들 수 있습니다.

Apache를 올바르게 구성한 후에는 절대 경로 /path/to/source/images/dir/logo.png 사용하는 이미지의 상대 경로가 /FavouriteAlias/logo.png 여야 합니다.

선적 서류 비치

이 번들의 기능에 대한 자세한 내용은 설명서를 참조하세요.