Drupal 8에서 적응형 이미지 스타일 구성

이전 기사에서 이미 모든 그림에는 이미지 스타일이 있어야 한다고 썼지만 때로는 충분하지 않을 수도 있습니다.

화면의 전체 너비를 차지하는 배너가 있다고 가정해 보겠습니다. 그림의 너비가 1920픽셀로 조정되는 이미지 스타일을 설정했습니다. 그리고 컴퓨터와 랩톱의 경우 이 크기가 적절한 경우 모바일 장치의 경우 너무 큽니다.

HTML에는 화면 너비에 따라 원하는 이미지를 대체하는 태그picture가 있습니다.
Drupal에서는 반응형 이미지인 커널 모듈을 통해 구현됩니다.

모듈 반응형 이미지 활성화:

drush en responsive_image -y

테마가 있는 폴더에는 중단점이 있는 파일이 있어야 합니다.

/themes/custom/themename/themename.breakpoints.yml

너비는 480, 768, 980, 1180입니다.
결과적으로 파일의 내용은 다음과 같습니다.

themename.sp:
  label: smalltouch portrait
  mediaQuery: 'all and (min-width: 1px) and (max-width: 479px)'
  weight: 4
  multipliers:
    - 1x
themename.sl:
  label: smalltouch landscape
  mediaQuery: 'all and (min-width: 480px) and (max-width: 767px)'
  weight: 3
  multipliers:
    - 1x
themename.tp:
  label: tablet portrait
  mediaQuery: 'all and (min-width: 768px) and (max-width: 979px)'
  weight: 2
  multipliers:
    - 1x
themename.tl:
  label: tablet landscape
  mediaQuery: 'all and (min-width: 980px) and (max-width: 1179px)'
  weight: 1
  multipliers:
    - 1x
themename.desktop:
  label: desktop
  mediaQuery: 'all and (min-width: 1180px)'
  weight: 0
  multipliers:
    - 2x

이제 각 중단점에 대해 너비가 중단점의 최대 너비와 같아야 하는 이미지 스타일을 만들어야 합니다.

For example: For tablet portrait, the width in the image style should be 979px, since max-width for tablet portrait = 979px.

"적응형 이미지 스타일"페이지로 이동하여 새 스타일을 추가합니다.

/admin/config/media/responsive-image-style

각 중단점에 대해 미리 정의된 이미지 스타일을 설정합니다.



그리고 "백업 이미지 스타일"에서 데스크탑 스타일을 설정합니다. 그렇기 때문에 중단점 데스크탑 이미지 스타일을 설정할 수 없습니다.

Desktop Retina는 Apple 컴퓨터에서 흔히 볼 수 있는 듀얼 픽셀 모니터용 이미지 스타일입니다.

각 너비에 대해 모든 것이 설정되면 저장을 클릭하면 적응형 이미지 스타일이 생성됩니다.

이미지를 표시하는 엔터티의 표시를 제어하려면 다음을 수행하십시오.



설정에서 우리가 만든 적응형 이미지 스타일 → 저장을 선택합니다.

이미지가 업데이트되지 않으면 다음 명령을 사용하십시오.

drush image-flush --all ; drush cr