responsive pics
Version 1.8.3
ResponsivePics 는 WordPress 테마 작성자가 반응형 레이아웃에서 이미지 크기를 자동으로 * 조정할 수 있게 해주는 WordPress 플러그인입니다.
*ReponsivePics는 WordPress wysiwig 편집기의 이미지를 처리하지 않으며 테마에 이미지나 사진을 사용하는 테마 작성자에게만 유용합니다. 미디어 쿼리를 통해 Retina 또는 HDPI 이미지를 자동으로 처리합니다.
전체 문서와 예시를 보려면 Response.pics를 방문하세요.
| 전제조건 | 확인 방법 |
|---|---|
| PHP >= 5.6.x | php -v |
| 워드프레스 >= 3.5.x | wp core version |
| WP-Cron 활성화 또는 실제 cron 작업 설정 | test WP-Cron |
명령줄이나 WordPress 관리자 패널을 통해 이 플러그인을 설치할 수 있습니다.
Composer를 사용하여 WordPress를 관리하는 경우 ResponsivePics를 프로젝트 종속성에 추가하세요.
composer require clarifynl/responsive-pics그런 다음 wp-cli를 통해 플러그인을 활성화하십시오.
wp plugin activate responsive-pics 현재 <picture> 요소와 <img> 요소의 srcset 및 sizes 속성은 Internet Explorer 11을 제외한 모든 최신 브라우저에서 지원됩니다.
아직 지원하지 않는 브라우저에서 그림 요소 및 관련 기능에 대한 지원을 활성화하려면 폴리필을 사용할 수 있습니다. Picturefill을 사용하는 것이 좋습니다.
WordPress 테마에 Picturefill을 노드 모듈로 설치하려면 테마 디렉터리에서 다음 명령을 실행하세요.
npm install --save picturefill
yarn add picturefill
그리고 테마의 전역 자바스크립트 파일에서 패키지를 가져옵니다. import 'picturefill';
ResponsivePics는 다음과 같은 기본 변수를 사용합니다:
| 변하기 쉬운 | 유형 | 기본 | 정의 |
|---|---|---|---|
$columns | 숫자 | 12 | 그리드 레이아웃이 사용하는 열의 양 |
$gutter | 숫자 | 30 | 여백 너비(픽셀)(그리드 열 사이의 공간) |
$breakpoints | 정렬 | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | ResponsivePics가 이미지 소스를 생성하고 제공하는 데 사용할 미디어 쿼리 중단점 |
$grid_widths | 정렬 | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | ResponsivePics가 이미지 크기를 조정하는 데 사용할 레이아웃의 최대 너비(픽셀) |
$max_width_factor | 숫자 | 2 | 이미지 소스의 높이 크기 조정 및 자르기에 사용할 너비의 최대 요소 |
$lazyload_class | 끈 | lazyload | lazyload 활성화되면 img 태그에 추가될 CSS 클래스 |
$lqip_width | 숫자 | 100 | LQIP (저품질 이미지 자리 표시자)에 사용되는 이미지 너비입니다. |
$lqip_class | 끈 | blur-up | LQIP (낮은 품질 이미지 자리 표시자)가 활성화된 경우 img 태그에 추가될 CSS 클래스 |
$image_quality | 숫자 | 90 | 이미지 크기를 조정할 때 WP_Image_Editor 에서 사용되는 이미지 압축 품질(%) |
$wp_rest_cache | 부울 | false | WP Rest API 응답 헤더에서 캐시를 활성화할지 여부 |
$wp_rest_cache_duration | 숫자 | 3600 | WP Rest API Cache-Control 헤더의 캐시 기간(최대 기간)(초) |
기본적으로 ResponsivePics는 Bootstrap 4 SCSS 변수를 사용하여 다음을 정의합니다.
그리드 열의 양: $grid-columns: 12;
그리드 여백 너비 (픽셀): $grid-gutter-width: 30px;
픽셀 단위의 그리드 중단점 :
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);컨테이너의 최대 너비 (픽셀)는 다음과 같습니다.
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); 참고: ResponsivePics는 기본 sm 그리드 중단점(= 576px)을 기반으로 xs 컨테이너 최대 너비(= 576)를 추가합니다.
부트스트랩 기본값을 사용자 정의했거나 다른 그리드 시스템(Foundation, Materialize 등)을 사용 중이거나 추가 중단점 및 컨테이너 너비를 추가하려는 경우에도 자체 그리드 변수를 ResponsivePics 라이브러리에 전달할 수 있습니다.
테마의 function.php 에 다음 줄을 추가하고 ResponsivePics 클래스가 있는지 확인하세요.
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}다음 도우미 함수 중 하나를 실행하여 ResponsivePics에서 사용되는 모든 변수를 검색할 수 있습니다.
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration 템플릿에 반응형 <img> 요소를 삽입하려면 get_image 함수 또는 사용 가능한 매개변수와 함께 responsive-pics/v1/image API 엔드포인트를 사용하세요.
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| 매개변수 | 유형 | 필수의 | 기본 | 정의 |
|---|---|---|---|---|
| ID | 숫자 | 예 | WordPress 이미지 ID(예: 1)입니다. | |
| 크기 | 끈 | 예 | 선호하는 이미지 크기를 쉼표로 구분한 문자열입니다(예: 'xs-12, sm-6, md-4, lg-3' ). 자세한 내용은 크기 섹션을 참조하세요. | |
| 수확고 | 숫자/문자열 | 선택 과목 | false | (선택 사항) 자르기 위치(예: 0.75|ct )가 있는 기본 범위 0-2 (예: 0.75 ) 내에서 원하는 높이에 대한 너비의 자르기 인수입니다. 자세한 내용은 자르기 섹션을 참조하세요. |
| 수업 | 끈 | 선택 과목 | null | img 요소에 추가하려는 추가 CSS 클래스의 쉼표로 구분된 문자열입니다(예: 'my_img_class' 또는 'my_img_class, my_second_img_class' ). |
| 게으른 로드 | 부울/문자열 | 선택 과목 | false | true 인 경우 lazyload 클래스와 data-srcset 속성이 활성화됩니다. native 네이티브 loading="lazy" 속성을 활성화하는 경우. 자세한 내용은 지연 로딩 섹션을 참조하세요. |
| lqip | 부울 | 선택 과목 | false | true 인 경우 LQIP 클래스 및 src 속성이 활성화됩니다. 자세한 내용은 LQIP 섹션을 참조하세요. |
테마에서 반응형 <img> 데이터를 검색하려면 get_image_data 함수 또는 사용 가능한 매개변수 id , sizes , crop , classes , lazyload 및 lqip 와 함께 responsive-pics/v1/image-data API 엔드포인트를 사용할 수 있습니다.
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
그러면 중단점당 사용 가능한 이미지 소스, 대체 텍스트, MIME 유형, 알파 채널 및 지연 로드에 대한 부울 값, lqip 이미지에 대한 URL 및 CSS 클래스에 대한 배열이 포함된 배열이 반환됩니다.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; 템플릿에 반응형 <picture> 요소를 삽입하려면 get_picture 함수 또는 사용 가능한 매개변수와 함께 responsive-pics/v1/picture API 엔드포인트를 사용하세요.
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| 매개변수 | 유형 | 필수의 | 기본 | 정의 |
|---|---|---|---|---|
| ID | 숫자 | 예 | WordPress 이미지 ID(예: 1)입니다. | |
| 크기 | 끈 | 예 | 선호하는 이미지 크기를 쉼표로 구분한 문자열입니다(예: 'xs-12, sm-6, md-4, lg-3' ). 자세한 내용은 크기 섹션을 참조하세요. | |
| 수업 | 끈 | 선택 과목 | null | 그림 요소에 추가하려는 추가 CSS 클래스의 쉼표로 구분된 문자열입니다(예: 'my_picture_class' 또는 'my_picture_class, my_second_picture_class' ). |
| 게으른 로드 | 부울/문자열 | 선택 과목 | false | true 인 경우 lazyload 클래스와 data-srcset 속성이 활성화됩니다. native 네이티브 loading="lazy" 속성을 활성화하는 경우. 자세한 내용은 지연 로딩 섹션을 참조하세요. |
| 본질적인 | 부울 | 선택 과목 | false | true 인 경우 intrinsic 클래스 및 데이터 측면 특성이 활성화됩니다. 자세한 내용은 고유한 측면도 섹션을 참조하세요. |
테마에서 반응형 <picture> 데이터를 검색하려면 get_picture_data 함수 또는 사용 가능한 매개변수 id , sizes , classes , lazyload 및 intrinsic 과 함께 responsive-pics/v1/picture-data API 엔드포인트를 사용할 수 있습니다.
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
이는 중단점당 사용 가능한 그림 소스, 대체 텍스트, MIME 유형, 알파 채널 및 내장에 대한 부울 값, 그림 CSS 클래스에 대한 배열 및 img CSS 클래스에 대한 배열을 포함하는 배열을 반환합니다.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
]; 템플릿에 반응형 배경 이미지를 삽입하려면 get_background 함수 또는 사용 가능한 매개변수와 함께 responsive-pics/v1/background API 엔드포인트를 사용하세요.
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| 매개변수 | 유형 | 필수의 | 기본 | 정의 |
|---|---|---|---|---|
| ID | 숫자 | 예 | WordPress 이미지 ID(예: 1)입니다. | |
| 크기 | 끈 | 예 | 선호하는 이미지 크기를 쉼표로 구분한 문자열입니다(예: 'xs-12, sm-6, md-4, lg-3' ). 자세한 내용은 크기 섹션을 참조하세요. | |
| 수업 | 끈 | 선택 과목 | null | 배경 요소에 추가하려는 추가 CSS 클래스의 쉼표로 구분된 문자열입니다(예: 'my_bg_class' 또는 'my_bg_class, my_second_bg_class' ). |
테마에서 반응형 배경 이미지 데이터를 검색하려면 get_background_data 함수 또는 사용 가능한 매개변수 id , sizes 및 classes 와 함께 responsive-pics/v1/background-data API 엔드포인트를 사용할 수 있습니다.
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
이는 중단점당 사용 가능한 배경 이미지 소스, 대체 텍스트, MIME 유형, 부울 값(이미지에 알파 채널이 있는 경우), 배경 ID 및 배경 CSS 클래스 배열을 포함하는 배열을 반환합니다.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];다음 이미지 파일 형식이 지원됩니다.
| 파일 형식 | MIME 유형 | 속성 |
|---|---|---|
| jp(e)g | 이미지/jpeg | |
| 웹 | 이미지/웹 | Wordpress 버전 5.8 이상이 필요합니다. |
| png | 이미지/png | png에 알파 채널 이 포함된 경우 추가 스타일을 위해 추가 'has-alpha' 클래스가 그림 이미지 요소에 추가됩니다. |
| gif | 이미지/gif | GIF에 애니메이션 이 적용되면(여러 헤더 프레임을 확인함) 애니메이션 삭제를 방지하기 위해 이미지 크기 조정이나 자르기가 수행되지 않습니다. |
다른 이미지 형식은 크기가 조정되거나 잘리지 않습니다.
sizes 매개변수의 각 이미지 크기에 대해 다음 구문을 사용할 수 있습니다.
breakpoint:width| 매개변수 | 유형 | 필수의 | 기본 | 정의 |
|---|---|---|---|---|
| 중단점 | 숫자 또는 문자열 | 예 | 정의되지 않았고 width 숫자인 경우 중단점은 너비와 동일합니다. 정의되지 않았고 width 열 정의인 경우 중단점은 해당 중단점이 됩니다(예: 너비가 'xs-8' 인 경우 중단점은 'xs' 가 됩니다). | |
| 너비 | 숫자 또는 문자열 | 예 | 열 정의는 $grid_widths 의 키에 대시와 열 범위 번호(예: 'xs-8' )를 더한 것입니다.열 범위 번호에 -full 접미사가 붙는 경우(예: 'xs-8-full' ) 열 너비는 $grid_width 의 백분율로 계산되지만 다음 일치하는 $breakpoint 너비(예: .container-fluid 로 계산됩니다. ).다음에 일치하는 $breakpoint 너비를 기준으로 전체 너비 크기에 대한 범위 번호(예: 'xs-full' )로 full 를 사용할 수도 있습니다. |
<picture> 요소와 배경 이미지는 예술적인 이미지를 지원하므로 sizes 매개변수의 각 이미지 크기에 대해 다음 전체 구문을 사용할 수 있습니다.
breakpoint:width [/factor|height]|crop_x crop_y크기 구문에서는 다음 매개변수를 사용할 수 있습니다.
| 매개변수 | 유형 | 필수의 | 기본 | 정의 |
|---|---|---|---|---|
| 중단점 | 숫자 또는 문자열 | 예 | 정의되지 않았고 width 숫자인 경우 중단점은 너비와 동일합니다. 정의되지 않았고 width 열 정의인 경우 중단점은 해당 중단점이 됩니다(예: 너비가 'xs-8' 인 경우 중단점은 'xs' 가 됩니다). | |
| 너비 | 숫자 또는 문자열 | 예 | 이미지의 원하는(최대) 너비(예: 800 )입니다. 열 정의는 $grid_widths 의 키에 대시와 열 범위 번호(예: 'xs-8' )를 더한 것입니다.열 범위 번호에 -full 접미사가 붙는 경우(예: 'xs-8-full' ) 열 너비는 $grid_width 의 백분율로 계산되지만 다음 일치하는 $breakpoint 너비(예: .container-fluid 로 계산됩니다. ).다음에 일치하는 $breakpoint 너비를 기준으로 전체 너비 크기에 대한 범위 번호(예: 'xs-full' )로 full 를 사용할 수도 있습니다. | |
| 키 | 숫자 | 선택 과목 | 이미지의 원하는(최대) 높이(예: 500 )입니다. | |
| 요인 | 숫자 | 선택 과목 | 기본 범위 0-2 (예: 0.75 ) 내에서 원하는 높이에 대한 너비 자르기 계수입니다. | |
| 자르기_x | 숫자 또는 문자열 | 선택 과목 | 기음 | 수평 방향의 자르기 위치(예: c ). 자세한 내용은 자르기 섹션을 참조하세요. |
| 자르기_Y | 숫자 또는 문자열 | 선택 과목 | 기음 | 수직 방향의 자르기 위치(예: b ). 자세한 내용은 자르기 섹션을 참조하세요. |
유효한 자르기 위치로 다음 옵션을 사용할 수 있습니다.
가로 방향(x)으로 다음 자르기 위치 약칭을 사용할 수 있습니다.
l : 왼쪽c : 중심r : 그렇죠f : 초점(자세한 내용은 초점 섹션 참조)수직 방향(y):
t : 상단c : 중심b : 바닥 수직 방향이 설정되지 않은 경우 수평 방향 x 바로 가기로 처리됩니다.
c : 중심 중심t : 상단 중앙r : 오른쪽 중앙b : 중앙 하단l : 왼쪽 중앙f : 초점(자세한 내용은 초점 섹션 참조)유효한 자르기 위치 구문으로 백분율을 사용할 수도 있습니다.
75 10 : 왼쪽에서 75%, 위에서 10%25 80 : 왼쪽에서 25%, 위에서 80%50 100 : 왼쪽에서 50%, 위쪽에서 100% ( center bottom 동일) 이 경우 x 와 y 좌표가 모두 전달되어야 합니다.
이미지를 자르지만 이미지의 특정 영역만 표시되도록 하려면 f(ocal) 단축 기능을 사용할 수 있습니다. 이미지의 초점 영역을 설정하기 위해 우리는 Wordpress 미디어 프레임워크의 여러 보기에 초점 선택기 인터페이스를 추가했습니다.
Wordpress 미디어 라이브러리 그리드 보기에서 축소판을 클릭하면 Attachment details 모달이 표시됩니다. 초점을 선택하는 가장 정확한 보기는 다음과 같습니다. 
페이지나 게시물에서 추천 이미지를 설정하거나 교체할 때 Featured image 모달이 표시됩니다. 이 보기에서는 오른쪽 사이드바 상단에 있는 썸네일에서 초점을 선택할 수 있습니다. 
WYSIWYG 편집기나 페이지나 게시물의 메타 필드에서 이미지를 업로드하거나 편집할 때 Edit image 모달이 표시됩니다. 이 보기에서는 왼쪽 상단의 썸네일에서 초점을 선택할 수 있습니다. 
인터페이스를 사용하여 이미지의 초점을 설정할 수 있는 세 가지 방법이 있습니다.
이러한 옵션 중 하나를 사용하면 responsive_pics_focal_point 라는 게시 메타 키가 x 및 y 좌표를 백분율로 포함하는 배열 값으로 첨부 파일에 추가되거나 업데이트됩니다.
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]테마의 다른 곳에서 이 값을 사용하려면 다음을 호출하여 검색할 수 있습니다.
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics 함수 호출이 이루어지면 이 라이브러리는 Action Scheduler를 사용하여 크기 조정 및/또는 이미지 자르기 작업을 백그라운드 프로세스 대기열에 작업으로 추가합니다.백그라운드 처리 라이브러리 Action Scheduler에는 예약된 이미지 크기 조정 작업을 모니터링, 디버깅 및 수동으로 트리거하기 위한 관리 화면이 내장되어 있습니다. 관리 인터페이스는 다음을 통해 액세스할 수 있습니다.
Tools > Scheduled Actions모든 크기 조정 작업은 WordPress 이미지 ID를 기준으로 그룹화됩니다.
내장된 WP-Cron을 사용하는 경우 백그라운드 프로세스 대기열은 모든 페이지 로드 시 모든 작업만 처리합니다.
설정에서 WP-Cron 비활성화하고 서버에서 자체 cron 작업을 사용하는 경우 Action Scheduler는 해당 cron 작업에 설정된 간격을 사용하여 다음 작업 배치를 처리합니다.
define ( ' DISABLE_WP_CRON ' , true ); 우리처럼 Trellis를 사용하고 있다면 ❤️ 기본 크론 간격은 15분마다로 설정됩니다.
wordpress 사이트당 cron_interval (또는 다중 사이트의 경우 cron_interval_multisite ) 변수를 */1 로 설정하여 이를 1분으로 재정의할 수 있습니다.
예를 들어 trellis/group_vars/development/wordpress_sites.yml 에서는 다음과 같습니다.
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 '이 값을 변경한 후에는 서버를 다시 프로비저닝하는 것을 잊지 마세요.
크기 조정 과정에서 오류가 발생하거나 잘못된 구문이 있는 경우 ResponsivePics는 오류를 표시하거나 반환합니다.
ResponsivePics 오류 - 중단점 xxs가 정의되지 않았거나 숫자도 아닙니다.
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}다음 작업을 통해 이미지 크기 조정 프로세스 타임라인에 연결할 수 있습니다. 테마의 function.php 파일에 배치할 수 있습니다.
responsive_pics_request_scheduled이 작업은 ResponsivePics가 ActionScheduler 대기열에 대한 새 이미지 크기 조정 요청을 예약한 경우 실행됩니다.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(정수) 첨부 파일 ID
$resize_request
(배열) 크기 조정 요청 매개변수:
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processed이 작업은 ActionScheduler가 대기열의 이미지 크기 조정 요청을 처리했을 때 실행됩니다.
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route ); $post_id
(int) 첨부 파일 ID
$품질
(int) 요청된 이미지 품질
$ 폭
(int) 요청된 이미지 너비
$ 높이
(int) 요청된 이미지 높이
$자르기
(배열) 요청된 이미지 자르기 위치(%):
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] $비율
(float) 요청한 이미지 비율
$resize_path
(문자열) 요청한 이미지 파일 경로
responsive_pics_file_saved_local이 작업은 ResponsivePics가 크기가 조정된 이미지 파일을 로컬에 성공적으로 저장한 경우 실행됩니다.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) 첨부 파일 ID
$파일
(배열) 다음을 포함하는 저장된 파일:
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploaded이 작업은 WP Offload Media가 크기가 조정된 이미지 파일을 S3 스토리지에 업로드하면 실행됩니다.
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) 첨부 파일 ID
$파일
(배열) 다음을 포함하는 S3 업로드 파일:
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_local이 작업은 ResponsivePics가 크기가 조정된 이미지 파일을 로컬에서 성공적으로 삭제한 경우 실행됩니다.
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) 첨부 파일 ID
$파일
(문자열) 삭제된 이미지 파일 경로
responsive_pics_file_s3_deleted이 작업은 WP Offload Media가 S3 스토리지에서 크기가 조정된 이미지 파일을 삭제한 경우 실행됩니다.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) 첨부 파일 ID
$file_paths
(배열) S3 스토리지에서 삭제된 크기가 조정된 파일 경로입니다.
WP Offload Media(Lite) 플러그인을 설치하고 활성화하면 이 라이브러리는 자동으로 다음을 수행합니다.
메모
Offload Media Lite 설정에서 서버에서 파일 제거 옵션이 활성화되면 이 플러그인은 이 플러그인에 의해 생성된 크기가 조정되거나 잘린 이미지를 제거하지 않습니다 !
부울 값이 true 인 get_picture 또는 get_image 함수 또는 API 엔드포인트에서 lazyload 옵션을 활성화하면 이 라이브러리는 자동으로 다음을 수행합니다.
<img> 요소에 lazyload 클래스를 추가합니다.srcset 그림 <source> 또는 <img> 요소의 data-srcset 속성으로 바꿉니다.이를 통해 Lazysizes와 같은 지연 로딩 플러그인을 사용할 수 있습니다.
테마의 function.php 에 있는 ResponsivePics 라이브러리에 전달하여 자신만의 지연 로드 클래스를 설정할 수도 있습니다.
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}WordPress 테마에 Lazysizes를 노드 모듈로 설치하려면 테마 디렉터리에서 다음 명령을 실행하세요.
npm install --save lazysizes
yarn add lazysizes
그리고 테마의 전역 자바스크립트 파일에서 패키지를 가져옵니다.
import 'lazysizes' ; 문자열 값 native 로 lazyload 활성화하면 이 라이브러리는 자동으로 다음을 수행합니다.
<img> 요소에 기본 loading="lazy" 속성을 추가합니다. get_image 함수 또는 /responsive-pics/v1/image API 엔드포인트에서 lqip 옵션을 활성화하면 이 라이브러리는 자동으로 다음을 수행합니다.
<img> 요소에 blur-up 클래스를 추가합니다.<img> 요소에 fallback src 속성을 추가합니다.이렇게 하면 실제 고품질 이미지가 로드되기 전에 자리 표시자 이미지의 스타일을 지정할 수 있습니다.
테마의 function.php 에 있는 ResponsivePics 라이브러리에 전달하여 자신만의 lqip 클래스를 설정할 수도 있습니다.
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} get_picture 함수 또는 /responsive-pics/v1/picture API 엔드포인트에서 intrinsic 옵션을 활성화하면 이 라이브러리는 자동으로 다음을 수행합니다.
<picture> 요소에 내장 클래스를 추가하고 그림 <img> 요소에 intrinsic__item 클래스를 추가합니다.<source> 및 <img> 요소에 data-aspectratio 속성을 추가합니다.이를 통해 이미지 너비에서 높이를 계산하거나, 지연 크기 화면비 확장과 같은 내장 플러그인을 사용하여 높이에서 너비를 계산하여 이미지에 필요한 공간을 미리 점유할 수 있습니다.
WordPress 테마에서 Lazysizes 측면 비율 확장을 사용하려면 먼저 Lazyloading 섹션에 설명된 대로 Lazysizes를 노드 모듈로 설치하고 테마의 전역 자바스크립트 파일에서 확장을 가져옵니다.
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; ResponsivePics 라이브러리와 관련하여 발생한 문제를 Github에 제출해 주세요.
ResponsivePics 는 다음에 의해 개발 및 유지 관리됩니다.
@monokai (크리에이터)
@twansparant (창작자)
코드 및 문서 저작권은 2017-2023 by Clarify입니다.
MIT 라이센스에 따라 공개된 코드입니다.
Creative Commons에 따라 공개된 문서입니다.
